💄 Optimize ui, disable on larger screens

russkyc · Jan 11, 2025 · 440ea0e · 440ea0e
1 parent 9f4cc4c
commit 440ea0e
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 39 deletions.
diff --git 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>
+<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>
diff --git 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
@@ -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
@@ -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">