From 7d4776772358ee1ddfc2177c88e31d5a9c510b5d Mon Sep 17 00:00:00 2001
From: John Tomlinson <john.tomlinson@teamsynergi.co.uk>
Date: Thu, 19 Sep 2024 14:23:17 +0100
Subject: [PATCH] Decrease Fixture List size on a Small Screen

Decreased the Fixture List size on a Small Screen
---
 .../FixturesAndResultsByDayComponent.razor     | 17 +++++++++++++----
 .../FixturesAndResultsByDayComponent.razor.cs  |  4 ++--
 ...ixturesAndResultsByGroupOrLeagueTable.razor | 10 ++--------
 ...uresAndResultsByGroupOrLeagueTable.razor.cs | 18 ++++++++++++++++++
 4 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor.cs

diff --git a/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor b/FootballBlazorApp/Components/FixturesAndResultsByDayComponent.razor
index ca67654..c73d56c 100644
--- 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
index e22a229..72eb438 100644
--- 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
index 2df407a..bbf69f2 100644
--- a/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor
+++ b/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor
@@ -2,7 +2,7 @@
 {
     <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>
@@ -10,10 +10,4 @@
     </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" />
\ No newline at end of file
diff --git a/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor.cs b/FootballBlazorApp/Components/FixturesAndResultsByGroupOrLeagueTable.razor.cs
new file mode 100644
index 0000000..24b0d82
--- /dev/null
+++ 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;";
+}