From 67c7ee2156bc201ac2078c9670bf1f56138ad267 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Tue, 1 Jan 2019 21:23:00 -0500
Subject: [PATCH] Added fixed size to make animations smooth on desktop

---
 src/app/battery/battery.component.html     | 88 +++++++++++-----------
 src/app/dashboard/dashboard.component.html | 36 ++++-----
 2 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html
index 99a2fec..025fadc 100644
--- a/src/app/battery/battery.component.html
+++ b/src/app/battery/battery.component.html
@@ -1,49 +1,51 @@
 <div class="desktop-height p-3" style="background-color: #b52e3c !important;">
-    <div class="d-flex mb-3">
-        <div class="d-flex flex-grow-1 align-items-center">
-            <h3 class="mb-0 text-white">Powerwall: {{batteryService.charge | round}} V</h3>
-        </div>
-        <div class="d-flex flex-grow-1 align-content-center justify-content-end">
-            <mat-button-toggle-group [(ngModel)]="batteryService.relayMode" (change)="batteryService.setRelayMode($event.value)">
-                <mat-button-toggle [value]="null" checked>Auto</mat-button-toggle>
-                <mat-button-toggle [value]="true">On</mat-button-toggle>
-                <mat-button-toggle [value]="false">Off</mat-button-toggle>
-            </mat-button-toggle-group>
-        </div>
-    </div>
-    <mat-card class="mb-2" *ngFor="let battery of batteryService.batteries; let i = index">
-        <div class="d-flex">
+    <div style="max-width: 1000px;">
+        <div class="d-flex mb-3">
             <div class="d-flex flex-grow-1 align-items-center">
-                <h5 class="mb-0">{{battery.name}}</h5>
+                <h3 class="mb-0 text-white">Powerwall: {{batteryService.charge | round}} V</h3>
             </div>
-            <div class="d-flex flex-grow-1 align-items-center justify-content-center">
-                <button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | round: 1}} V</button>
-            </div>
-            <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
-                <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button>
+            <div class="d-flex flex-grow-1 align-content-center justify-content-end">
+                <mat-button-toggle-group [(ngModel)]="batteryService.relayMode" (change)="batteryService.setRelayMode($event.value)">
+                    <mat-button-toggle [value]="null" checked>Auto</mat-button-toggle>
+                    <mat-button-toggle [value]="true">On</mat-button-toggle>
+                    <mat-button-toggle [value]="false">Off</mat-button-toggle>
+                </mat-button-toggle-group>
             </div>
         </div>
-        <div *ngIf="selected == i" class="w-100" style="height: 200px">
-            <ngx-charts-area-chart class="w-100 h-100"
-                                   [results]="[{name: battery.name, series: battery.chargeHistory}]"
-                                   [scheme]="scheme"
-                                   [yAxis]="true"
-                                   [yScaleMin]="0"
-                                   [yScaleMax]="25"
-                                   [yAxisTickFormatting]="voltFormat"
-                                   [roundDomains]="true"
-            ></ngx-charts-area-chart>
-        </div>
-        <div *ngIf="selected == batteryService.batteries.length + i" class="w-100" style="height: 200px">
-            <ngx-charts-area-chart class="w-100 h-100"
-                                   [results]="[{name: battery.name, series: battery.tempHistory}]"
-                                   [scheme]="scheme"
-                                   [yAxis]="true"
-                                   [yScaleMin]="0"
-                                   [yScaleMax]="50"
-                                   [yAxisTickFormatting]="tempFormat"
-                                   [roundDomains]="true"
-            ></ngx-charts-area-chart>
-        </div>
-    </mat-card>
+        <mat-card class="mb-2" *ngFor="let battery of batteryService.batteries; let i = index">
+            <div class="d-flex">
+                <div class="d-flex flex-grow-1 align-items-center">
+                    <h5 class="mb-0">{{battery.name}}</h5>
+                </div>
+                <div class="d-flex flex-grow-1 align-items-center justify-content-center">
+                    <button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | round: 1}} V</button>
+                </div>
+                <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
+                    <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | round}} °C</button>
+                </div>
+            </div>
+            <div *ngIf="selected == i" class="w-100" style="height: 200px">
+                <ngx-charts-area-chart class="w-100 h-100"
+                                       [results]="[{name: battery.name, series: battery.chargeHistory}]"
+                                       [scheme]="scheme"
+                                       [yAxis]="true"
+                                       [yScaleMin]="0"
+                                       [yScaleMax]="25"
+                                       [yAxisTickFormatting]="voltFormat"
+                                       [roundDomains]="true"
+                ></ngx-charts-area-chart>
+            </div>
+            <div *ngIf="selected == batteryService.batteries.length + i" class="w-100" style="height: 200px">
+                <ngx-charts-area-chart class="w-100 h-100"
+                                       [results]="[{name: battery.name, series: battery.tempHistory}]"
+                                       [scheme]="scheme"
+                                       [yAxis]="true"
+                                       [yScaleMin]="0"
+                                       [yScaleMax]="50"
+                                       [yAxisTickFormatting]="tempFormat"
+                                       [roundDomains]="true"
+                ></ngx-charts-area-chart>
+            </div>
+        </mat-card>
+    </div>
 </div>
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index fe38f70..397b2ac 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,22 +1,24 @@
 <div class="desktop-height p-3">
-    <div>
-        <h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
-        <h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
-    </div>
-    <div class="mt-3 d-flex">
-        <div class="flex-grow-1 pr-2">
-            <mat-card class="w-100 hover" routerLink="/weather">
-                <mat-card-content>
-                    <weather-widget class="mx-auto"></weather-widget>
-                </mat-card-content>
-            </mat-card>
+    <div style="max-width: 1000px;">
+        <div>
+            <h1 class="d-inline">{{now | async | date: 'fullDate'}}</h1>
+            <h1 class="d-inline float-right">{{now | async | date: 'mediumTime'}}</h1>
         </div>
-        <div class="flex-grow-1 pl-2">
-            <mat-card class="w-100 hover" routerLink="/battery">
-                <mat-card-content>
-                    <battery-widget></battery-widget>
-                </mat-card-content>
-            </mat-card>
+        <div class="mt-3 d-flex">
+            <div class="flex-grow-1 pr-2">
+                <mat-card class="w-100 hover" routerLink="/weather">
+                    <mat-card-content>
+                        <weather-widget class="mx-auto"></weather-widget>
+                    </mat-card-content>
+                </mat-card>
+            </div>
+            <div class="flex-grow-1 pl-2">
+                <mat-card class="w-100 hover" routerLink="/battery">
+                    <mat-card-content>
+                        <battery-widget></battery-widget>
+                    </mat-card-content>
+                </mat-card>
+            </div>
         </div>
     </div>
 </div>