From 8b10f3cba4e0577cc2fbb4c757342ead05000d03 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Fri, 14 Sep 2018 13:52:29 -0400
Subject: [PATCH] made project stats and action buttons responsive

---
 src/views/preview/presentation.jsx |  2 +-
 src/views/preview/preview.scss     | 43 +++++++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 7403613df..d8dc01478 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -87,7 +87,7 @@ const PreviewPresentation = ({
             { projectInfo && projectInfo.author && projectInfo.author.id && (
                 <Formsy onKeyPress={onKeyPress}>
                     <div className="inner">
-                        <FlexRow className="preview-row">
+                        <FlexRow className="preview-row wrap-to-col">
                             <FlexRow className="project-header">
                                 <a href={`/users/${projectInfo.author.username}`}>
                                     <Avatar
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index c9bf9da63..0a0f7ea96 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -6,10 +6,6 @@ $player-width: 482px;
 $player-height: 406px;
 $stage-width: 480px;
 
-/* screen sizes */
-$small: "screen and (max-width : #{$mobile}-1)";
-$medium: "screen and (min-width : #{$mobile}) and (max-width : #{$tablet}-1)";
-$big: "screen and (min-width : #{$tablet})";
 $medium-and-small: "screen and (max-width : #{$tablet}-1)";
 
 /* override view padding for share banner */
@@ -211,6 +207,15 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         justify-content: space-between;
         align-items: flex-start;
         flex-wrap: nowrap;
+
+        &.wrap-to-col {
+            @media #{$medium-and-small} {
+                width: 100%;
+                flex-wrap: wrap-reverse;
+                flex-direction: column;
+                justify-content: center;
+            }
+        }
     }
 
     .guiPlayer {
@@ -347,6 +352,10 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         transform: scale(-1, 1);
         margin: 0;
         text-align: right;
+
+        @media #{$medium-and-small} {
+            padding: 0;
+        }
     }
 
     .stats {
@@ -354,6 +363,32 @@ $medium-and-small: "screen and (max-width : #{$tablet}-1)";
         justify-content: flex-start;
     }
 
+    .stats, .subactions, .action-buttons {
+      @media #{$medium-and-small} {
+          margin: 0;
+          justify-content: center;
+          flex-direction: row;
+      }
+
+      & > div, .action-button {
+          @media #{$medium-and-small} {
+              padding: 0 1rem;
+          }
+      }
+    }
+
+    .stats, .subactions {
+      @media #{$medium-and-small} {
+          width: 100%;
+      }
+    }
+
+    .subactions {
+      @media #{$medium-and-small} {
+          margin-top: 1rem;
+      }
+    }
+
     .project-loves,
     .project-favorites,
     .project-remixes,