From 440ea0e2db091ff4de21ba0d966dd1ce8c6ccdb4 Mon Sep 17 00:00:00 2001
From: russkyc <jrcc1023@gmail.com>
Date: Sat, 11 Jan 2025 17:54:56 +0800
Subject: [PATCH] :lipstick: Optimize ui, disable on larger screens

---
 Russkyc.Timely/Layout/MainLayout.razor | 79 ++++++++++++++------------
 Russkyc.Timely/Pages/Home.razor        |  4 +-
 Russkyc.Timely/Pages/Records.razor     |  2 +-
 Russkyc.Timely/Pages/Settings.razor    |  2 +-
 4 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/Russkyc.Timely/Layout/MainLayout.razor b/Russkyc.Timely/Layout/MainLayout.razor
index 2d32060..ce3c65a 100644
--- a/Russkyc.Timely/Layout/MainLayout.razor
+++ b/Russkyc.Timely/Layout/MainLayout.razor
@@ -7,38 +7,47 @@
 <MudDialogProvider />
 <MudSnackbarProvider />
 
-<MudTabs TabHeaderClass="m-6 rounded-lg" Color="Color.Primary" Outlined="false" MinimumTabWidth="90px" Class="grow" PanelClass="p-6 grow flex flex-col" Position="Position.Bottom" Elevation="0" Centered="true">
-    <MudTabPanel>
-        <TabContent>
-            <MudStack Spacing="0" Class="flex flex-col">
-                <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.Home"/>
-                <MudText Class="mx-auto font-medium">Home</MudText>
-            </MudStack>
-        </TabContent>
-        <ChildContent>
-            <Home/>
-        </ChildContent>
-    </MudTabPanel>
-    <MudTabPanel>
-        <TabContent>
-            <MudStack Spacing="0" Class="flex flex-col">
-                <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.List"/>
-                <MudText Class="mx-auto font-medium">Records</MudText>
-            </MudStack>
-        </TabContent>
-        <ChildContent>
-            <Records/>
-        </ChildContent>
-    </MudTabPanel>
-    <MudTabPanel>
-        <TabContent>
-            <MudStack Spacing="0" Class="flex flex-col">
-                <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.Settings"/>
-                <MudText Class="mx-auto font-medium">Settings</MudText>
-            </MudStack>
-        </TabContent>
-        <ChildContent>
-            <Settings/>
-        </ChildContent>
-    </MudTabPanel>
-</MudTabs>
\ No newline at end of file
+<MudBreakpointProvider>
+    <MudHidden Breakpoint="Breakpoint.LgAndUp">
+        <MudTabs TabHeaderClass="m-6 rounded-lg" Color="Color.Primary" Outlined="false" MinimumTabWidth="90px" Class="grow" PanelClass="p-6 grow flex flex-col" Position="Position.Bottom" Elevation="0" Centered="true">
+            <MudTabPanel>
+                <TabContent>
+                    <MudStack Spacing="0" Class="flex flex-col">
+                        <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.Home"/>
+                        <MudText Class="mx-auto font-medium">Home</MudText>
+                    </MudStack>
+                </TabContent>
+                <ChildContent>
+                    <Home/>
+                </ChildContent>
+            </MudTabPanel>
+            <MudTabPanel>
+                <TabContent>
+                    <MudStack Spacing="0" Class="flex flex-col">
+                        <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.List"/>
+                        <MudText Class="mx-auto font-medium">Records</MudText>
+                    </MudStack>
+                </TabContent>
+                <ChildContent>
+                    <Records/>
+                </ChildContent>
+            </MudTabPanel>
+            <MudTabPanel>
+                <TabContent>
+                    <MudStack Spacing="0" Class="flex flex-col">
+                        <MudIcon Size="Size.Medium" Class="mx-auto" Icon="@Icons.Material.Rounded.Settings"/>
+                        <MudText Class="mx-auto font-medium">Settings</MudText>
+                    </MudStack>
+                </TabContent>
+                <ChildContent>
+                    <Settings/>
+                </ChildContent>
+            </MudTabPanel>
+        </MudTabs>
+    </MudHidden>
+    <MudHidden Breakpoint="Breakpoint.MdAndDown">
+        <MudItem Class="grow flex flex-col">
+            <MudText Class="m-auto">Only available on mobile</MudText>
+        </MudItem>
+    </MudHidden>
+</MudBreakpointProvider>
\ No newline at end of file
diff --git a/Russkyc.Timely/Pages/Home.razor b/Russkyc.Timely/Pages/Home.razor
index 7017f05..3f61129 100644
--- a/Russkyc.Timely/Pages/Home.razor
+++ b/Russkyc.Timely/Pages/Home.razor
@@ -1,5 +1,5 @@
 <MudStack Spacing="6" Class="grow flex flex-col">
-    <MudText Class="text-3xl font-black">Home</MudText>
+    <MudText Class="text-2xl font-black">Home</MudText>
     <MudPaper Elevation="1" Class="p-6 rounded-lg bg-[var(--mud-palette-primary)] text-white">
         <MudStack Row="true" Spacing="0" Class="flex flex-row">
             <MudStack Class="my-auto" Spacing="0">
@@ -18,7 +18,7 @@
     <MudItem Class="flex space-y-4 flex-col grow">
         <MudItem Class="m-auto flex flex-col space-y-4">
             <MudItem Class="mx-auto">
-                <MudProgressCircular Size="Size.Small" Style="width: 250px; height: 250px;" Class="relative m-auto"
+                <MudProgressCircular Size="Size.Small" Style="width: 160px; height: 160px;" Class="relative m-auto"
                                      Color="Color.Primary" StrokeWidth="4" Min="0" Max="12" Value="7"/>
             </MudItem>
             <MudStack Class="flex flex-col" Spacing="0">
diff --git a/Russkyc.Timely/Pages/Records.razor b/Russkyc.Timely/Pages/Records.razor
index 003bf07..5492fec 100644
--- a/Russkyc.Timely/Pages/Records.razor
+++ b/Russkyc.Timely/Pages/Records.razor
@@ -1,5 +1,5 @@
 <MudStack Spacing="6" Class="flex flex-col">
-    <MudText Class="text-3xl font-black">Records</MudText>
+    <MudText Class="text-2xl font-black">Records</MudText>
     <MudPaper Elevation="1" Class="rounded-lg bg-[var(--mud-palette-primary)] text-white">
         <MudStack Row="true" Spacing="0" Class="flex flex-row">
             <MudIconButton Size="Size.Large" Class="p-2 text-white" Icon="@Icons.Material.Rounded.ChevronLeft"/>
diff --git a/Russkyc.Timely/Pages/Settings.razor b/Russkyc.Timely/Pages/Settings.razor
index 1c0b67a..7806ebb 100644
--- a/Russkyc.Timely/Pages/Settings.razor
+++ b/Russkyc.Timely/Pages/Settings.razor
@@ -1,5 +1,5 @@
 <MudStack Spacing="6" Class="grow flex flex-col">
-    <MudText Class="text-3xl font-black">Settings</MudText>
+    <MudText Class="text-2xl font-black">Settings</MudText>
     <MudStack Spacing="4">
         <MudText Class="text-xl font-medium">Weekdays</MudText>
         <MudPaper Elevation="0" Class="p-4 rounded-lg border-2">