Fix responsive issue on WelcomeBox (firefox-devtools#4119)

amitzur · Oct 5, 2017 · 281370c · 281370c
1 parent ee66f35
commit 281370c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/src/components/WelcomeBox.css b/src/components/WelcomeBox.css
@@ -32,12 +32,26 @@
   offset-inline-start: auto;
 }
 
+.welcomebox .small-size-layout {
+  display: none;
+}
+
+.welcomebox .normal-layout {
+  display: inline-block;
+}
+
 .shortcutKeys {
   text-align: right;
   float: left;
   font-family: Courier;
 }
 
+.shortcutKey {
+  display: inline-block;
+  margin-right: 10px;
+  font-family: Courier;
+}
+
 .shortcutFunction {
   text-align: left;
   float: left;
@@ -47,3 +61,23 @@
 html .welcomebox .toggle-button-end.collapsed {
   bottom: 1px;
 }
+
+@media (max-width: 430px) {
+
+  .welcomebox .small-size-layout {
+    display: inline-block;
+  }
+
+  .welcomebox .normal-layout {
+    display: none;
+  }
+
+  .shortcutFunction {
+    margin-left: 0;
+  }
+
+  .shortcutKey {
+    display: block;
+  }
+}
+
diff --git a/src/components/WelcomeBox.js b/src/components/WelcomeBox.js
@@ -53,7 +53,20 @@ class WelcomeBox extends Component {
 
     return (
       <div className="welcomebox">
-        <div className="alignlabel">
+        <div className="alignlabel small-size-layout">
+          <div className="shortcutFunction">
+            <p onClick={setActiveSearch.bind(null, "source")}>
+              <div className="shortcutKey">{searchSourcesShortcut}</div>
+              {searchSourcesLabel}
+            </p>
+            <p onClick={setActiveSearch.bind(null, "project")}>
+              <div className="shortcutKey">{searchProjectShortcut}</div>
+              {searchProjectLabel}
+            </p>
+          </div>
+          {this.renderToggleButton()}
+        </div>
+        <div className="alignlabel normal-layout">
           <div className="shortcutKeys">
             <p onClick={setActiveSearch.bind(null, "source")}>
               {searchSourcesShortcut}
@@ -70,7 +83,6 @@ class WelcomeBox extends Component {
               {searchProjectLabel}
             </p>
           </div>
-          {this.renderToggleButton()}
         </div>
       </div>
     );