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

Some bitchin animations

Browse Source
This commit is contained in:
Zakary Timson
2018-11-14 19:04:43 -05:00
parent 44fc493f37
commit 1bf46d16c8
11 changed files with 102 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/weather/weather.component.html
View File

@ -1,5 +1,5 @@
<div>
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center" style="flex-grow: 1;">
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center flex-grow-1">
<i [class]="'wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
<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>
@ -7,19 +7,19 @@
</div>
</div>
<div class="my-4 d-flex mx-auto" style="max-width: 450px">
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-humidity"></i> {{weatherService.humidity}} %
</div>
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
</div>
<div class="text-center" style="flex-grow: 1">
<div class="text-center flex-grow-1">
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
</div>
</div>
<mat-divider></mat-divider>
<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 flex-grow-1" style="max-width: 75px;">
{{w.day}}
<i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
{{w.temp}} °C