From 70c0fc6646820ad8670c688579a0b43d88b624f6 Mon Sep 17 00:00:00 2001
From: Ryan Peters <ryanpeters@microsoft.com>
Date: Mon, 20 Mar 2023 10:15:24 -0400
Subject: [PATCH] lots of style updates, add details

---
 WeatherDashboard.Web/Views/Home/Index.cshtml  | 32 ++++++++-----
 .../Views/_ViewImports.cshtml                 |  1 +
 WeatherDashboard.Web/wwwroot/css/site.css     | 45 +++++++++++++++----
 WeatherDashboard/DayForecast.cs               |  2 +
 WeatherDashboard/Extensions/DateExtensions.cs | 17 +++++++
 5 files changed, 77 insertions(+), 20 deletions(-)
 create mode 100644 WeatherDashboard/Extensions/DateExtensions.cs

diff --git a/WeatherDashboard.Web/Views/Home/Index.cshtml b/WeatherDashboard.Web/Views/Home/Index.cshtml
index 8a00fe7..e33cf47 100644
--- a/WeatherDashboard.Web/Views/Home/Index.cshtml
+++ b/WeatherDashboard.Web/Views/Home/Index.cshtml
@@ -1,45 +1,55 @@
 @model WeatherSet
 @{
-    ViewData["Title"] = "Home Page";
+    ViewData["Title"] = $"{Model.Location.Name}, {Model.Location.Region} Weather";
 
     var updateAge = (DateTime.Now - Model.Current.LastUpdated.Value).Minutes;
 }
 
 <div class="location">
-    @*<div>@Model.Location.Name, @Model.Location.Region</div>*@
     <small>Last updated @updateAge minutes ago</small>
 </div>
 
-<div class="current-conditions">
-    <div class="current-condition-name">@Model.Current.ConditionName</div>
-    <div class="current-temperature">@Model.Current.Temperature<span class="degrees">&#176;F</span></div>
+<div class="row current-conditions">
+    <div class="col current-temperature">
+        @Model.Current.Temperature<span class="degrees">&#176;F</span>
+    </div>
+    <div class="col current-details">
+        <div>@Model.Current.ConditionName</div>
+        <div>Feels Like @Model.Current.FeelsLike</div>
+        <div>Humidity @Model.Current.Humidity</div>
+        <div>Winds @Model.Current.WindDirection / @Model.Current.WindSpeed</div>
+    </div>
 </div>
 
-<div class="detailed-conditions">
+<div class="forecast-details">
 
     @foreach (var forecast in Model.Forecast)
     {
         var displayHours = new Dictionary<int, string>
-        { 
-            [7] = "Morning", 
+        {
+            [7] = "Morning",
             [14] = "Afternoon",
             [19] = "Evening",
             [23] = "Night"
         };
 
         var hourForecasts = forecast.HourForecasts
-            .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new 
+            .Join(displayHours, f => f.Time.Value.Hour, d => d.Key, (f, d) => new
             {
                 TimeOfDay = d.Value,
                 Forecast = f
             })
             .ToList();
 
+        <div class="row day-name">
+            <div class="col">@forecast.Date.FriendlyDate()</div>
+        </div>
+
         <div class="row day-summary">
-            <div class="col col-6">@forecast.Summary.ConditionName</div>
+            <div class="col col-6">@forecast.Summary.ConditionName </div>
             <div class="col col-6">@forecast.Summary.HighTemp / @forecast.Summary.LowTemp</div>
         </div>
-        
+
         @foreach (var hourForecast in hourForecasts)
         {
             <div class="row day-detail">
diff --git a/WeatherDashboard.Web/Views/_ViewImports.cshtml b/WeatherDashboard.Web/Views/_ViewImports.cshtml
index f3042c6..55ae8e7 100644
--- a/WeatherDashboard.Web/Views/_ViewImports.cshtml
+++ b/WeatherDashboard.Web/Views/_ViewImports.cshtml
@@ -1,3 +1,4 @@
 @using WeatherDashboard
 @using WeatherDashboard.Web
+@using WeatherDashboard.Extensions
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
diff --git a/WeatherDashboard.Web/wwwroot/css/site.css b/WeatherDashboard.Web/wwwroot/css/site.css
index f8b4e4a..9b83402 100644
--- a/WeatherDashboard.Web/wwwroot/css/site.css
+++ b/WeatherDashboard.Web/wwwroot/css/site.css
@@ -20,7 +20,7 @@ html {
 body {
     font-family: 'Montserrat', sans-serif;
     color: #444;
-    margin: 20px 10px;
+    margin: 10px;
     background-color: floralwhite;
 }
 
@@ -32,32 +32,59 @@ body {
 .degrees {
     font-size: 50px;
     position: absolute;
-    margin: 20px 0 0 10px;
+    margin: 10px 0 0 10px;
     opacity: .6;
+    line-height: 50px;
+}
+
+.current-conditions {
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .current-temperature {
     font-size: 100px;
     font-weight: 500;
+    line-height: 100px;
 }
 
-.detailed-conditions {
+.current-details {
+    text-align: right;
+    font-size: 14px;
+    margin-top: 10px;
+    opacity: 0.8;
 }
 
-    .detailed-conditions .day-summary {
-        font-size: 30px;
+.forecast-details {
+}
+
+    .forecast-details .day-name {
+        font-size: 17px;
+        opacity: 0.4;
     }
 
-        .detailed-conditions .day-summary .col:last-of-type {
+        .forecast-details .day-name:not(:first-of-type) {
+            margin-top: 15px;
+        }
+
+    .forecast-details .day-summary {
+        font-size: 30px;
+        line-height: 30px;
+        margin-bottom: 10px;
+    }
+
+        .forecast-details .day-summary .col:last-of-type {
             text-align: right;
         }
 
-    .detailed-conditions .day-detail {
+    .forecast-details .day-detail {
         font-size: 13px;
-        opacity: 0.5;
+        opacity: 0.7;
     }
 
-        .detailed-conditions .day-detail .col:last-of-type {
+
+
+        .forecast-details .day-detail .col:last-of-type {
             text-align: right;
             font-weight: bold;
         }
diff --git a/WeatherDashboard/DayForecast.cs b/WeatherDashboard/DayForecast.cs
index dd0ec34..0f2e3a4 100644
--- a/WeatherDashboard/DayForecast.cs
+++ b/WeatherDashboard/DayForecast.cs
@@ -4,6 +4,8 @@ namespace WeatherDashboard
 {
     public class DayForecast
     {
+        public DateTime Date { get; set; }
+
         [JsonProperty("day")]
         public ForecastSummary Summary { get; set; }
 
diff --git a/WeatherDashboard/Extensions/DateExtensions.cs b/WeatherDashboard/Extensions/DateExtensions.cs
new file mode 100644
index 0000000..e603b91
--- /dev/null
+++ b/WeatherDashboard/Extensions/DateExtensions.cs
@@ -0,0 +1,17 @@
+namespace WeatherDashboard.Extensions
+{
+    public static class DateExtensions
+    {
+        public static string FriendlyDate(this DateTime date)
+        {
+            var format = date.Year < DateTime.Now.Year
+                ? "dddd, M/d/yy"
+                : "dddd, M/d";
+
+            return date.Date == DateTime.Now.Date ? "Today" 
+                : date.Date == DateTime.Now.AddDays(-1).Date ? "Yesterday"
+                : date.Date == DateTime.Now.AddDays(1).Date ? "Tomorrow"
+                : date.ToString(format);
+        }
+    }
+}