style: User less CSS to achieve a more stable layout (#111)

* style: User less CSS to achieve a more stable layout

* style: Force column on leg pattern sliders

Author: icyJoseph

src/components/generic/Slider.js

@@ -13,9 +13,9 @@ import { RANGE_PARAMS } from "../vars"
  * */
 const Slider = ({ name, id, value, rangeParams, handleChange }) => (
     <div className="slider-container cell">
-        <span className="label">
-            <label htmlFor={id || name}>{name}</label> : {value}
-        </span>
+        <div className="label">
+            <label htmlFor={id || name}>{name}</label> : <span>{value}</span>
+        </div>
         <input
             type="range"
             id={id || name}

src/components/pages/LegPatternPage.js

@@ -39,7 +39,7 @@ class LegPatternPage extends Component {
 
     render = () => (
         <Card title={this.pageName} h="h2">
-            <div className="row-container">{this.sliders}</div>
+            <div className="leg-sliders-container">{this.sliders}</div>
             <BasicButton handleClick={this.reset}>{RESET_LABEL}</BasicButton>
         </Card>
     )

src/index.css

@@ -235,18 +235,20 @@ input[type="number"] {
 }
 
 .label {
+    width: 100%;
     font-size: 0.6rem;
     margin-left: 5px;
     opacity: 0.5;
+    white-space: nowrap;
 }
 
 .no-display {
     display: none;
 }
 
-.row-container {
+.row-container,
+.leg-sliders-container {
     display: flex;
-    flex-wrap: unset;
 }
 
 .flex-wrap {
@@ -268,7 +270,6 @@ input[type="number"] {
 
 .slider {
     -webkit-appearance: none;
-    width: 100%;
     height: 4px;
     border: 0px;
     border-radius: 5px;
@@ -322,6 +323,7 @@ input[type="number"] {
 
 .switch + .label {
     cursor: pointer;
+    width: unset;
 }
 
 /* Hide default HTML checkbox */
@@ -409,12 +411,12 @@ input:checked + .toggle-switch-widget:before {
         flex-grow: 0;
     }
 
-    .row-container {
-        flex-wrap: wrap;
+    .leg-sliders-container {
+        flex-direction: column;
     }
 
     .slider-container.cell {
-        flex: auto;
+        flex: 1;
     }
 
     th,
@@ -431,21 +433,20 @@ input:checked + .toggle-switch-widget:before {
     }
 
     .main {
-        flex-direction: column;
+        flex-direction: column-reverse;
         margin: 0;
     }
 
     .sidebar {
         max-width: 600px;
-        width: 100%;
-        order: 1;
-        margin-right: 0;
+        width: 90%;
+        min-width: 290px;
+        margin: 0 auto;
     }
 
     .plot {
         width: 100%;
         height: 400px;
-        order: 0;
         box-sizing: border-box;
         margin: 0;
         margin-top: 5px;
@@ -454,16 +455,17 @@ input:checked + .toggle-switch-widget:before {
 
 @media screen and (max-width: 667px) and (orientation: landscape) {
     .main {
-        flex-direction: column;
+        flex-direction: column-reverse;
         margin: 0;
     }
 
     .sidebar {
         min-width: 225px;
+        margin: 0 auto;
     }
 
     .plot {
-        margin: 0 auto;
+        margin: 8px auto 0;
         width: 90%;
         height: 275px;
         min-width: 250px;
@@ -473,16 +475,12 @@ input:checked + .toggle-switch-widget:before {
         flex-grow: 0;
     }
 
-    .nav {
-        display: none;
-    }
-
-    .row-container {
-        flex-wrap: wrap;
+    .leg-sliders-container {
+        flex-direction: column;
     }
 
     .slider-container.cell {
-        flex: auto;
+        flex: 1;
     }
 
     table {
@@ -496,11 +494,6 @@ input:checked + .toggle-switch-widget:before {
         padding-top: 10px;
         padding-bottom: 10px;
     }
-
-    .top-bar {
-        display: none;
-        height: 10px;
-    }
 }
 
 @media screen and (max-width: 767px) {