From ae2d31022785db0c5926ff79f115af5683433f4e Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 29 Mar 2018 21:16:05 -0700
Subject: [PATCH] Responsiveness working for scene preview

---
 src/assets/stylesheets/hub-create.scss   | 41 +++++++++++++++++++++++-
 src/assets/stylesheets/index.scss        |  9 +++++-
 src/react-components/hub-create-panel.js | 10 +++---
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index b20acd5f4..9366a357a 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -31,10 +31,17 @@
 @media (max-width: 768px) {
   .create-panel__form {
     width: auto;
-    max-width: 500px;
+    width: 500px;
   }
 }
 
+@media (max-width: 520px) {
+  .create-panel__form {
+    width: 300px;
+  }
+}
+
+
 .create-panel__form__name {
   @extend %rounded-border;
   @extend %default-font;
@@ -60,6 +67,21 @@
     width: 100%;
     text-align: center;
   }
+
+  .create-panel__form__name--expanded {
+    padding-top: 300px;
+  }
+}
+
+@media (max-width: 520px) {
+  .create-panel__form__name {
+    padding-left: 15px;
+    font-size: 1.2em;
+  }
+
+  .create-panel__form__name--expanded {
+    padding-top: 190px;
+  }
 }
 
 .create-panel__form__name::selection {
@@ -85,6 +107,12 @@
   bottom: 0;
 }
 
+@media (max-width: 520px) {
+  .create-panel__form__left_button {
+    display: none;
+  }
+}
+
 .create-panel__form__right_button {
   position: absolute;
   height: 95px;
@@ -124,6 +152,17 @@
   overflow: hidden;
 }
 
+@media (max-width: 768px) {
+  .create-panel__form__environment__picker {
+    height: 280px;
+  }
+}
+
+@media (max-width: 520px) {
+  .create-panel__form__environment__picker {
+    height: 165px;
+  }
+}
 
 .create-panel__form__environment__picker__image {
   width: 100%;
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 67655d5f5..a4ed51980 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -125,15 +125,22 @@ body {
   //  background-color: blue;
   flex: 10;
   text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
-  min-height: 700px;
+  min-height: 740px;
   display: flex;
   flex-direction: column;
 }
 
+@media (max-width: 1280px) {
+  .hero-content {
+    min-height: 600px;
+  }
+}
+
 @media (max-width: 768px) {
   .hero-content {
     padding: 1em 1.5em 1em 1.5em;
     justify-content: space-around;
+    min-height: 490px;
   }
 }
 
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index cbe18342d..946f2737f 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -18,7 +18,7 @@ class HubCreatePanel extends Component {
     this.state = {
       name: generateHubName(),
       environmentIndex: Math.floor(Math.random() * props.environments.length),
-      expanded: true
+      expanded: false
     };
   }
 
@@ -67,9 +67,11 @@ class HubCreatePanel extends Component {
     return (
       <form onSubmit={this.createHub}>
         <div className="create-panel">
-          <div className="create-panel__header">
-            <FormattedMessage id={this.state.expanded ? "home.create_header_expanded" : "home.create_header"} />
-          </div>
+          {!this.state.expanded && (
+            <div className="create-panel__header">
+              <FormattedMessage id="home.create_header" />
+            </div>
+          )}
           <div className="create-panel__form">
             <div
               className="create-panel__form__left_button"
-- 
GitLab