#212 - fixed zoom-in issues, completed header bar

angular-client/src/pages/landing-page/components/landing-page-header/landing-page-header.component.html

@@ -1,12 +1,7 @@
-<hstack style="width: 100%">
-  <hstack style="width: 33%; height: 145px">
-    <typography variant="xx-large-title" [content]="time | date: 'HH:mm:ss'" additionalStyles="font-size: 120px;" />
-  </hstack>
-
-  <hstack style="width: 66%">
-    <landing-page-date-location style="height: 95px; width: 25%" />
-    <landing-page-connection-display style="height: 95px; width: 25%" />
-    <landing-page-current-run-display style="height: 95px; width: 25%" />
-    <landing-page-viewer-display style="height: 95px; width: 25%" />
-  </hstack>
+<hstack style="width: 100">
+  <typography variant="xx-large-title" [content]="time | date: 'HH:mm:ss'" additionalStyles="width: 36%" />
+  <landing-page-date-location style="height: 95px; width: 16%" />
+  <landing-page-connection-display style="height: 95px; width: 16%" />
+  <landing-page-current-run-display style="height: 95px; width: 16%" />
+  <landing-page-viewer-display style="height: 95px; width: 16%" />
 </hstack>

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

@@ -4,16 +4,17 @@
   <landing-page-mobile style="width: 100%" *ngIf="isMobile; else isDesktop" [time]="time" />
   <ng-template #isDesktop>
     <vstack style="width: 100%" spacing="40px">
-      <vstack style="width: 100%" spacing="10px">
-        <landing-page-header style="width: 100%; padding-top: 40px" />
+      <vstack style="width: 100%" spacing="20px">
+        <hstack style="width: 100%">
+          <landing-page-header style="width: 100%; padding-top: 40px" />
+        </hstack>
       </vstack>
 
       <vstack style="width: 100%" spacing="20px">
         <hstack style="width: 100%">
-          <driver-component style="height: 200px; width: 100%" />
-          <viewer-display style="height: 200px; width: 33%" />
-          <torque-display style="height: 200px; width: 33%" />
-          <connection-display style="height: 200px; width: 33%" />
+          <driver-component style="height: 200px; width: 33%" />
+          <torque-display style="height: 200px; width: 17%" />
+          <motor-info style="height: 200px; width: 50%" />
         </hstack>
       </vstack>
 
@@ -23,20 +24,20 @@
           <acceleration-over-time-display style="width: 100%" />
         </vstack>
 
-        <acceleration-graphs style="width: 60%; height: 550px" />
+        <acceleration-graphs style="width: 50%; height: 550px" />
       </hstack>
 
       <hstack style="width: 100%">
-        <map-info-display style="width: 50%" />
-
-        <vstack style="width: 50%">
-          <motor-info style="width: 100%; height: 250px"> </motor-info>
-        </vstack>
+        <raspberry-pi style="width: 86%" />
+        <brake-pressure-display style="height: 180px; width: 14%" />
       </hstack>
 
       <hstack style="width: 100%">
-        <raspberry-pi style="width: 80%" />
-        <brake-pressure-display style="height: 180px; width: 20%" />
+        <map-info-display style="width: 100%" />
+
+        <!-- <vstack style="width: 50%">
+          <motor-info style="width: 100%; height: 250px"> </motor-info>
+        </vstack> -->
       </hstack>
     </vstack>
   </ng-template>