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

Centered weather info

Browse Source
This commit is contained in:
Zakary Timson 2019-01-01 20:52:01 -05:00
parent 02807cb59a
commit 4c86ac4d59
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Forecast --> <!-- Forecast -->
<mat-card class="m-3" style="max-width: 450px"> <mat-card class="m-3 mx-auto" style="max-width: 450px">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div *ngFor="let day of weatherService.weather?.daily.data.slice(1, 7)" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;"> <div *ngFor="let day of weatherService.weather?.daily.data.slice(1, 7)" class="d-flex flex-column align-items-center flex-grow-1" style="max-width: 75px;">
{{day.time.toString().slice(0, 4).toUpperCase()}} {{day.time.toString().slice(0, 4).toUpperCase()}}
@ -46,7 +46,7 @@
</div> </div>
</mat-card> </mat-card>
<!-- Sunlight --> <!-- Sunlight -->
<mat-card class="m-3" style="max-width: 450px"> <mat-card class="m-3 mx-auto" style="max-width: 450px">
<h5>Sunlight</h5> <h5>Sunlight</h5>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="d-flex align-items-center flex-grow-1"> <div class="d-flex align-items-center flex-grow-1">
@ -62,7 +62,7 @@
<canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas> <canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
</mat-card> </mat-card>
<!-- Wind --> <!-- Wind -->
<mat-card class="m-3" style="max-width: 450px"> <mat-card class="m-3 mx-auto" style="max-width: 450px">
<h5>Wind</h5> <h5>Wind</h5>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="d-flex align-items-center flex-grow-1"> <div class="d-flex align-items-center flex-grow-1">
@ -81,7 +81,7 @@
</div> </div>
</mat-card> </mat-card>
<!-- Atmospheric --> <!-- Atmospheric -->
<mat-card class="m-3" style="max-width: 450px"> <mat-card class="m-3 mx-auto" style="max-width: 450px">
<h5>Atmospheric</h5> <h5>Atmospheric</h5>
<div class="d-flex"> <div class="d-flex">
<div class="flex-grow-1"> <div class="flex-grow-1">