From 6d6fe18465e8d9b9c9a49a0aea5f92580bfcec59 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Thu, 15 Nov 2018 13:00:00 -0500
Subject: [PATCH] More battery page styling

---
 src/app/battery/battery.component.html | 8 ++++----
 src/styles.scss                        | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html
index 9d58502..e80e31c 100644
--- a/src/app/battery/battery.component.html
+++ b/src/app/battery/battery.component.html
@@ -1,8 +1,9 @@
+<div class="nav-fix"></div>
 <h1>POWER WALL:
     <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
     <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
 </h1>
-<div class="d-flex flex-column flex-md-row">
+<div class="d-flex flex-column flex-md-row mb-3">
     <div style="overflow: auto">
         <ngx-charts-bar-vertical
             [results]="batteryService.percentageData"
@@ -27,9 +28,8 @@
         ></ngx-charts-bar-vertical>
     </div>
 </div>
-<mat-card *ngFor="let b of batteryService.batteries" class="mt-3">
-    {{b.name}}
-    <br>
+<mat-card *ngFor="let b of batteryService.batteries" class="mb-3">
+    <h3>{{b.name}}</h3>
     {{b.history[0].percentage * 100}}%
     <br>
     {{b.history[0].temp}} °C
diff --git a/src/styles.scss b/src/styles.scss
index 946a9e6..e4b9573 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -35,6 +35,11 @@ html, body {
     }
 }
 
+.nav-fix {
+    width: 100%;
+    height: 64px;
+}
+
 .center {
     position: fixed;
     left: 50%;