Fix display issues

benjaminsampica · Dec 24, 2021 · 2e14d40 · 2e14d40
1 parent b6bae2f
commit 2e14d40
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 63 deletions.
diff --git a/DynamoLeagueBlazor/Client/Features/Dashboard/TopOffenders/TopOffenders.razor b/DynamoLeagueBlazor/Client/Features/Dashboard/TopOffenders/TopOffenders.razor
@@ -37,9 +37,9 @@ else
                     var secondPlayer = _result.Players.Skip(1).First();
                     var thirdPlayer = _result.Players.Skip(2).First();
                 }
-                <PlayerCard BackgroundColor="background: rgba(159, 134, 0, 1);" Player="@firstPlayer" NameTypo=Typo.h4 FineAmountTypo=Typo.h3/>
-                <PlayerCard BackgroundColor="background: rgba(147, 147, 147, 1);" Player="@secondPlayer" NameTypo=Typo.h6 FineAmountTypo=Typo.h4/>
-                <PlayerCard BackgroundColor="background: rgba(135, 106, 63, 1);" Player="@thirdPlayer" NameTypo=Typo.h6 FineAmountTypo=Typo.h4/>
+                <PlayerCard BackgroundColor="background: rgba(159, 134, 0, 1);" Player="@firstPlayer" NameTypo=Typo.h4 FineAmountTypo=Typo.h4/>
+                <PlayerCard BackgroundColor="background: rgba(147, 147, 147, 1);" Player="@secondPlayer" NameTypo=Typo.h5 FineAmountTypo=Typo.h5/>
+                <PlayerCard BackgroundColor="background: rgba(135, 106, 63, 1);" Player="@thirdPlayer" NameTypo=Typo.h5 FineAmountTypo=Typo.h5/>
             </MudItem>
             @foreach(var player in _result.Players.Skip(3))
             {

diff --git a/DynamoLeagueBlazor/Client/Features/Fines/Manage.razor b/DynamoLeagueBlazor/Client/Features/Fines/Manage.razor
@@ -2,32 +2,40 @@
     <FluentValidationValidator />
     <MudDialog>
         <DialogContent>
-            Approve or deny & remove this fine?
+            Do you want to approve this fine?
         </DialogContent>
         <DialogActions>
-            <MudButton Color="Color.Transparent" Variant=Variant.Text OnClick="Cancel">Cancel</MudButton>
-            <MudButton Color="Color.Error" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Delete OnClick="OnValidSubmitAsync" Disabled="@_processingForm">
-                @if (_processingForm)
-                {
-                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
-                    <MudText Class="ms-2">Saving...</MudText>
-                }
-                else
-                {
-                    <MudText>Deny & Remove</MudText>
-                }
-            </MudButton>
-            <MudButton Color="Color.Success" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Check OnClick="OnValidSubmitAsync" Disabled="@_processingForm">
-                @if (_processingForm)
-                {
-                    <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
-                    <MudText Class="ms-2">Saving...</MudText>
-                }
-                else
-                {
-                    <MudText>Approve</MudText>
-                }
-            </MudButton>
+            <MudGrid>
+                <MudItem xs=12 md=4>
+                     <MudButton Color="Color.Transparent" Variant=Variant.Text OnClick="Cancel">Cancel</MudButton>
+                </MudItem>
+                <MudItem xs=12 md=4>
+                    <MudButton Color="Color.Error" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Delete ButtonType=ButtonType.Submit Disabled="@_processingForm">
+                        @if (_processingForm)
+                        {
+                            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
+                            <MudText Class="ms-2">Saving...</MudText>
+                        }
+                        else
+                        {
+                            <MudText>Remove</MudText>
+                        }
+                    </MudButton>
+                </MudItem>
+                <MudItem xs=12 md=4>
+                    <MudButton Color="Color.Success" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Check ButtonType=ButtonType.Submit Disabled="@_processingForm">
+                        @if (_processingForm)
+                        {
+                            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
+                            <MudText Class="ms-2">Saving...</MudText>
+                        }
+                        else
+                        {
+                            <MudText>Approve</MudText>
+                        }
+                    </MudButton>
+                </MudItem>
+            </MudGrid>
         </DialogActions>
     </MudDialog>
 </EditForm>
diff --git a/DynamoLeagueBlazor/Client/Features/Players/AddFine.razor b/DynamoLeagueBlazor/Client/Features/Players/AddFine.razor
@@ -7,7 +7,7 @@
         </DialogContent>
         <DialogActions>
             <MudButton Color="Color.Transparent" Variant=Variant.Text OnClick="Cancel">Cancel</MudButton>
-            <MudButton Color="Color.Success" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Check OnClick="OnValidSubmitAsync" Disabled="@_processingForm">
+            <MudButton Color="Color.Success" Variant=Variant.Outlined StartIcon=@Icons.Outlined.Check ButtonType=ButtonType.Submit Disabled="@_processingForm">
                 @if (_processingForm)
                 {
                     <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>

diff --git a/DynamoLeagueBlazor/Client/Shared/MainLayout.razor b/DynamoLeagueBlazor/Client/Shared/MainLayout.razor
@@ -6,12 +6,14 @@
     <MudAppBar Elevation=3>
         <a href="/" class="d-flex">
             <img src="logo.PNG" height="30"/>
-            <MudText Typo="Typo.h5" Class="ml-3">Fantasy Football</MudText>
+            <MudHidden Breakpoint="Breakpoint.LgAndUp" Invert="true">
+                <MudText Typo="Typo.h5" Class="ml-3">Fantasy Football</MudText>
+            </MudHidden>
         </a>
         <MudSpacer />
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => ToggleNavMenu())" />
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick=@(e => OnOpenChanged()) />
     </MudAppBar>
-    <NavMenu Show=_showNavMenu/>
+    <NavMenu Open=_showNavMenu OnOpenChanged=OnOpenChanged/>
     <MudMainContent>
         <MudContainer MaxWidth=MaxWidth.False Class="px-8 pt-8">
             <ErrorBoundary @ref=_errorBoundary>
@@ -72,15 +74,15 @@
     };
 
     private ErrorBoundary? _errorBoundary;
-    private bool _showNavMenu = true;
+    private bool _showNavMenu;
 
     protected override void OnParametersSet()
     {
         _errorBoundary?.Recover();
     }
 
-    private void ToggleNavMenu()
+    public void OnOpenChanged(bool open = true)
     {
-        _showNavMenu = !_showNavMenu;
+        _showNavMenu = open;
     }
 }
diff --git a/DynamoLeagueBlazor/Client/Shared/NavMenu/NavMenu.razor b/DynamoLeagueBlazor/Client/Shared/NavMenu/NavMenu.razor
@@ -1,4 +1,4 @@
-<MudDrawer @bind-Open="Show" Elevation="3" Variant=DrawerVariant.Persistent Anchor=Anchor.End ClipMode="DrawerClipMode.Always">
+<MudDrawer Open=Open Elevation="3" Variant=DrawerVariant.Temporary ClipMode=DrawerClipMode.Always Anchor=Anchor.End OpenChanged=@OnOpenChanged>
     <MudNavMenu>
         <MudNavLink Href="/" Match=NavLinkMatch.All>Dashboard</MudNavLink>
         <MudNavLink Href="/teams">Teams</MudNavLink>
@@ -17,11 +17,7 @@
 
 @code 
 {
-    [Parameter, EditorRequired] public bool Show { get; set; }
-
-    void DrawerToggle()
-    {
-        Show = !Show;
-    }
+    [Parameter, EditorRequired] public bool Open { get; set; }
+    [Parameter, EditorRequired] public EventCallback<bool> OnOpenChanged { get; set; }
 }
 
diff --git a/DynamoLeagueBlazor/Client/wwwroot/css/app.css b/DynamoLeagueBlazor/Client/wwwroot/css/app.css
@@ -1,16 +1,6 @@
 /* TODO: Add local version for offline */
 @import url('https://fonts.googleapis.com/css?family=Graduate|Open+Sans:300&display=swap');
 
-@keyframes spin-animation {
-    0% {
-        transform: rotate(360deg);
-    }
-
-    100% {
-        transform: rotate(0deg);
-    }
-}
-
 .grow {
     transition: all .2s ease-in-out;
 }
@@ -23,17 +13,6 @@
     box-shadow: 0px 0px 10px 0px rgba(89,74,226,0.55);
 }
 
-/* MudBlazor overrides */
-
-.mud-card-header .mud-card-header-actions {
-    align-self: initial !important;
-}
-
-.mud-nav-link-text {
-    font-family: "Graduate", sans-serif;
-    text-transform: uppercase;
-}
-
 html, body {
     height: 100vh;
 }
@@ -55,7 +34,7 @@ html, body {
 #loading > img {
     width: 80%;
     height: auto;
-    max-width: 900px;
+    max-width: 400px;
 }
 
 .loader {
@@ -75,4 +54,15 @@ html, body {
     100% {
         transform: rotate(360deg);
     }
+}
+
+/* MudBlazor overrides */
+
+.mud-card-header .mud-card-header-actions {
+    align-self: initial !important;
+}
+
+.mud-nav-link-text {
+    font-family: "Graduate", sans-serif;
+    text-transform: uppercase;
 }
diff --git a/DynamoLeagueBlazor/Client/wwwroot/logo.PNG b/DynamoLeagueBlazor/Client/wwwroot/logo.PNG