Decrease Fixture List size on a Small Screen

Decreased the Fixture List size on a Small Screen
johnt84 · Sep 19, 2024 · 7d47767 · 7d47767
1 parent 484eed5
commit 7d47767
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor b/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor
@@ -1,12 +1,21 @@
 @if (FixturesAndResultsExist)
 {
-    @switch (ComponentSource)
+    switch (ComponentSource)
     {
         case Enums.ComponentSource.FixturesAndResults:
         case Enums.ComponentSource.Team:
-            <h2 style="padding-bottom: 10px;">
-                @FixtureDate.ToString("dddd dd MMMM yyyy")
-            </h2>
+            @if (!IsSmall)
+            {
+                <h2 style="padding-bottom: 10px;">
+                    @FixtureDate.ToString("dddd dd MMMM yyyy")
+                </h2>
+            }
+            else
+            {
+                <h4 style="padding-bottom: 10px;">
+                    @FixtureDate.ToString("dddd dd MMMM yyyy")
+                </h4>
+            }
             break;
         case Enums.ComponentSource.FixturesByGroup:
             <h4 style="padding-bottom: 10px;">

diff --git a/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor.cs b/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor.cs
@@ -21,8 +21,8 @@ public partial class FixturesAndResultsByDayComponent
 
 
     private string TableStyle => ComponentSource == Enums.ComponentSource.FixturesAndResults && !IsSmall
-                                        ? "width : 670px; margin-bottom: 20px;"
-                                        : "width : 480px; margin-bottom: 20px;";
+                                        ? "width: 670px; margin-bottom: 20px;"
+                                        : "width: 340px; margin-bottom: 20px;";
 
     private List<FootballShared.Models.FixtureAndResult> FixturesAndResults;
 

diff --git a/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor b/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor
@@ -2,18 +2,12 @@
 {
     <h3 style="padding-bottom: 10px;">Fixtures</h3>
 
-    <table class="table" style="width: 450px; margin-bottom: 20px;">
+    <table class="table" style="@TableStyle">
         @foreach (var fixtureandResultByDay in FixturesAndResultsByGroupOrLeagueTableModel.FixturesAndResultsByDays)
         {
             <FixturesAndResultsByDayComponent ComponentSource="Enums.ComponentSource.FixturesByGroup" FixturesAndResultsByDayModel="fixtureandResultByDay"></FixturesAndResultsByDayComponent>
         }
     </table>
 }
 
-@code {
-    private bool FixturesAndResultsExist => FixturesAndResultsByGroupOrLeagueTableModel != null 
-                                            && (FixturesAndResultsByGroupOrLeagueTableModel.FixturesAndResults?.Count ?? 0) > 0;
-
-    [Parameter]
-    public FootballShared.Models.FixturesAndResultsByGroupOrLeagueTable FixturesAndResultsByGroupOrLeagueTableModel { get; set; }
-}
+<MediaQuery Media="@BlazorPro.BlazorSize.Breakpoints.SmallDown" @bind-Matches="IsSmall" />
diff --git a/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor.cs b/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace FootballBlazorApp.Components;
+
+public partial class FixturesAndResultsByGroupOrLeagueTable
+{
+    private bool FixturesAndResultsExist => FixturesAndResultsByGroupOrLeagueTableModel != null
+                                            && (FixturesAndResultsByGroupOrLeagueTableModel.FixturesAndResults?.Count ?? 0) > 0;
+
+    [Parameter]
+    public FootballShared.Models.FixturesAndResultsByGroupOrLeagueTable FixturesAndResultsByGroupOrLeagueTableModel { get; set; }
+
+    private bool IsSmall = false;
+
+    private string TableStyle => !IsSmall
+                                     ? "width: 450px; margin-bottom: 20px;"
+                                     : "width: 340px; margin-bottom: 20px;";
+}