rewrite UI into collapsed view

BinaryDad.AacpsBusAlert.Web/Views/Home/Index.cshtml

@@ -6,38 +6,43 @@
     var hasDelays = busRoutes.Any();
 
     var userBusRoutes = Model.User.Routes
-        .OrderBy(r => r.BusNumber)
+        .GroupJoin(busRoutes, ur => ur.BusNumber, br => br.BusNumber, (ur, routes) => new
+        {
+            UserRoute = ur,
+            RouteDisruptions = routes
+        })
+        .OrderBy(r => r.UserRoute.BusNumber)
         .ToList();
 }
 
 @if (hasDelays)
 {
-    <div class="alert alert-danger">
-        <h3 class="alert-heading">Uh oh</h3>
-        We have @busRoutes.Count delays
-    </div>
+    <h3 class="alert-heading">Uh oh! We have @busRoutes.Count delays</h3>
 }
 else
 {
-    <div class="alert alert-success">
-        <h3 class="alert-heading">Good news!</h3>
-        No delays today!
-    </div>
+    <h3 class="alert-heading">Good news! No delays today!</h3>
 }
 
-<h4>My Buses</h4>
-
 @foreach (var busRoute in userBusRoutes)
 {
-    <div><strong>@busRoute.BusNumber - @busRoute.Label</strong></div>
-}
+    var hasUserDelays = busRoute.RouteDisruptions.Any();
 
-<ul id="route-list">
-    @foreach (var busRoute in busRoutes)
-    {
-        <li>
-            <strong>@busRoute.BusNumber - @busRoute.Schools</strong>
-            <p>@busRoute.Impact @busRoute.Schedules</p>
-        </li>
-    }
-</ul>
+    <div class="alert @(hasUserDelays ? "alert-danger" : "alert-success")">
+        <strong>@busRoute.UserRoute.Label (@busRoute.UserRoute.BusNumber) - </strong>
+
+        @if (busRoute.RouteDisruptions.Any())
+        {
+            var delayList = string.Join(", ", busRoute.RouteDisruptions
+                .Select(r => $"{r.Impact} ({r.Schedules}) for {r.Schools}")
+                .ToArray());
+
+            <strong>@delayList</strong>
+        }
+        else
+        {
+            @:No Delays!
+        }
+
+    </div>
+}

BinaryDad.AacpsBusAlert.Web/wwwroot/css/site.css

@@ -16,9 +16,3 @@ html {
 body {
     margin-bottom: 60px;
 }
-
-#route-list {
-    margin: 20px 0 0;
-    padding: 0;
-    list-style-type: none;
-}