From 86551baa943241331fefbcf72a53bd299c4b3c89 Mon Sep 17 00:00:00 2001
From: Robert Chen <robertchen@live.com>
Date: Thu, 20 Sep 2018 22:15:10 -0700
Subject: [PATCH 01/17] Fixed Issue 1930

---
 src/components/registration/steps.jsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index a1d752f99..f9c0b3b4c 100644
--- a/src/components/registration/steps.jsx
+++ b/src/components/registration/steps.jsx
@@ -444,18 +444,20 @@ class DemographicsStep extends React.Component {
     handleChooseGender (name, gender) {
         this.setState({otherDisabled: gender !== 'other'});
     }
-    handleValidSubmit (formData, reset, invalidate) {
+    handleValidSubmit (formData) {
+        return this.props.onNextStep(formData);
+    }
+    isValidBirthdate (year, month) {
         const birthdate = new Date(
-            formData.user.birth.year,
-            formData.user.birth.month - 1,
+            year,
+            month - 1,
             1
         );
-        if (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) < this.props.birthOffset) {
-            return invalidate({
-                'user.birth.year': this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'})
-            });
-        }
-        return this.props.onNextStep(formData);
+        return (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) >= this.props.birthOffset);
+    }
+    birthDateValidator (values) {
+        const isValid = this.isValidBirthdate(values['user.birth.year'], values['user.birth.month']);
+        return isValid ? true : this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'});
     }
     render () {
         const countryOptions = getCountryOptions(this.props.intl, DEFAULT_COUNTRY);
@@ -485,6 +487,9 @@ class DemographicsStep extends React.Component {
                             }
                             name="user.birth.month"
                             options={this.getMonthOptions()}
+                            validations={{
+                                birthDateVal: values => this.birthDateValidator(values)
+                            }}
                         />
                         <Select
                             required

From 8bc158118e8b8e81e87296c9959b56737f9d686e Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 21 Sep 2018 09:53:58 -0400
Subject: [PATCH 02/17] fixed color gradiant display in Safari

---
 src/views/preview/comment/comment.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index 7c9027d01..285d673e7 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,5 +1,7 @@
 @import "../../../colors";
 
+$cross-browser-transparent: hsla(0, 0, 100, 0);
+
 .compose-comment {
     width: 100%;
 
@@ -172,7 +174,7 @@
                 position: absolute;
                 bottom: 0;
                 background: linear-gradient(
-                    transparent,
+                    $cross-browser-transparent,
                     $ui-light-primary
                 );
                 width: 100%;
@@ -188,7 +190,7 @@
     margin-bottom: 24px;
     width: 100%;
     overflow: hidden;
-    text-align: center; 
+    text-align: center;
 
     &:before,
     &:after {
@@ -211,4 +213,3 @@
         margin-right: -50%;
     }
 }
-

From 0d894e32084f417ff8d9018b55e9d91ef23e3cc6 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 21 Sep 2018 09:57:49 -0400
Subject: [PATCH 03/17] convention of writing hsl is with percentages

---
 src/views/preview/comment/comment.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index 285d673e7..c1513110a 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,6 +1,6 @@
 @import "../../../colors";
 
-$cross-browser-transparent: hsla(0, 0, 100, 0);
+$cross-browser-transparent: hsla(0, 0, 100%, 0);
 
 .compose-comment {
     width: 100%;

From a16018024570a5df33c66e499000851aee44c04d Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 21 Sep 2018 13:26:49 -0400
Subject: [PATCH 04/17] added transparent for ui primary for cross browser
 support to colors css

---
 src/_colors.scss                       | 1 +
 src/views/preview/comment/comment.scss | 4 +---
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/_colors.scss b/src/_colors.scss
index 5ef54a7ce..33c5560c3 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -28,6 +28,7 @@ $ui-coral-dark: hsla(350, 100, 60, 1); // #FF3355 More Blocks tertiary
 $ui-white: hsla(0, 100%, 100%, 1); //#FFF
 $ui-white-15percent: hsla(0, 100%, 100%, .15); //#FFF
 $ui-light-primary: hsl(215, 100, 95);
+$ui-light-primary-transparent: hsla(215, 100, 95, 0);
 
 $ui-border: hsla(0, 0, 85, 1); //#D9D9D9
 
diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index c1513110a..e7bfdffdc 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,7 +1,5 @@
 @import "../../../colors";
 
-$cross-browser-transparent: hsla(0, 0, 100%, 0);
-
 .compose-comment {
     width: 100%;
 
@@ -174,7 +172,7 @@ $cross-browser-transparent: hsla(0, 0, 100%, 0);
                 position: absolute;
                 bottom: 0;
                 background: linear-gradient(
-                    $cross-browser-transparent,
+                    $ui-light-primary-transparent,
                     $ui-light-primary
                 );
                 width: 100%;

From d066e73b916d0610ef3c43b815222aeb56a9bc52 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 21 Sep 2018 13:52:42 -0400
Subject: [PATCH 05/17] extensions buttons made responsive

---
 src/views/preview/preview.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 542c31d7b..cc2bb204a 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -515,6 +515,12 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
     .extension-list {
         justify-content: flex-start;
+        flex-direction: row;
+
+        @media #{$medium-and-small} {
+            justify-content: center;
+        }
+
     }
 
     .remix-list,

From 51bb905381d4c632a0180b62e5dacf160e575051 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Mon, 24 Sep 2018 11:50:44 -0400
Subject: [PATCH 06/17] extensions appear on correct place depending on media
 query

---
 src/views/preview/extension-chip.scss |  1 +
 src/views/preview/presentation.jsx    | 44 +++++++++++++++++++--------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/views/preview/extension-chip.scss b/src/views/preview/extension-chip.scss
index f86feb488..f883f0431 100644
--- a/src/views/preview/extension-chip.scss
+++ b/src/views/preview/extension-chip.scss
@@ -26,6 +26,7 @@
         font-size: .875rem;
         justify-content: center;
         flex-flow: column;
+        align-items: flex-start;
     }
 
     .extension-status {
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 7c32ad025..62c97f1b0 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -2,6 +2,7 @@ const FormattedDate = require('react-intl').FormattedDate;
 const injectIntl = require('react-intl').injectIntl;
 const PropTypes = require('prop-types');
 const intlShape = require('react-intl').intlShape;
+const MediaQuery = require('react-responsive').default;
 const React = require('react');
 const Formsy = require('formsy-react').default;
 const classNames = require('classnames');
@@ -28,6 +29,8 @@ const ExtensionChip = require('./extension-chip.jsx');
 const projectShape = require('./projectshape.jsx').projectShape;
 require('./preview.scss');
 
+const frameless = require('../../lib/frameless');
+
 // disable enter key submission on formsy input fields; otherwise formsy thinks
 // we meant to trigger the "See inside" button. Instead, treat these keypresses
 // as a blur, which will trigger a save.
@@ -155,6 +158,21 @@ const PreviewPresentation = ({
                                 <RemixCredit projectInfo={parentInfo} />
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
+                                <MediaQuery maxWidth={frameless.tablet - 1}>
+                                    <FlexRow className="preview-row">
+                                        <FlexRow className="extension-list">
+                                            {extensions && extensions.map(extension => (
+                                                <ExtensionChip
+                                                    extensionL10n={extension.l10nId}
+                                                    extensionName={extension.name}
+                                                    hasStatus={extension.hasStatus}
+                                                    iconURI={extension.icon && `/svgs/project/${extension.icon}`}
+                                                    key={extension.name || extension.l10nId}
+                                                />
+                                            ))}
+                                        </FlexRow>
+                                    </FlexRow>
+                                </MediaQuery>
                                 <FlexRow className="description-block">
                                     <div className="project-textlabel">
                                         Instructions
@@ -309,19 +327,21 @@ const PreviewPresentation = ({
                                 </FlexRow>
                             </FlexRow>
                         </FlexRow>
-                        <FlexRow className="preview-row">
-                            <FlexRow className="extension-list">
-                                {extensions && extensions.map(extension => (
-                                    <ExtensionChip
-                                        extensionL10n={extension.l10nId}
-                                        extensionName={extension.name}
-                                        hasStatus={extension.hasStatus}
-                                        iconURI={extension.icon && `/svgs/project/${extension.icon}`}
-                                        key={extension.name || extension.l10nId}
-                                    />
-                                ))}
+                        <MediaQuery minWidth={frameless.tablet}>
+                            <FlexRow className="preview-row">
+                                <FlexRow className="extension-list">
+                                    {extensions && extensions.map(extension => (
+                                        <ExtensionChip
+                                            extensionL10n={extension.l10nId}
+                                            extensionName={extension.name}
+                                            hasStatus={extension.hasStatus}
+                                            iconURI={extension.icon && `/svgs/project/${extension.icon}`}
+                                            key={extension.name || extension.l10nId}
+                                        />
+                                    ))}
+                                </FlexRow>
                             </FlexRow>
-                        </FlexRow>
+                        </MediaQuery>
                     </div>
                     <div className="project-lower-container">
                         <div className="inner">

From 89aaaab4d31d01003fe9d4c9a84cab0edcfd8f28 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Wed, 26 Sep 2018 10:24:53 -0400
Subject: [PATCH 07/17] removed moderator position from jobs page

---
 src/views/jobs/jobs.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/views/jobs/jobs.jsx b/src/views/jobs/jobs.jsx
index 72c0ab336..97ce905b5 100644
--- a/src/views/jobs/jobs.jsx
+++ b/src/views/jobs/jobs.jsx
@@ -35,14 +35,6 @@ const Jobs = () => (
                             MIT Media Lab, Cambridge, MA
                         </span>
                     </li>
-                    <li>
-                        <a href="https://scratch.mit.edu/jobs/moderator">
-                            Community Moderator
-                        </a>
-                        <span>
-                            Remote
-                        </span>
-                    </li>
                 </ul>
             </div>
         </div>

From a94b9d6c84b02362805cef0cf3da2c9b07040114 Mon Sep 17 00:00:00 2001
From: Robert Chen <gamesterrex@gmail.com>
Date: Wed, 26 Sep 2018 11:16:56 -0700
Subject: [PATCH 08/17] Fix gh-1934: Search bar special chars (#2075)

* Fixed Issue 1934

The text was encoded once already by the search bar. That means we need to decode it twice in order to decode special characters.

* Rewrote search query parsing
---
 src/views/search/search.jsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx
index 01d092f6c..ab348cfcd 100644
--- a/src/views/search/search.jsx
+++ b/src/views/search/search.jsx
@@ -57,12 +57,21 @@ class Search extends React.Component {
 
     }
     componentDidMount () {
-        const query = window.location.search;
-        const q = query.lastIndexOf('q=');
-        let term = '';
-        if (q !== -1) {
-            term = query.substring(q + 2, query.length).toLowerCase();
-        }
+        const query = decodeURIComponent(window.location.search);
+        let term = query;
+
+        const stripQueryValue = function (queryTerm) {
+            const queryIndex = query.indexOf('q=');
+            if (queryIndex !== -1) {
+                queryTerm = query.substring(queryIndex + 2, query.length).toLowerCase();
+            }
+            return queryTerm;
+        };
+        // Strip off the initial "?q="
+        term = stripQueryValue(term);
+        // Strip off user entered "?q="
+        term = stripQueryValue(term);
+
         while (term.indexOf('/') > -1) {
             term = term.substring(0, term.indexOf('/'));
         }

From 4299afaec57c9aa2db9557a04a5d652e8d5fde58 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Tue, 18 Sep 2018 17:05:50 -0400
Subject: [PATCH 09/17] fixes to warning and thumbnailcolumns for mobile WIP

---
 .../thumbnailcolumn/thumbnailcolumn.scss          |  1 +
 src/views/preview/preview.scss                    | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/thumbnailcolumn/thumbnailcolumn.scss b/src/components/thumbnailcolumn/thumbnailcolumn.scss
index 5e146aa67..ef23bce06 100644
--- a/src/components/thumbnailcolumn/thumbnailcolumn.scss
+++ b/src/components/thumbnailcolumn/thumbnailcolumn.scss
@@ -45,6 +45,7 @@
                 float: left;
                 max-width: 164px;
                 overflow: hidden;
+                text-align: left;
 
                 .thumbnail-creator a {
                     color: $type-gray;
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 542c31d7b..e7fe26e5b 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -536,6 +536,21 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         .thumbnail-column {
             display: inline-block;
             width: 100%;
+
+            /* the following can be transferred to
+            src/components/thumbnailcolumn/thumbnailcolumn.scss
+            after testing */
+            @media #{$medium-and-small} {
+                flex-direction: row;
+
+                .thumbnail {
+                    display: inline-block;
+                }
+            }
+        }
+
+        @media #{$medium-and-small} {
+            margin-top: 1rem;
         }
     }
 }

From 532e201f5374caeaab150363ece7837339601977 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Mon, 17 Sep 2018 11:19:22 -0400
Subject: [PATCH 10/17] made comments roughly responsive

---
 src/views/preview/preview.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 542c31d7b..522208abe 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -153,7 +153,19 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
     }
 
     .comments-container {
-        width: 65%;
+        min-width: 65%;
+
+        @media #{$medium-and-small} {
+            width: 100%;
+        }
+
+        .comment, .comment-top-row, .comment-bottom-row {
+          flex-direction: row;
+        }
+
+        .comment-bubble {
+          text-align: left;
+        }
     }
 
     .remix-button,

From c18a073e175274e1fe663186371af59bf353ee5d Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Wed, 26 Sep 2018 16:39:37 -0400
Subject: [PATCH 11/17] some fixes

---
 src/views/preview/preview.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 522208abe..9532b1278 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -154,9 +154,13 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
     .comments-container {
         min-width: 65%;
+        max-width: 100%;
+        flex: 1;
+        padding-right: 1.5rem;
 
         @media #{$medium-and-small} {
             width: 100%;
+            padding: 0;
         }
 
         .comment, .comment-top-row, .comment-bottom-row {

From b5a49e6cf29599db24f78901b031fbd1dc232e1f Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Wed, 26 Sep 2018 16:45:42 -0400
Subject: [PATCH 12/17] linting fixes

---
 src/views/preview/preview.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 9532b1278..eb03ba4bd 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -153,22 +153,22 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
     }
 
     .comments-container {
+        padding-right: 1.5rem;
         min-width: 65%;
         max-width: 100%;
         flex: 1;
-        padding-right: 1.5rem;
 
         @media #{$medium-and-small} {
-            width: 100%;
             padding: 0;
+            width: 100%;
         }
 
         .comment, .comment-top-row, .comment-bottom-row {
-          flex-direction: row;
+            flex-direction: row;
         }
 
         .comment-bubble {
-          text-align: left;
+            text-align: left;
         }
     }
 

From 32ab0202bc2b579b79198233f379856aa0a3663d Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Wed, 26 Sep 2018 17:16:17 -0400
Subject: [PATCH 13/17] made project notes look better on mobile

---
 src/views/preview/preview.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 542c31d7b..34dcee708 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -200,6 +200,14 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
     .guiPlayer {
         display: inline-block;
         width: $player-width;
+
+        @media #{$small} {
+           width: 100%;
+
+           .stage-wrapper {
+                max-width: 100%;
+            }
+        }
     }
 
     .project-notes {
@@ -209,6 +217,12 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         flex: 1;
         flex-flow: column;
 
+        @media #{$medium-and-small} {
+            margin-top: 1rem;
+            margin-left: 0;
+            width: 100%;
+        }
+
         > .description-block:first-child {
             margin-top: 1rem;
         }

From e0149061252e3411db426594b7aecc72f366e6bc Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Wed, 26 Sep 2018 17:26:19 -0400
Subject: [PATCH 14/17] linting fixes

---
 src/views/preview/preview.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 34dcee708..f4bf1dc9b 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -202,9 +202,9 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         width: $player-width;
 
         @media #{$small} {
-           width: 100%;
+            width: 100%;
 
-           .stage-wrapper {
+            .stage-wrapper {
                 max-width: 100%;
             }
         }

From 1ad9a95a3d264ad76be7b1d72a0ea4e6ee19777b Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 26 Sep 2018 21:42:44 -0400
Subject: [PATCH 15/17] Add placeholder share handler

Having the `onShare` prop defined to a function enables the button in the GUI
---
 src/views/preview/preview.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
index bbd7a9490..03f4fe48d 100644
--- a/src/views/preview/preview.jsx
+++ b/src/views/preview/preview.jsx
@@ -246,6 +246,9 @@ class Preview extends React.Component {
     handleSeeInside () {
         this.props.setPlayer(false);
     }
+    handleShare () {
+        // This is just a placeholder, but enables the button in the editor
+    }
     handleUpdate (jsonData) {
         this.props.updateProject(
             this.props.projectInfo.id,
@@ -338,6 +341,7 @@ class Preview extends React.Component {
                         renderLogin={this.renderLogin}
                         onLogOut={this.props.handleLogOut}
                         onOpenRegistration={this.props.handleOpenRegistration}
+                        onShare={this.handleShare}
                         onToggleLoginOpen={this.props.handleToggleLoginOpen}
                         onUpdateProjectTitle={this.handleUpdateProjectTitle}
                     />

From d04dc8aad1e0ae8eaf4139cc42fb99d8c4ecd02d Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Wed, 26 Sep 2018 21:48:08 -0400
Subject: [PATCH 16/17] Track scratch-gui@develop

The lag between releases for scratch-gui@latest hinders testing scratch-gui/www integration changes
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3f52c53fc..5817bc436 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "redux-thunk": "2.0.1",
     "sass-lint": "1.5.1",
     "sass-loader": "6.0.6",
-    "scratch-gui": "latest",
+    "scratch-gui": "develop",
     "scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
     "slick-carousel": "1.6.0",
     "source-map-support": "0.3.2",

From 50c7eb9bfdeec234c9f06eef248ee50b6a65fd61 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Thu, 27 Sep 2018 10:31:32 -0400
Subject: [PATCH 17/17] added todo

---
 src/views/preview/preview.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index e7fe26e5b..222ea45eb 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -537,7 +537,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             display: inline-block;
             width: 100%;
 
-            /* the following can be transferred to
+            /* TODO: the following can be transferred to
             src/components/thumbnailcolumn/thumbnailcolumn.scss
             after testing */
             @media #{$medium-and-small} {