#172 - whole page now responsive

angular-client/src/pages/charging-page/charging-page.component.html

@@ -3,7 +3,7 @@
 
   <charging-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
   <ng-template #isDesktop>
-    <vstack style="width: 100%" spacing="15px">
+    <vstack style="width: 100%; min-width: 1290px" spacing="15px">
       <div style="align-self: end; width: 100%; display: flex; justify-content: space-around">
         <typography
           style="margin-bottom: -30px; margin-top: -10px"
@@ -17,15 +17,15 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-      <vstack style="width: 100%">
-        <hstack spacing="10px" style="width: 100%">
-          <combined-status-display style="width: 45%; height: 380px" />
+      <vstack style="width: 100%; min-width: 1290px">
+        <hstack spacing="10px" style="width: 100%; height: 50%">
+          <combined-status-display style="min-width: 620px; width: 45%; height: 380px" />
           <vstack style="width: 15%">
-            <state-of-charge-display style="min-width: 230px; height: 123px" />
-            <current-display style="min-width: 230px; height: 122px" />
-            <pack-temp style="min-width: 230px; height: 122px" />
+            <state-of-charge-display style="min-width: 200px; width: 100%; height: 123px" />
+            <current-display style="min-width: 200px; width: 100%; height: 122px" />
+            <pack-temp style="min-width: 200px; width: 100%; height: 122px" />
           </vstack>
-          <fault-display style="height: 380px; min-width: 520px; width: 40%" />
+          <fault-display style="height: 380px; min-width: 500px; width: 40%" />
         </hstack>
         <cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
         <high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />

angular-client/src/pages/charging-page/components/combined-status-display/combined-status-display.component.html

@@ -1,15 +1,13 @@
 <info-background svgIcon="quickreply" title="Status">
-  <div style="display: flex; justify-content: left; align-items: flex-start; height: 80%">
-    <hstack>
-      <vstack style="width: 45%">
-        <active-status />
-        <faulted-status />
-      </vstack>
-      <divider style="height: 300px" />
-      <vstack style="width: 45%">
-        <charging-status />
-        <balancing-status />
-      </vstack>
-    </hstack>
+  <div style="display: flex; justify-content: space-between; align-items: flex-start; height: 80%">
+    <vstack style="width: 45%">
+      <active-status />
+      <faulted-status />
+    </vstack>
+    <divider style="height: 300px" />
+    <vstack style="width: 45%">
+      <charging-status />
+      <balancing-status />
+    </vstack>
   </div>
 </info-background>

angular-client/src/pages/charging-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html

@@ -59,7 +59,7 @@
     </vstack>
 
     <!--On desktop view we don't want the graph component to be in a horizontal stack-->
-    <high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
+    <high-low-cell-graph style="width: 75%; padding-bottom: 35px" [resetGraph]="resetGraph" *ngIf="isDesktop">
     </high-low-cell-graph>
   </hstack>
 </info-background>

angular-client/src/pages/charging-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html

@@ -4,7 +4,7 @@
       <typography variant="info-value" [content]="voltage.toString() + 'V'" />
     </hstack>
     <pack-voltage-graph
-      style="width: 80%; padding-bottom: 5vh"
+      style="width: 80%; padding-bottom: 30px"
       [resetGraph]="resetGraph"
       *ngIf="isDesktop"
     ></pack-voltage-graph>