From 9f0b43d10cb7a51052f5b3e7550bd439a0655e89 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 27 Apr 2025 15:02:54 +0200
Subject: [PATCH] complete style and add skeleton

---
 .../Pages/Games/Header/GameHeader.razor       |  4 +-
 .../Pages/Games/Header/GameHeader.razor.cs    |  5 --
 .../Pages/UserMenu/Components/Login.razor     |  2 +-
 .../Pages/UserMenu/Components/Login.razor.cs  |  2 +-
 .../Pages/Users/Components/UserRow.razor      |  2 +-
 .../Pages/Users/Components/UserRow.razor.cs   | 15 ++++
 .../Pages/Users/Components/UserRow.razor.css  | 10 ++-
 .../Users/Components/UserRowSkeleton.razor    | 12 ++++
 .../Components/UserRowSkeleton.razor.css      | 69 +++++++++++++++++++
 .../Pages/Users/Users.razor                   |  2 +-
 .../Pages/Users/Users.razor.cs                |  2 +-
 .../Pages/Users/Users.razor.css               | 10 ++-
 .../Select/Components/SelectRow.razor.css     | 11 ++-
 .../Components/Select/Helpers/SelectHelper.cs |  1 +
 .../Components/Select/Models/SelectTheme.cs   |  3 +-
 .../Shared/Components/Select/Select.razor.css |  8 ++-
 16 files changed, 139 insertions(+), 19 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
index 95627b2..8f02472 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
@@ -10,9 +10,9 @@
 @inherits ComponentBase
 
 <div class="header-tab">
-    <div class="icon-container" @onclick="HandleIconClicked">
+    <a href="/Games" class="icon-container">
         <img src="icon.png" alt="Game Ideas">
-    </div>
+    </a>
 
     @ChildContent
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
index df01ce4..3249a21 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
@@ -32,11 +32,6 @@ public partial class GameHeader : ComponentBase
         base.OnInitialized();
     }
 
-    private void HandleIconClicked()
-    {
-        throw new NotImplementedException();
-    }
-
     private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
     {
         SelectListAdd?.Close();
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor
index 444b7aa..c9044f0 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor
@@ -1,7 +1,7 @@
 @using Blazored.FluentValidation
 
 <EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
-    <FluentValidationValidator />
+    <FluentValidationValidator Validator="Validator" />
     <div class="login-form">
         <div class="login-field">
             <div class="input-title">@ResourcesKey.EnterUsername</div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs
index 9d935ab..311a4ba 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Components/Login.razor.cs
@@ -12,7 +12,7 @@ public partial class Login
     private EditContext? EditContext;
     private UserDto UserDto = new();
     private bool IsLoading = false;
-
+    private LoginValidator Validator = new();
     protected override void OnInitialized()
     {
         EditContext = new EditContext(UserDto);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
index 647d835..cbaa834 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor
@@ -16,7 +16,7 @@
         </div>
         <div class="role">
             <Select TItem="RoleDto" THeader="object" DisableClicked=!CanEdit Type="SelectType.Single"
-                    Theme="SelectTheme.Creation" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
+                    Theme="SelectTheme.Single" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
                 <span class="role-label @(!CanEdit ? "disabled" : "")">@(User.Role?.Name ?? ResourcesKey.Unknown)</span>
             </Select>
         </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
index 6cd0411..b95f65e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs
@@ -16,10 +16,17 @@ public partial class UserRow
 
     private SelectParams<RoleDto, object> SelectRoleParams = new();
     private EditContext? EditContext;
+    private UserDto? OriginalUser;
 
     protected override void OnInitialized()
     {
         EditContext = new(User);
+        OriginalUser = new()
+        {
+            Username = User.Username,
+            Role = User.Role
+        };
+
         base.OnInitialized();
     }
 
@@ -48,11 +55,19 @@ public partial class UserRow
 
         CanEdit = false;
         await OnSubmit.InvokeAsync(User);
+        User.Password = null;
     }
 
 
     private void HandleEditClicked()
     {
+        if (CanEdit)
+        {
+            User.Username = OriginalUser?.Username;
+            User.Role = OriginalUser?.Role;
+            User.Password = null;
+        }
+
         CanEdit = !CanEdit;
     }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
index 30e2589..9b7d817 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css
@@ -13,6 +13,15 @@
     align-content: center;
 }
 
+.icon ::deep svg {
+    fill: var(--line);
+}
+
+.role {
+    min-width: 160px;
+    width: fit-content;
+}
+
 input[disabled], input, input::placeholder {
     color: var(--white);
 }
@@ -37,7 +46,6 @@ input, .role-label {
 .role-label {
     display: block;
     align-content: center;
-    width: fit-content;
 }
 
 .buttons {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor
new file mode 100644
index 0000000..069a179
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor
@@ -0,0 +1,12 @@
+@using GameIdeas.BlazorApp.Shared.Constants
+
+<div class="row">
+    <div class="icon">@Icons.Account</div>
+    <div class="name pill"></div>
+    <div class="password pill"></div>
+    <div class="role pill"></div>
+    <div class="buttons">
+        <span class="remove">@Icons.Bin</span>
+        <span class="edit">@Icons.Pen</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css
new file mode 100644
index 0000000..7d553ed
--- /dev/null
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRowSkeleton.razor.css
@@ -0,0 +1,69 @@
+.row {
+    height: 64px;
+    display: grid;
+    grid-template-columns: 48px 1fr 1fr 1fr auto;
+    grid-gap: 8px;
+    padding: 0 8px;
+    background: var(--input-secondary);
+    box-shadow: var(--drop-shadow);
+    border-radius: var(--big-radius);
+    align-content: center;
+}
+
+.icon {
+    height: 48px;
+    width: 48px;
+}
+
+.icon ::deep svg {
+    fill: var(--line);
+}
+
+.pill {
+    animation: loading 3s ease infinite;
+    align-self: center;
+    height: 28px;
+    border-radius: var(--small-radius);
+    box-sizing: border-box;
+    max-width: 180px;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    height: auto;
+    width: auto;
+}
+
+    .buttons > * {
+        margin: auto;
+        height: 28px;
+        width: 28px;
+        background: none;
+        border-radius: var(--small-radius);
+        padding: 2px;
+        box-sizing: border-box;
+    }
+
+.remove ::deep svg {
+    fill: var(--red);
+}
+
+.edit ::deep svg {
+    fill: var(--yellow);
+}
+
+@keyframes loading {
+    0% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+
+    50% {
+        background: rgb(255, 255, 255, 0.2);
+    }
+
+    100% {
+        background: rgb(255, 255, 255, 0.05);
+    }
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor
index 673f280..85cc787 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor
@@ -33,7 +33,7 @@
         {
             @for (int i = 0; i < 20; i++)
             {
-
+                <UserRowSkeleton />
             }
         }
     </div>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs
index 19212ea..8a7677f 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs
@@ -40,7 +40,7 @@ public partial class Users
         }
         finally
         {
-            IsLoading = false;
+            IsLoading = false;  
         }
     }
     private Task HandleSubmitUser(UserDto args)
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css
index 068faa8..18bbb60 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css
@@ -4,15 +4,21 @@
     gap: 8px;
 }
 
-::deep.header-content>* {
+::deep .search-container .select-container {
     box-sizing: border-box;
-    width: 200px;
+    max-width: 200px;
 }
 
 .container {
     padding: 20px 200px;
 }
 
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
 @media screen and (max-width: 1000px) {
     .container {
         padding: 20px 20px;
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
index 133a7f1..5651f0a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css
@@ -42,4 +42,13 @@
 
     .navigation .selected {
         display: none;
-    }
\ No newline at end of file
+    }
+
+/***** Single Theme *****/
+.single {
+    padding: 4px 8px;
+}
+
+.single .selected {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
index 862ceda..a327106 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs
@@ -13,6 +13,7 @@ public static class SelectHelper
             SelectTheme.Filter => "filter",
             SelectTheme.AdvancedFilter => "advanced-filter",
             SelectTheme.Creation => "creation",
+            SelectTheme.Single => "single",
             _ => string.Empty
         };
     }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
index 63d38ba..c5af5a2 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
@@ -6,5 +6,6 @@ public enum SelectTheme
     Sort,
     Filter,
     AdvancedFilter,
-    Creation
+    Creation,
+    Single
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
index 90c1264..eec629c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css
@@ -14,6 +14,7 @@
     z-index: var(--index-dropdown);
     border-radius: var(--small-radius);
     width: 100%;
+    box-shadow: var(--drop-shadow);
 }
 
 .content {
@@ -23,7 +24,6 @@
     flex-direction: column;
     animation-name: fade-in;
     animation-duration: 0.2s;
-    box-shadow: var(--drop-shadow);
 }
 
 .line {
@@ -87,7 +87,7 @@
         border-bottom: 2px solid var(--input-selected);
     }
 
-/***** Sort Theme *****/
+/***** Creation Theme *****/
 .creation .content {
     border-radius: var(--small-radius);
     box-sizing: border-box;
@@ -100,3 +100,7 @@
     border-bottom: 2px solid var(--input-selected);
 }
 
+/***** Single Theme *****/
+.single {
+    border: none;
+}