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)
{
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
.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();
<div class="row day-summary">
@ -31,9 +41,8 @@
@foreach (var hourForecast in hourForecasts)
{
<div class="row day-detail">
<div class="col">@hourForecast.Time</div>
<div class="col">@hourForecast.ConditionName</div>
<div class="col">@hourForecast.Temperature</div>
<div class="col">@hourForecast.TimeOfDay</div>
<div class="col">@hourForecast.Forecast.ConditionName / @hourForecast.Forecast.Temperature</div>
</div>
}
}

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

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