From a41b14491089060ac3d03c4b43a509460ccc4276 Mon Sep 17 00:00:00 2001
From: S-Sebb <794194678@qq.com>
Date: Mon, 13 Nov 2023 13:15:45 +0000
Subject: [PATCH] Fixed some mobile view layout issues

---
 TaikoWebUI/Pages/AccessCode.razor     |  6 +++---
 TaikoWebUI/Pages/ChangePassword.razor |  6 +++---
 TaikoWebUI/Pages/Register.razor       | 10 ++--------
 TaikoWebUI/wwwroot/css/app.css        |  1 +
 4 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/TaikoWebUI/Pages/AccessCode.razor b/TaikoWebUI/Pages/AccessCode.razor
index e13c917..7052f32 100644
--- a/TaikoWebUI/Pages/AccessCode.razor
+++ b/TaikoWebUI/Pages/AccessCode.razor
@@ -34,7 +34,7 @@ else
     {
         @if ((LoginService.LoginRequired && (!LoginService.IsLoggedIn || (LoginService.GetLoggedInUser().Baid != Baid && !LoginService.IsAdmin))) || User is null)
         {
-            <MudItem xs="12">
+            <MudItem xs="12" md="6" lg="4">
                 <MudText Align="Align.Center" Class="my-8">
                     Please log in by clicking on "Users" tab first.
                 </MudText>
@@ -43,7 +43,7 @@ else
         else
         {
             <MudGrid Justify="Justify.Center">
-                <MudItem xs="6" md="4" lg="4">
+                <MudItem xs="12" md="6" lg="4">
                     <MudCard>
                         <MudCardContent>
                             <MudForm @ref="bindAccessCodeForm">
@@ -61,7 +61,7 @@ else
             {
                 var accessCode = User.AccessCodes[idx];
                 var localIdx = idx + 1;
-                <MudItem xs="6" md="4" lg="4">
+                <MudItem xs="12" md="6" lg="4">
                     <MudCard Outlined="true">
                         <MudCardHeader>
                             <CardHeaderContent>
diff --git a/TaikoWebUI/Pages/ChangePassword.razor b/TaikoWebUI/Pages/ChangePassword.razor
index 3c5a1e5..65bb374 100644
--- a/TaikoWebUI/Pages/ChangePassword.razor
+++ b/TaikoWebUI/Pages/ChangePassword.razor
@@ -15,14 +15,14 @@ else
 {
     <MudContainer>
         <MudGrid Justify="Justify.Center">
-            <MudItem xs="4" class="mt-8">
+            <MudItem xs="12" md="6" lg="4" class="mt-8">
                 <MudCard>
                     <MudCardContent>
                         <MudForm @ref="changePasswordForm">
                             <MudText Typo="Typo.h4" Align="Align.Center">Change Password</MudText>
                             <MudTextField @bind-value="cardNum" InputType="InputType.Text" T="string"
-                                          FullWidth="true" Required="@true" RequiredError="Card Number is required"
-                                          Label="Card Number"/>
+                                          FullWidth="true" Required="@true" RequiredError="Access code is required"
+                                          Label="Access Code"/>
                             <MudTextField @bind-Value="oldPassword" InputType="InputType.Password"
                                           T="string" FullWidth="true" Required="@true"
                                           RequiredError="Old Password is required"
diff --git a/TaikoWebUI/Pages/Register.razor b/TaikoWebUI/Pages/Register.razor
index da73d69..ef52d19 100644
--- a/TaikoWebUI/Pages/Register.razor
+++ b/TaikoWebUI/Pages/Register.razor
@@ -15,7 +15,7 @@ else
 {
     <MudContainer>
         <MudGrid Justify="Justify.Center">
-            <MudItem xs="4" class="mt-8">
+            <MudItem xs="12" md="6" lg="4" class="mt-8">
                 <MudCard>
                     <MudCardContent>
                         <MudForm @ref="registerForm">
@@ -25,13 +25,7 @@ else
                                           Label="Access Code"/>
                             @if (LoginService.RegisterWithLastPlayTime)
                             {
-                                <MudDatePicker @ref="datePicker" Label="Last Play Date" @bind-Date="date" AutoClose="false">
-                                    <PickerActions>
-                                        <MudButton Class="mr-auto align-self-start" OnClick="@(() => datePicker.Clear())">Clear</MudButton>
-                                        <MudButton OnClick="@(() => datePicker.Close(false))">Cancel</MudButton>
-                                        <MudButton Color="Color.Primary" OnClick="@(() => datePicker.Close())">Ok</MudButton>
-                                    </PickerActions>
-                                </MudDatePicker>
+                                <MudDatePicker @ref="datePicker" Label="Last Play Date" @bind-Date="date" AutoClose="true"/>
                                 <MudTimePicker @ref="timePicker" AmPm="true" Label="Last Play Time(5 min within when credit ended)" @bind-Time="time" AutoClose="false">
                                     <PickerActions>
                                         <MudButton Class="mr-auto align-self-start" OnClick="@(() => timePicker.Clear())">Clear</MudButton>
diff --git a/TaikoWebUI/wwwroot/css/app.css b/TaikoWebUI/wwwroot/css/app.css
index b1daabe..73434df 100644
--- a/TaikoWebUI/wwwroot/css/app.css
+++ b/TaikoWebUI/wwwroot/css/app.css
@@ -104,3 +104,4 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
+    /* Change text to "Ok" when loading is complete */