Merge branch '#172-charging-screen-improvements' into 178-build

Northeastern-Electric-Racing · Sep 16, 2024 · 7f32b4a · 7f32b4a
2 parents 1b24395 + 5cc5fc3
commit 7f32b4a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 29 deletions.
diff --git a/angular-client/src/pages/charging-page/charging-page.component.html b/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,19 +17,19 @@
         />
         <latency-display style="margin-bottom: -30px; margin-top: -10px" />
       </div>
-      <vstack>
-        <hstack spacing="10px">
-          <combined-status-display style="width: 625px; height: 380px" />
-          <vstack>
-            <state-of-charge-display style="width: 230px; height: 123px" />
-            <current-display style="width: 230px; height: 122px" />
-            <pack-temp style="width: 230px; height: 122px" />
+      <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: 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; width: 520px" />
+          <fault-display style="height: 380px; min-width: 500px; width: 40%" />
         </hstack>
-        <cell-temp-display style="width: 1400px; height: 175px" />
-        <high-low-cell-display style="width: 1400px; height: 175px" />
-        <pack-voltage-display style="height: 175px; width: 100%" />
+        <cell-temp-display style="min-width: 1300px; width: 100%; height: 175px" />
+        <high-low-cell-display style="min-width: 1300px; width: 100%; height: 175px" />
+        <pack-voltage-display style="min-width: 1300px; width: 100%; height: 175px" />
       </vstack>
     </vstack>
   </ng-template>

diff --git a/...s/charging-page/components/combined-status-display/combined-status-display.component.html b/...s/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>
-        <active-status />
-        <faulted-status />
-      </vstack>
-      <divider style="height: 300px" />
-      <vstack>
-        <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>
diff --git a/...-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html b/...-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html
@@ -5,7 +5,7 @@
         <typography
           variant="info-value"
           [content]="delta.toFixed(3) + 'V'"
-          additionalStyles="fontSize:40px"
+          additionalStyles="fontSize:30px"
           *ngIf="isDesktop"
         />
         <typography
@@ -25,7 +25,7 @@
       <typography
         variant="info-value"
         [content]="lowCellVoltage.toFixed(3) + 'V'"
-        additionalStyles="fontSize:40px"
+        additionalStyles="fontSize:30px"
         *ngIf="isDesktop"
       />
       <typography
@@ -45,7 +45,7 @@
         <typography
           variant="info-value"
           [content]="highCellVoltage.toFixed(3) + 'V'"
-          additionalStyles="fontSize:40px"
+          additionalStyles="fontSize:30px"
           *ngIf="isDesktop"
         />
         <typography
@@ -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>
diff --git a/...ing-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html b/...ing-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>