Reworking layout

TaikoWebUI/Pages/Card.razor

@@ -8,22 +8,47 @@
 
 @if (response is not null)
 {
-    <MudStack>
+    <MudGrid>
+        <MudItem xs="12" md="8">
+            <MudPaper Class="py-8 px-8 my-8">
+                <MudStack Spacing="6">
+                    <h2>Song Options</h2>
+                    <MudStack Spacing="6">
+                        <MudSwitch @bind-Checked="@response.PlaySetting.IsVanishOn" Label="Vanish" Color="Color.Primary" />
+
+                        <MudSwitch @bind-Checked="@response.PlaySetting.IsInverseOn" Label="Inverse" Color="Color.Primary" />
+
+                        <MudSwitch @bind-Checked="@response.IsSkipOn" Label="Give Up" Color="Color.Primary" />
+
+                        <MudSwitch @bind-Checked="@response.IsVoiceOn" Label="Voice" Color="Color.Primary" />
+                    </MudStack>
+
+                    <MudSelect @bind-Value="@response.PlaySetting.Speed" Label="Speed">
+                        @for (uint i = 0; i < 15; i++)
+                        {
+                            var index= i;
+                            <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
+                        }
+                    </MudSelect>
+
+                    <MudSelect @bind-Value="@response.PlaySetting.RandomType"
+                           Label="Random">
+                        @foreach (var item in Enum.GetValues<RandomType>())
+                        {
+                            <MudSelectItem Value="@item" />
+                        }
+                    </MudSelect>
+
+                    <MudSlider Class="mb-8" @bind-Value="@response.NotesPosition" Size="Size.Medium" Min="-5" Max="5" Step="1" TickMarks="true" TickMarkLabels="@notePositionStrings">
+                        <MudText Typo="Typo.caption">Notes Position</MudText>
+                    </MudSlider>
+
                     <MudSelect @bind-Value="@response.IsDisplayAchievement"
                                 Label="Is Display Achievement Panel">
                         <MudSelectItem Value="@true">On</MudSelectItem>
                         <MudSelectItem Value="@false">Off</MudSelectItem>
                     </MudSelect>
-        <MudSelect @bind-Value="@response.IsSkipOn"
+
-                   Label="Is Skip On">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.IsVoiceOn"
-                   Label="Is Voice On">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
                     <MudSelect @bind-Value="@response.IsDisplayDanOnNamePlate"
                                 Label="Should Dan be Displayed On Name Plate">
                         <MudSelectItem Value="@true">On</MudSelectItem>
@@ -36,38 +61,11 @@
                             <MudSelectItem Value="@item"/>
                         }
                     </MudSelect>
-        <MudSelect @bind-Value="@response.NotesPosition"
+                </MudStack>
-                   Label="Notes Position">
+            </MudPaper>
-            @for (var i = -5; i <= 5; i++)
+        </MudItem>
-            {
+        <MudItem md="4" xs="12" Class="py-8 px-8 my-4 pt-8">
-                <MudSelectItem Value="@i"/>
+            <MudStack Spacing="6" Style="top:100px" Class="sticky">
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.RandomType"
-                   Label="Random">
-            @foreach (var item in Enum.GetValues<RandomType>())
-            {
-                <MudSelectItem Value="@item"/>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.Speed"
-                   Label="Speed">
-            @for (uint i = 0; i < 15; i++)
-            {
-                var index= i;
-                <MudSelectItem Value="@i">@speedStrings[index]</MudSelectItem>
-            }
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.IsInverseOn"
-                   Label="Inverse">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
-        <MudSelect @bind-Value="@response.PlaySetting.IsVanishOn"
-                   Label="Vanish">
-            <MudSelectItem Value="@true">On</MudSelectItem>
-            <MudSelectItem Value="@false">Off</MudSelectItem>
-        </MudSelect>
                 <MudButton Disabled="@isSavingOptions"
                         OnClick="SaveOptions"
                         Variant="Variant.Filled"
@@ -84,6 +82,8 @@
                     }
                 </MudButton>
             </MudStack>
+        </MudItem>
+    </MudGrid>
 }
 
 @code {
@@ -98,6 +98,8 @@
     private readonly string[] speedStrings = { "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "1.9",
         "2.0", "2.5", "3.0", "3.5", "4.0"};
 
+    private readonly string[] notePositionStrings = new string[] { "-5", "-4", "-3", "-2", "-1", "0", "1", "2", "3", "4", "5"};
+
     protected override async Task OnInitializedAsync()
     {
         await base.OnInitializedAsync();

TaikoWebUI/Shared/MainLayout.razor

@@ -7,9 +7,6 @@
 <MudLayout>
     <MudAppBar Elevation="0">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
-        <MudSpacer/>
-        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank"/>
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank"/>
     </MudAppBar>
     <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
         <MudDrawerHeader>

TaikoWebUI/Shared/NavMenu.razor

@@ -1,6 +1,6 @@
 <MudNavMenu>
-    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
+@*    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
     <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
-    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
+    <MudNavLink Href="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>*@
     <MudNavLink Href="Dashboard" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
 </MudNavMenu>