Add support for displaying the app on split screens

victronenergy · Nov 5, 2018 · ae2c885 · ae2c885
1 parent 1d4eb29
commit ae2c885
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 22 deletions.
diff --git a/dist/bundle.47a8fac661c29aaae9cc.js → dist/bundle.9b5ce89a7682e5a7f878.js b/dist/bundle.47a8fac661c29aaae9cc.js → dist/bundle.9b5ce89a7682e5a7f878.js
diff --git a/dist/index.html b/dist/index.html
@@ -30,7 +30,7 @@
 
     if (getParameterByName('debug')) window.onerror = function (e) { alert(e) }
   </script>
-<script type="text/javascript" src="bundle.47a8fac661c29aaae9cc.js"></script></body>
+<script type="text/javascript" src="bundle.9b5ce89a7682e5a7f878.js"></script></body>
 
 <script>
   function debugLogFn(msg) {

diff --git a/src/app/components/ShoreInputLimitSelector.js b/src/app/components/ShoreInputLimitSelector.js
@@ -29,22 +29,25 @@ class ShoreInputLimitSelector extends Component {
     })
 
     return (
-      <div className="amperage-selector__container">
-        <div className="amperage-selector">
-          {amperageList.map(currentValue => {
-            return (
-              <button
-                className={
-                  "selector-button selector-button__amperage text text--very-large" +
-                  (parseInt(props.currentLimit) == currentValue ? " selector-button--active" : "")
-                }
-                href="#"
-                onClick={() => props.onLimitSelected(currentValue)}
-              >
-                {currentValue}A
-              </button>
-            )
-          })}
+      <div>
+        <div className="amperage-selector__container">
+          <div className="amperage-selector">
+            <div className="text text--large text--center amperage-selector__description">Select shore input limit</div>
+            {amperageList.map(currentValue => {
+              return (
+                <button
+                  className={
+                    "selector-button selector-button__amperage text text--very-large" +
+                    (parseInt(props.currentLimit) == currentValue ? " selector-button--active" : "")
+                  }
+                  href="#"
+                  onClick={() => props.onLimitSelected(currentValue)}
+                >
+                  {currentValue}A
+                </button>
+              )
+            })}
+          </div>
         </div>
       </div>
     )

diff --git a/src/css/styles.scss b/src/css/styles.scss
@@ -16,7 +16,11 @@ body {
   padding: 20px 60px;
 
   @media #{$minimum} {
-    padding: 20px 10px;
+    padding: 20px 30px;
+  }
+
+  @media #{$short} {
+    padding: 10px 20px;
   }
 }
 
@@ -35,6 +39,17 @@ header {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 30px;
+
+  @media #{$minimum} {
+    height: auto;
+    margin-bottom: 15px;
+  }
+
+  @media #{$short} {
+    height: auto;
+    padding: 3px 5px 10px 5px;
+    margin-bottom: 0;
+  }
 }
 
 .logo {
@@ -48,6 +63,11 @@ header {
   @media #{$regular} {
     width: 146px;
   }
+
+  @media #{$minimum} {
+    width: 115px;
+    margin-left: 0;
+  }
 }
 
 .connection {
@@ -69,6 +89,12 @@ header {
     height: 14px;
     width: 15px;
   }
+
+  @media #{$minimum} {
+    height: 12px;
+    width: 12px;
+    margin-right: 5px;
+  }
 }
 
 .metric {
@@ -91,6 +117,16 @@ header {
     height: 80px;
     padding: 17px 35px 17px 35px;
   }
+
+  @media #{$minimum} {
+    margin-bottom: 20px;
+  }
+
+  @media #{$short} {
+    margin-bottom: 10px;
+    height: 70px;
+    padding: 14px 25px 14px 25px;
+  }
 }
 
 .multi-metric-container {
@@ -101,6 +137,10 @@ header {
   @media #{$narrow} {
     flex-direction: column;
   }
+
+  @media #{$short} {
+    flex-direction: row;
+  }
 }
 
 .metric__container {
@@ -109,6 +149,15 @@ header {
     height: 180px;
     align-items: flex-start;
   }
+
+  @media #{$minimum} {
+    height: 140px;
+  }
+
+  @media #{$short} {
+    height: 70px;
+    flex-direction: row;
+  }
 }
 
 .metric--small {
@@ -117,6 +166,10 @@ header {
   @media #{$narrow} {
     width: 100%;
   }
+
+  @media #{$short} {
+    width: calc(50% - 10px);
+  }
 }
 
 .metric__icon {
@@ -131,6 +184,10 @@ header {
   @media #{$very-narrow} {
     height: 60px;
   }
+
+  @media #{$minimum} {
+    height: 40px;
+  }
 }
 
 .metric__value-container {
@@ -140,6 +197,10 @@ header {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  @media #{$minimum} {
+    margin-left: 25px;
+  }
 }
 
 .metric__values {
@@ -178,6 +239,11 @@ header {
   @media #{$regular} {
     padding-left: 15px;
   }
+
+  @media #{$shortAndNarrow} {
+    width: auto;
+    padding-left: 5px;
+  }
 }
 
 .value:not(:last-child) {
@@ -190,6 +256,15 @@ header {
   @media #{$regular} {
     padding-right: 15px;
   }
+
+  @media #{$minimum} {
+    padding-right: 10px;
+  }
+
+  @media #{$short} {
+    width: auto;
+    padding-right: 5px;
+  }
 }
 
 .metrics-selector {
@@ -207,9 +282,13 @@ header {
   }
 
   @media #{$very-narrow} {
-    height: 60px;
+    height: 40px;
     width: 100%;
   }
+
+  @media #{$short} {
+    width: calc(50% - 25px);
+  }
 }
 
 .selector-button {
@@ -257,6 +336,16 @@ header {
     background-position: bottom right;
     background-size: auto 50%;
   }
+
+  @media #{$short} {
+    flex-direction: row;
+  }
+
+  @media #{$shortAndNarrow} {
+    background-image: none;
+    flex-direction: row;
+    height: 70px;
+  }
 }
 
 .metric__battery-level-container {
@@ -279,6 +368,14 @@ header {
   @media #{$regular} {
     width: calc(50% - 37px);
   }
+
+  @media #{$minimum} {
+    height: 40px;
+  }
+
+  @media #{$shortAndNarrow} {
+    width: 25%;
+  }
 }
 
 .text--bottom-align {
@@ -296,6 +393,10 @@ header {
   justify-content: center;
 }
 
+.amperage-selector__description {
+  margin-bottom: 10px;
+}
+
 .amperage-selector {
   padding: 25px;
   border-radius: 16.6px;
@@ -318,7 +419,7 @@ header {
   }
 
   @media screen and (max-width: 620px) {
-    width: 300px;
+    width: 100%;
   }
 }
 
@@ -333,4 +434,10 @@ header {
     min-width: 110px;
     height: 110px;
   }
+
+  @media #{$shortAndNarrow} {
+    max-width: 70px;
+    min-width: 70px;
+    height: 70px;
+  }
 }
diff --git a/src/css/texts.scss b/src/css/texts.scss
@@ -23,6 +23,14 @@
   @media #{$regular} {
     font-size: 16px;
   }
+
+  @media #{$minimum} {
+    font-size: 14px;
+  }
+
+  @media #{$short} {
+    font-size: 12px;
+  }
 }
 
 .text--large {
@@ -49,6 +57,14 @@
   @media #{$regular} {
     font-size: 32px;
   }
+
+  @media #{$minimum} {
+    font-size: 28px;
+  }
+
+  @media #{$short} {
+    font-size: 28px;
+  }
 }
 
 .text--small {
@@ -61,6 +77,10 @@
   @media #{$regular} {
     font-size: 15px;
   }
+
+  @media #{$short} {
+    font-size: 11px;
+  }
 }
 
 .text--very-small {
@@ -73,12 +93,21 @@
   @media #{$regular} {
     font-size: 12px;
   }
+
+  @media #{$minimum} {
+    font-size: 10px;
+  }
 }
 
 .text--medium {
   font-weight: 500;
+  text-transform: uppercase;
 }
 
 .text--bold {
   font-weight: 700;
 }
+
+.text--center {
+  text-align: center;
+}
diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -5,3 +5,7 @@ $regular: "all and (max-width: 1279px)";
 $narrow: "all and (max-width: 1023px)";
 $very-narrow: "all and (max-width: 800px)";
 $minimum: "all and (max-width: 600px)";
+
+$short: "all and (max-height: 500px)";
+
+$shortAndNarrow: "all and (max-height: 500px) and (max-width: 600px)"