ztimson/homefront
ztimson/homefront
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Fixed styling on both desktop and mobile

Browse Source
This commit is contained in:
Zakary Timson 2018-11-15 13:56:45 -05:00
parent 5a1d71758b
commit 647aa39085
4 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -6,7 +6,7 @@
<small class="text-muted ml-2">v{{environment.version}}</small> <small class="text-muted ml-2">v{{environment.version}}</small>
</span> </span>
</mat-toolbar> </mat-toolbar>
<mat-drawer-container [hasBackdrop]="false" style="height: calc(100vh - 64px)"> <mat-drawer-container [hasBackdrop]="false" [ngClass]="{'mobile-height': mobile, 'desktop-height': !mobile}">
<mat-drawer class="bg-primary" [mode]="mobile ? 'push' : 'side'" [opened]="open" [disableClose]="!mobile" [autoFocus]="false"> <mat-drawer class="bg-primary" [mode]="mobile ? 'push' : 'side'" [opened]="open" [disableClose]="!mobile" [autoFocus]="false">
<mat-nav-list class="p-0"> <mat-nav-list class="p-0">
<mat-divider></mat-divider> <mat-divider></mat-divider>

30
src/app/battery/battery.component.html
View File

@ -4,26 +4,26 @@
</h1> </h1>
<div class="d-flex flex-column flex-md-row" style="min-height: 400px"> <div class="d-flex flex-column flex-md-row" style="min-height: 400px">
<div class="flex-grow-1 flex-basis-0 mb-3" 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"
[xAxis]="true" [xAxis]="true"
[yAxis]="true" [yAxis]="true"
[yScaleMin]="0" [yScaleMin]="0"
[yScaleMax]="100" [yScaleMax]="100"
></ngx-charts-bar-vertical> ></ngx-charts-bar-vertical>
</div> </div>
<div class="flex-grow-1 flex-basis-0 mb-3" 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"
schemeType="linear" schemeType="linear"
[xAxis]="true" [xAxis]="true"
[yAxis]="true" [yAxis]="true"
[yScaleMin]="0" [yScaleMin]="0"
[yScaleMax]="100" [yScaleMax]="100"
legendTitle="Temperature"
[legend]="!app.mobile"
></ngx-charts-bar-vertical> ></ngx-charts-bar-vertical>
</div> </div>
</div> </div>

5
src/app/battery/battery.component.ts
View File

@ -1,6 +1,7 @@
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import {BatteryService} from './battery.service'; import {BatteryService} from './battery.service';
import {BarVerticalComponent} from '@swimlane/ngx-charts/release/bar-chart'; import {BarVerticalComponent} from '@swimlane/ngx-charts/release/bar-chart';
import {AppComponent} from '../app.component';
@Component({ @Component({
selector: 'app-batterys', selector: 'app-batterys',
@ -19,12 +20,12 @@ export class BatteryComponent implements OnInit {
fireScheme = { fireScheme = {
name: 'flame', name: 'flame',
selectable: false, selectable: true,
group: 'Continuous', group: 'Continuous',
domain: ['#00deff', '#3db0ff', '#a274d7', '#c42576', '#9f0000'] domain: ['#00deff', '#3db0ff', '#a274d7', '#c42576', '#9f0000']
}; };
constructor(public batteryService: BatteryService) { } constructor(public app: AppComponent, public batteryService: BatteryService) { }
ngOnInit() { ngOnInit() {
setTimeout(() => { setTimeout(() => {

8
src/styles.scss
View File

@ -35,6 +35,14 @@ html, body {
} }
} }
.mobile-height{
height: calc(100vh - 56px);
}
.desktop-height{
height: calc(100vh - 64px);
}
.center { .center {
position: fixed; position: fixed;
left: 50%; left: 50%;