From d358c454827d6623c9c961736d178458ebe679e0 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 5 Oct 2018 10:25:56 -0400
Subject: [PATCH] media queries used in responsive project page have been moved
 to frameless.css

---
 src/_frameless.scss                         | 23 ++++++++++++++++++
 src/components/modal/addtostudio/modal.scss |  5 ----
 src/components/modal/base/modal.scss        | 10 ++------
 src/components/modal/report/modal.scss      |  5 ++--
 src/views/preview/preview.scss              | 27 +++++++++------------
 src/views/preview/stats.scss                |  6 ++---
 src/views/preview/subactions.scss           | 15 ++++--------
 7 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/_frameless.scss b/src/_frameless.scss
index 854e109c1..d0ff4626b 100644
--- a/src/_frameless.scss
+++ b/src/_frameless.scss
@@ -38,6 +38,29 @@ $desktop: 942px;
 $tablet: 640px;
 $mobile: 480px;
 
+/* Media Queries */
+
+/* Width */
+/*
+* ... small | medium     | intermediate | big ...
+* ... medium-and-smaller |
+*          ... intermediate-and-smaller |
+*/
+
+$small: "only screen and (max-width : #{$mobile}-1)";
+$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
+$intermediate: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
+$big: "only screen and (min-width : #{$desktop})";
+
+$medium-and-smaller: "only screen and (max-width : #{$tablet}-1)";
+$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
+
+/* Height */
+
+$small-height: "only screen and (max-height : #{$mobile} - 1)";
+$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tablet} - 1)";
+
+
 //
 // Column-widths in a function, in ems
 //
diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss
index cb05c592e..92f42b0b8 100644
--- a/src/components/modal/addtostudio/modal.scss
+++ b/src/components/modal/addtostudio/modal.scss
@@ -1,11 +1,6 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-$small: "only screen and (max-width : #{$mobile})";
-$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
-$small-height: "only screen and (max-height : #{$mobile})";
-$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
-
 .mod-addToStudio {
     overflow: hidden;
 
diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss
index 6d35da521..b49473acb 100644
--- a/src/components/modal/base/modal.scss
+++ b/src/components/modal/base/modal.scss
@@ -1,12 +1,6 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-$small: "only screen and (max-width : #{$mobile})";
-$medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}-1)";
-$big: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)";
-$small-height: "only screen and (max-height : #{$mobile})";
-$medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
-
 .overflow-hidden {
     /* to avoid double scroll bars this
     gets added to body while modal is open */
@@ -32,7 +26,7 @@ $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height :
         outline: none;
     }
 
-    @media #{$small}, #{$medium}, #{$big} {
+    @media #{$intermediate-and-smaller} {
         margin-top: 0;
         width: 100%;
         overflow: auto;
@@ -82,7 +76,7 @@ $modal-close-size: 1rem;
     align-items: flex-start;
     flex-wrap: nowrap;
 
-    @media #{$small}, #{$medium}, #{$big} {
+    @media #{$intermediate-and-smaller} {
         justify-content: center !important; //overwriting flex row properties
         flex-direction: row !important;
     }
diff --git a/src/components/modal/report/modal.scss b/src/components/modal/report/modal.scss
index ae41e8b6c..b6db6da85 100644
--- a/src/components/modal/report/modal.scss
+++ b/src/components/modal/report/modal.scss
@@ -1,7 +1,6 @@
 @import "../../../colors";
 @import "../../../frameless";
 
-$medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
 .report-modal-header {
     box-shadow: inset 0 -1px 0 0 $ui-coral-dark;
@@ -47,7 +46,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         overflow: visible;
         color: $type-white;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             position: relative;
             margin-top: calc($arrow-border-width / 2);
             max-width: 100%;
@@ -72,7 +71,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
             content: "";
 
-            @media #{$medium-and-small} {
+            @media #{$medium-and-smaller} {
                 display: none;
             }
         }
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 9efe99a9e..590f1b398 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -6,9 +6,6 @@ $player-width: 482px;
 $player-height: 406px;
 $stage-width: 480px;
 
-$small: "screen and (max-width : #{$mobile}-1)";
-$medium-and-small: "screen and (max-width : #{$tablet}-1)";
-
 /* override view padding for share banner */
 #view {
     padding: 0;
@@ -56,7 +53,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             height: calc(3rem - 4px);
         }
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             flex-direction: row;
         }
     }
@@ -84,7 +81,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         font-size: .8rem;
         flex-grow: 1;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             min-width: 100%;
         }
     }
@@ -105,7 +102,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         color: $type-white;
         font-size: 1rem;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             margin-top: calc($arrow-border-width / 2);
             width: 100%;
         }
@@ -128,7 +125,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
             content: "";
 
-            @media #{$medium-and-small} {
+            @media #{$medium-and-smaller} {
                 display: none;
             }
         }
@@ -162,7 +159,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         max-width: 100%;
         flex: 1;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             padding: 0;
             width: 100%;
         }
@@ -217,7 +214,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         flex-wrap: nowrap;
 
         &.force-row {
-            @media #{$medium-and-small} {
+            @media #{$medium-and-smaller} {
                 flex-direction: row;
             }
         }
@@ -237,7 +234,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
     }
 
     .force-center {
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             align-self: center;
         }
     }
@@ -249,7 +246,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         flex: 1;
         flex-flow: column;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             margin-top: 1rem;
             margin-left: 0;
             width: 100%;
@@ -270,7 +267,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         flex-wrap: nowrap;
         align-items: center;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             flex-direction: row;
         }
     }
@@ -376,7 +373,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         justify-content: flex-start;
         flex-direction: row;
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             justify-content: center;
         }
 
@@ -405,7 +402,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             /* TODO: the following can be transferred to
             src/components/thumbnailcolumn/thumbnailcolumn.scss
             after testing */
-            @media #{$medium-and-small} {
+            @media #{$medium-and-smaller} {
                 flex-direction: row;
 
                 .thumbnail {
@@ -414,7 +411,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             }
         }
 
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             margin-top: 1rem;
         }
     }
diff --git a/src/views/preview/stats.scss b/src/views/preview/stats.scss
index b2296984c..5b159aaaf 100644
--- a/src/views/preview/stats.scss
+++ b/src/views/preview/stats.scss
@@ -1,12 +1,10 @@
 @import "../../frameless";
 
-$medium-and-small: "screen and (max-width : #{$tablet}-1)";
-
 .stats {
     line-height: 2rem;
     justify-content: flex-start;
 
-    @media #{$medium-and-small} {
+    @media #{$medium-and-smaller} {
         margin: 0;
         width: 100%;
         justify-content: center;
@@ -14,7 +12,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
     }
 
     & > div {
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             padding: 0 1rem;
         }
     }
diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss
index 0b34411f5..b778b6bb5 100644
--- a/src/views/preview/subactions.scss
+++ b/src/views/preview/subactions.scss
@@ -1,18 +1,13 @@
 @import "../../colors";
 @import "../../frameless";
 
-$small: "screen and (max-width : #{$mobile}-1)";
-$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
-$intermediate: "screen and (min-width : #{$tablet}) and (max-width : 941px)"; /* 941 because currently breakpoint of .inner in www is 941 */
-$medium-and-small: "screen and (max-width : #{$tablet}-1)";
-
 .subactions {
     margin-left: 1.5rem;
     justify-content: flex-end;
     align-items: flex-start;
     flex: 1;
 
-    @media #{$medium-and-small} {
+    @media #{$medium-and-smaller} {
         margin-top: 1rem;
         width: 100%;
     }
@@ -36,7 +31,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             margin: 0;
             text-align: right;
 
-            @media #{$medium-and-small} {
+            @media #{$medium-and-smaller} {
                 padding: 0;
             }
         }
@@ -60,7 +55,7 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
             line-height: .875rem;
             font-size: .75rem;
             font-weight: normal;
-            
+
             &.studio-button,
             &.copy-link-button,
             &.report-button {
@@ -101,14 +96,14 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 }
 
 .subactions, .subactions .action-buttons {
-    @media #{$medium-and-small} {
+    @media #{$medium-and-smaller} {
         margin: 0;
         justify-content: center;
         flex-direction: row;
     }
 
     & > div, .action-button {
-        @media #{$medium-and-small} {
+        @media #{$medium-and-smaller} {
             padding: 0 1rem;
         }
     }