Fixed drawer

This commit is contained in:
Zakary Timson 2018-11-14 13:28:10 -05:00
parent 731466077b
commit f066843b9c
2 changed files with 29 additions and 27 deletions

View File

@ -20,12 +20,12 @@ export class AppComponent {
constructor(public batteryService: BatteryService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) { constructor(public batteryService: BatteryService, router: Router, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
this.hide = !!route.root.firstChild.snapshot.data.hide; this.hide = !!route.root.firstChild.snapshot.data.hide;
if(this.hide) this.open = false; this.open = !this.hide && !this.mobile;
}); });
breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => { breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
this.mobile = result.matches; this.mobile = result.matches;
this.open = !this.hide && !this.mobile; this.open = !this.mobile;
}) })
} }
} }

View File

@ -1,11 +1,12 @@
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;"> <div>
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
<i [class]="'wi wi-fw wi-' + weatherService.icon" style="font-size: 6rem"></i> <i [class]="'wi wi-fw wi-' + weatherService.icon" style="font-size: 6rem"></i>
<div class="ml-0 ml-md-3"> <div class="ml-0 ml-md-3">
<h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1> <h1 class="my-4 my-md-0 font-weight-bold text-center text-md-left">{{weatherService.temp}} °C</h1>
<h3 class="m-0">{{weatherService.weather}}</h3> <h3 class="m-0">{{weatherService.weather}}</h3>
</div> </div>
</div> </div>
<div class="my-4 d-flex mx-auto" style="max-width: 450px"> <div class="my-4 d-flex mx-auto" style="max-width: 450px">
<div class="text-center" style="flex-grow: 1"> <div class="text-center" style="flex-grow: 1">
<i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} % <i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
</div> </div>
@ -15,13 +16,14 @@
<div class="text-center" style="flex-grow: 1"> <div class="text-center" style="flex-grow: 1">
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H <i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
</div> </div>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
<div class="my-4 d-flex justify-content-center"> <div class="my-4 d-flex justify-content-center">
<div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1"> <div *ngFor="let w of weatherService.forecast" class="d-flex flex-column align-items-center" style="max-width: 75px; flex-grow: 1">
{{w.day}} {{w.day}}
<i [class]="'my-2 wi wi-fw wi-' + w.icon" style="font-size: 2rem"></i> <i [class]="'my-2 wi wi-fw wi-' + w.icon" style="font-size: 2rem"></i>
{{w.temp}} °C {{w.temp}} °C
</div> </div>
</div>
<mat-divider></mat-divider>
</div> </div>
<mat-divider></mat-divider>