ryan/WeatherDashboard
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

style changes to hourly forecast

Browse Source
This commit is contained in:
Ryan Peters 2023-03-18 13:30:55 -04:00
parent 9add92c170
commit 9e768e80ef
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
WeatherDashboard.Web/Views/Home/Index.cshtml
View File

@ -17,10 +17,20 @@
@foreach (var forecast in Model.Forecast) @foreach (var forecast in Model.Forecast)
{ {
var displayHours = new[] { 6, 11, 15, 22 }; var displayHours = new Dictionary<int, string>
{
[6] = "Morning",
[12] = "Noon",
[17] = "Evening",
[22] = "Night"
};
var hourForecasts = forecast.HourForecasts var hourForecasts = forecast.HourForecasts
.Where(f => displayHours.Contains(f.Time.Value.Hour)) .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new
{
TimeOfDay = d.Value,
Forecast = f
})
.ToList(); .ToList();
<div class="row day-summary"> <div class="row day-summary">
@ -31,9 +41,8 @@
@foreach (var hourForecast in hourForecasts) @foreach (var hourForecast in hourForecasts)
{ {
<div class="row day-detail"> <div class="row day-detail">
<div class="col">@hourForecast.Time</div> <div class="col">@hourForecast.TimeOfDay</div>
<div class="col">@hourForecast.ConditionName</div> <div class="col">@hourForecast.Forecast.ConditionName / @hourForecast.Forecast.Temperature</div>
<div class="col">@hourForecast.Temperature</div>
</div> </div>
} }
} }

9
WeatherDashboard.Web/wwwroot/css/site.css
View File

@ -47,7 +47,16 @@ body {
font-size: 30px; font-size: 30px;
} }
.detailed-conditions .day-summary .col:last-of-type {
text-align: right;
}
.detailed-conditions .day-detail { .detailed-conditions .day-detail {
font-size: 13px; font-size: 13px;
opacity: 0.5; opacity: 0.5;
} }
.detailed-conditions .day-detail .col:last-of-type {
text-align: right;
font-weight: bold;
}