New weather layout
This commit is contained in:
@@ -1,30 +1,111 @@
|
||||
<div>
|
||||
<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>
|
||||
<h3 class="m-0">{{weatherService.weather}}</h3>
|
||||
<div class="w-100 p-3 pt-5" [style.backgroundColor]="day ? '#88aaff' : '#000e31'">
|
||||
<!-- Current Weather -->
|
||||
<div class="d-flex flex-column align-items-center">
|
||||
<div>
|
||||
<h3>{{weatherService.weather?.currently.summary}}</h3>
|
||||
</div>
|
||||
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
|
||||
<div class="p-3 text-center">
|
||||
<i [class]="'mt-4 wi wi-fw ' + weatherService.icon" style="font-size: 6rem"></i>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex flex-column mr-3">
|
||||
<div>
|
||||
<h1 class="mb-0">{{weatherService.weather?.currently.temperature | round: 1}} °C</h1>
|
||||
</div>
|
||||
<div>
|
||||
Feels Like: {{weatherService.weather?.currently.apparentTemperature | round}} °C
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<div>
|
||||
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_upward</mat-icon>
|
||||
{{weatherService.weather?.daily.data[0].temperatureHigh | round}} °C
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon style="font-size: 18px; width: 18px; height: 18px">arrow_downward</mat-icon>
|
||||
{{weatherService.weather?.daily.data[0].temperatureLow | round}} °C
|
||||
</div>
|
||||
<div>
|
||||
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 d-flex mx-auto" style="max-width: 450px">
|
||||
<div class="text-center flex-grow-1">
|
||||
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.pop}} mm
|
||||
<!-- Forecast -->
|
||||
<mat-card class="m-3" style="max-width: 450px">
|
||||
<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;">
|
||||
{{day.time.toString().slice(0, 4).toUpperCase()}}
|
||||
<i [class]="'my-2 wi wi-fw ' + day.icon" style="font-size: 2rem"></i>
|
||||
<div class="text-center">{{day.temperatureHigh | round}} °C</div>
|
||||
<div class="text-center text-muted">{{day.temperatureLow | round}} °C</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex-grow-1">
|
||||
<i class="wi wi-fw wi-cloud"></i> {{weatherService.cloudCover}} %
|
||||
</mat-card>
|
||||
<!-- Sunlight -->
|
||||
<mat-card class="m-3" style="max-width: 450px">
|
||||
<h5>Sunlight</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<i class="wi wi-sunrise mr-1"></i> {{weatherService.weather?.daily.data[0].sunriseTime | date: 'shortTime'}}
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center flex-grow-1">
|
||||
<i class="wi wi-fw wi-cloud mr-1"></i> {{weatherService.weather?.currently.cloudCover * 100 | round}}%
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end flex-grow-1">
|
||||
<i class="wi wi-sunset mr-1"></i> {{weatherService.weather?.daily.data[0].sunsetTime | date: 'shortTime'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex-grow-1">
|
||||
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.wind[1]}} KM/H
|
||||
<canvas id="myCanvas" class="mt-3" style="width: 100%" height="150"></canvas>
|
||||
</mat-card>
|
||||
<!-- Wind -->
|
||||
<mat-card class="m-3" style="max-width: 450px">
|
||||
<h5>Wind</h5>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="d-flex align-items-center flex-grow-1">
|
||||
<i class="wi wi-fw wi-windy"></i> {{weatherService.weather?.currently.windSpeed | round}} km/h
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center flex-grow-1">
|
||||
{{weatherService.weather?.currently.windBearing}}°
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end flex-grow-1">
|
||||
<i class="wi wi-fw wi-strong-wind"></i> {{weatherService.weather?.currently.windGust | round}} km/h
|
||||
</div>
|
||||
</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 flex-grow-1" style="max-width: 75px;">
|
||||
{{w.day}}
|
||||
<i [class]="'my-2 wi wi-fw ' + w.icon" style="font-size: 2rem"></i>
|
||||
<div class="text-center">{{w.max}} °C</div>
|
||||
<div class="text-center text-muted">{{w.min}} °C</div>
|
||||
<div class="p-3 text-center">
|
||||
<i class="wi wi-wind wi-fw wi-towards-0" [style.transform]="'rotate(' + weatherService.weather?.currently.windBearing + 'deg)'" style="color: #5d8cff; font-size: 14rem; height: 14rem; width: 14rem"></i>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
</mat-card>
|
||||
<!-- Atmospheric -->
|
||||
<mat-card class="m-3" style="max-width: 450px">
|
||||
<h5>Atmospheric</h5>
|
||||
<div class="d-flex">
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<i class="wi wi-fw wi-barometer"></i> {{weatherService.weather?.currently.pressure / 10 | round: 1}} kPa
|
||||
</div>
|
||||
<div>
|
||||
<i class="wi wi-fw wi-hot"></i> UV Index: {{weatherService.weather?.currently.uvIndex}}
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon>remove_red_eye</mat-icon> {{weatherService.weather?.currently.visibility | round}} km
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div>
|
||||
<i class="wi wi-fw wi-humidity"></i> {{weatherService.weather?.currently.humidity * 100 | round}}% Humidity
|
||||
</div>
|
||||
<div>
|
||||
<i class="wi wi-fw wi-umbrella"></i> {{weatherService.weather?.daily.data[0].precipProbability * 100 | round}}%
|
||||
</div>
|
||||
<div>
|
||||
<i class="wi wi-fw wi-flood"></i> {{weatherService.weather?.daily.data[0].precipAccumulation | round: 1}} cm {{weatherService.weather?.daily.data[0].precipType}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user