From 9e768e80ef66e63fbe694b10a3bff9cc07ad91d9 Mon Sep 17 00:00:00 2001
From: Ryan <ryan@binarydad.com>
Date: Sat, 18 Mar 2023 13:30:55 -0400
Subject: [PATCH] style changes to hourly forecast

---
 WeatherDashboard.Web/Views/Home/Index.cshtml | 19 ++++++++++++++-----
 WeatherDashboard.Web/wwwroot/css/site.css    |  9 +++++++++
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/WeatherDashboard.Web/Views/Home/Index.cshtml b/WeatherDashboard.Web/Views/Home/Index.cshtml
index 468d741..874a314 100644
--- a/WeatherDashboard.Web/Views/Home/Index.cshtml
+++ b/WeatherDashboard.Web/Views/Home/Index.cshtml
@@ -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>
         }
     }
diff --git a/WeatherDashboard.Web/wwwroot/css/site.css b/WeatherDashboard.Web/wwwroot/css/site.css
index 5540922..f553354 100644
--- a/WeatherDashboard.Web/wwwroot/css/site.css
+++ b/WeatherDashboard.Web/wwwroot/css/site.css
@@ -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;
+        }