Adding happy hour time to deals row when small screen (#53)

eebbesen · Dec 16, 2024 · b161eba · b161eba
1 parent 80c655d
commit b161eba
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealEventRowDeal.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealEventRowDeal.razor
@@ -3,7 +3,9 @@
 
 @if (!string.IsNullOrEmpty(Deal.HappyHour))
 {
-    <i class="bi bi-clock me-1" data-bs-toggle="tooltip" title=@Deal.HappyHour></i>
+    <div class="d-inline-block">
+        <i class="bi bi-clock me-1 d-none d-md-block" data-bs-toggle="tooltip" title=@Deal.HappyHour></i><div class="d-sm-block d-md-none me-1 fw-bold">@Deal.HappyHour</div>
+    </div>
 }
 @if (!string.IsNullOrEmpty(Deal.Alcohol))
 {

diff --git a/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBody.razor b/StpFoodBlazor/StpFoodBlazor/Components/Layout/DealTableBody.razor
@@ -14,7 +14,7 @@
         <div class="col">
             @if (!string.IsNullOrEmpty(deal.URL))
             {
-                <NavLink href=@deal.URL target="_blank">
+                <NavLink href=@deal.URL target="_blank" class="text-decoration-none">
                     <DealEventRowDeal Deal=deal></DealEventRowDeal>
                 </NavLink>
             }

diff --git a/StpFoodBlazor/StpFoodBlazorTest/Layout/DealEventRowDealTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Layout/DealEventRowDealTest.razor
@@ -12,7 +12,9 @@
     private static string alcoholIcon =
         "<i class=\"bi bi-cup-straw me-1\" data-bs-toggle=\"tooltip\" title=\"alcohol\"></i>";
     private static string happyHourIcon =
-        "<i class=\"bi bi-clock me-1\" data-bs-toggle=\"tooltip\" title=\"16:00 - 18:00\"></i>";
+        "<i class=\"bi bi-clock me-1 d-none d-md-block\" data-bs-toggle=\"tooltip\" title=\"16:00 - 18:00\"></i>";
+
+    private static string happyHourTime = "<div class=\"d-sm-block d-md-none me-1 fw-bold\">16:00 - 18:00</div>";
 
     public DealEventRowDealTest()
     {
@@ -42,7 +44,8 @@
         deal.HappyHour = "16:00 - 18:00";
 
         var cut = ctx.Render(@<DealEventRowDeal Deal=deal />);
-        Assert.Equal(happyHourIcon + @deal.Deal,
+        Assert.Equal("<div class=\"d-inline-block\">" +
+            happyHourIcon + happyHourTime + "</div>" +  @deal.Deal,
             cut.Markup);
     }
 
@@ -53,7 +56,8 @@
         deal.Alcohol = "x";
 
         var cut = ctx.Render(@<DealEventRowDeal Deal=deal />);
-        Assert.Equal(happyHourIcon + alcoholIcon + @deal.Deal,
+        Assert.Equal("<div class=\"d-inline-block\">" +
+            happyHourIcon + happyHourTime + "</div>" + alcoholIcon + @deal.Deal,
             cut.Markup);
     }
 }
diff --git a/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor b/StpFoodBlazor/StpFoodBlazorTest/Pages/DealsTest.razor
@@ -153,7 +153,10 @@
     public void DealsShouldWrapDealInURLSunday()
     {
         timeService.DayOfWeek = DayOfWeek.Sunday.ToString();
-        var expected = "<a href=\"https://static1.squarespace.com/static/5a2e198df09ca4a1b268ab29/t/6682be6dc1cace0a806d8ff5/1719844462234/PSP_HH_7.1.24.png\" target=\"_blank\"><i class=\"bi bi-clock me-1\" data-bs-toggle=\"tooltip\" title=\"16:00 - 18:00\"></i><i class=\"bi bi-cup-straw me-1\" data-bs-toggle=\"tooltip\" title=\"alcohol\"></i>$5 beer, $7 select wine, $9 cocktail of the day</a>";
+        var expected = "<a href=\"https://static1.squarespace.com/static/5a2e198df09ca4a1b268ab29/t/6682be6dc1cace0a806d8ff5/1719844462234/PSP_HH_7.1.24.png\"" +
+            " target=\"_blank\" class=\"text-decoration-none\"><div class=\"d-inline-block\"><i class=\"bi bi-clock me-1 d-none d-md-block\"" +
+            " data-bs-toggle=\"tooltip\" title=\"16:00 - 18:00\"></i><div class=\"d-sm-block d-md-none me-1 fw-bold\">16:00 - 18:00</div></div>" +
+            "<i class=\"bi bi-cup-straw me-1\" data-bs-toggle=\"tooltip\" title=\"alcohol\"></i>$5 beer, $7 select wine, $9 cocktail of the day</a>";
         var cut = ctx.Render(@<Deals />);
         getElements(cut);
         cut.Find("#happy-hour-checkbox").Change(true);