From 7b19878d7f8823302fdb5eae90a42b477197aa1d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 19 Dec 2018 14:36:53 -0500
Subject: [PATCH] changed tablet width to 768; several responsive tweaks

---
 src/_frameless.scss                    |  2 +-
 src/lib/frameless.js                   |  2 +-
 src/views/preview/comment/comment.scss | 16 +++++++
 src/views/preview/presentation.jsx     | 64 ++++++++++++++------------
 src/views/preview/preview.scss         | 19 ++++++--
 src/views/preview/subactions.scss      |  3 +-
 6 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/_frameless.scss b/src/_frameless.scss
index 0881a3ec6..1ef127b64 100644
--- a/src/_frameless.scss
+++ b/src/_frameless.scss
@@ -35,7 +35,7 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$tablet: 640px;
+$tablet: 768px;
 $mobile: 480px;
 
 /* Media Queries */
diff --git a/src/lib/frameless.js b/src/lib/frameless.js
index 6c93deed5..abc6eb904 100644
--- a/src/lib/frameless.js
+++ b/src/lib/frameless.js
@@ -3,7 +3,7 @@
  */
 const frameless = {
     desktop: 942,
-    tablet: 640,
+    tablet: 768,
     mobile: 480
 };
 
diff --git a/src/views/preview/comment/comment.scss b/src/views/preview/comment/comment.scss
index cff4c131b..bdc93a397 100644
--- a/src/views/preview/comment/comment.scss
+++ b/src/views/preview/comment/comment.scss
@@ -1,4 +1,5 @@
 @import "../../../colors";
+@import "../../../frameless";
 
 .compose-comment {
     margin-left: .5rem;
@@ -228,6 +229,14 @@
                     content: "";
                 }
             }
+
+            /* hide comment input on tablets and mobile */
+            @media #{$medium-and-smaller} {
+                .comment-reply {
+                    display: none;
+                }
+            }
+
         }
     }
 
@@ -256,6 +265,13 @@
     margin-bottom: 1.5rem;
 }
 
+/* hide comment input on tablets and mobile */
+@media #{$medium-and-smaller} {
+    .comments-root-reply {
+        display: none;
+    }
+}
+
 .comment-reply-row {
     margin-top: 1.5rem;
     margin-left: .5rem;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 4df2ea031..8756fc1c4 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -187,7 +187,7 @@ const PreviewPresentation = ({
 
     const extensionChips = (
         <FlexRow className="extension-list">
-            {extensions && extensions.map(extension => (
+            {extensions.map(extension => (
                 <ExtensionChip
                     action={extension.action}
                     extensionL10n={extension.l10nId}
@@ -345,31 +345,35 @@ const PreviewPresentation = ({
                             </div>
                             <MediaQuery maxWidth={frameless.tablet - 1}>
                                 <FlexRow className="preview-row force-center">
-                                    <Stats
-                                        faved={faved}
-                                        favoriteCount={favoriteCount}
-                                        loveCount={loveCount}
-                                        loved={loved}
-                                        projectInfo={projectInfo}
-                                        onFavoriteClicked={onFavoriteClicked}
-                                        onLoveClicked={onLoveClicked}
-                                    />
-                                    <Subactions
-                                        addToStudioOpen={addToStudioOpen}
-                                        canReport={canReport}
-                                        isAdmin={isAdmin}
-                                        projectInfo={projectInfo}
-                                        reportOpen={reportOpen}
-                                        shareDate={shareDate}
-                                        userOwnsProject={userOwnsProject}
-                                        onAddToStudioClicked={onAddToStudioClicked}
-                                        onAddToStudioClosed={onAddToStudioClosed}
-                                        onCopyProjectLink={onCopyProjectLink}
-                                        onReportClicked={onReportClicked}
-                                        onReportClose={onReportClose}
-                                        onReportSubmit={onReportSubmit}
-                                        onToggleStudio={onToggleStudio}
-                                    />
+                                    <div className="wrappable-item">
+                                        <Stats
+                                            faved={faved}
+                                            favoriteCount={favoriteCount}
+                                            loveCount={loveCount}
+                                            loved={loved}
+                                            projectInfo={projectInfo}
+                                            onFavoriteClicked={onFavoriteClicked}
+                                            onLoveClicked={onLoveClicked}
+                                        />
+                                    </div>
+                                    <div className="wrappable-item">
+                                        <Subactions
+                                            addToStudioOpen={addToStudioOpen}
+                                            canReport={canReport}
+                                            isAdmin={isAdmin}
+                                            projectInfo={projectInfo}
+                                            reportOpen={reportOpen}
+                                            shareDate={shareDate}
+                                            userOwnsProject={userOwnsProject}
+                                            onAddToStudioClicked={onAddToStudioClicked}
+                                            onAddToStudioClosed={onAddToStudioClosed}
+                                            onCopyProjectLink={onCopyProjectLink}
+                                            onReportClicked={onReportClicked}
+                                            onReportClose={onReportClose}
+                                            onReportSubmit={onReportSubmit}
+                                            onToggleStudio={onToggleStudio}
+                                        />
+                                    </div>
                                 </FlexRow>
                             </MediaQuery>
                             <FlexRow className="project-notes">
@@ -377,9 +381,11 @@ const PreviewPresentation = ({
                                 <RemixCredit projectInfo={originalInfo} />
                                 {/*  eslint-disable max-len */}
                                 <MediaQuery maxWidth={frameless.tablet - 1}>
-                                    <FlexRow className="preview-row">
-                                        {extensionChips}
-                                    </FlexRow>
+                                    {extensions &&
+                                        <FlexRow className="preview-row">
+                                            {extensionChips}
+                                        </FlexRow>
+                                    }
                                 </MediaQuery>
                                 {showInstructions && (
                                     <div className="description-block">
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 2a4dc91b3..8f5cfb73f 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -110,6 +110,9 @@ $stage-width: 480px;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
+            .inplace-input {
+                width: calc(100% - 4rem);
+            }
         }
 
         @media #{$small} {
@@ -141,7 +144,7 @@ $stage-width: 480px;
         flex-grow: 1;
 
         @media #{$medium-and-smaller} {
-            min-width: 100%;
+            min-width: calc(100% - 2rem);
         }
     }
 
@@ -341,6 +344,16 @@ $stage-width: 480px;
                 flex-direction: row;
             }
         }
+
+        .wrappable-item {
+            margin-bottom: .5rem;
+        }
+    }
+
+    @media #{$medium-and-smaller} {
+        .preview-row {
+            align-items: center;
+        }
     }
 
     .guiPlayer {
@@ -384,7 +397,7 @@ $stage-width: 480px;
         flex-flow: column;
 
         @media #{$medium-and-smaller} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             margin-left: 0;
             width: 100%;
         }
@@ -537,7 +550,7 @@ $stage-width: 480px;
         margin-top: 1rem;
         background-color: $ui-blue-10percent;
         padding: 1rem 0;
-        min-height: 12rem;
+        min-height: 6rem;
     }
 
     .create-comment {
diff --git a/src/views/preview/subactions.scss b/src/views/preview/subactions.scss
index 528d27803..1e5cadb16 100644
--- a/src/views/preview/subactions.scss
+++ b/src/views/preview/subactions.scss
@@ -2,7 +2,6 @@
 @import "../../frameless";
 
 .subactions {
-    margin-left: 1.5rem;
     justify-content: flex-end;
     align-items: flex-start;
     flex: 1;
@@ -20,7 +19,7 @@
         font-size: .875rem;
 
         @media #{$small} {
-            margin-top: 1rem;
+            margin-top: .5rem;
             width: 100%;
             order: 100;
         }