Battery page mobile formatting

This commit is contained in:
Zakary Timson 2018-11-15 13:40:53 -05:00
parent 070eeae55e
commit 5a1d71758b
2 changed files with 7 additions and 5 deletions

View File

@ -12,7 +12,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="dashboard" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">insert_chart</mat-icon> Dashboard</span></a> <a mat-list-item routerLink="dashboard" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">insert_chart</mat-icon> Dashboard</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="battery" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">{{batteryService.icon}}</mat-icon> Power Wall</span></a> <a mat-list-item routerLink="battery" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">{{batteryService.icon}}</mat-icon> Powerwall</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><i [class]="'mr-2 scale-150 wi wi-fw ' + weatherService.icon"></i> Weather</span></a> <a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><i [class]="'mr-2 scale-150 wi wi-fw ' + weatherService.icon"></i> Weather</span></a>
<mat-divider></mat-divider> <mat-divider></mat-divider>

View File

@ -1,9 +1,10 @@
<h1>POWER WALL: <h1>Powerwall:
<span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span> <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
<span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span> <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
</h1> </h1>
<div class="d-flex flex-column flex-md-row mb-3"> <div class="d-flex flex-column flex-md-row" style="min-height: 400px">
<div class="flex-grow-1 flex-basis-0" style="overflow: hidden; height: 400px"> <div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px">
<h5 class="pl-2">Charge</h5>
<ngx-charts-bar-vertical #chart1 <ngx-charts-bar-vertical #chart1
[results]="batteryService.percentageData" [results]="batteryService.percentageData"
[scheme]="airScheme" [scheme]="airScheme"
@ -13,7 +14,8 @@
[yScaleMax]="100" [yScaleMax]="100"
></ngx-charts-bar-vertical> ></ngx-charts-bar-vertical>
</div> </div>
<div class="flex-grow-1 flex-basis-0" style="overflow: hidden; height: 400px"> <div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px">
<h5 class="pl-2">Temperature</h5>
<ngx-charts-bar-vertical #chart2 <ngx-charts-bar-vertical #chart2
[results]="batteryService.temperatureData" [results]="batteryService.temperatureData"
[scheme]="fireScheme" [scheme]="fireScheme"