From 740b8fdd68aa1fb4b9ded4a70d832fb159c2cad9 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Thu, 17 Apr 2025 00:55:35 +0200 Subject: [PATCH] Add Game row skeleton --- .../Pages/Games/Components/GameRow.razor | 2 +- .../Games/Components/GameRowSkeleton.razor | 36 ++++++ .../Components/GameRowSkeleton.razor.css | 111 ++++++++++++++++++ .../Pages/Games/Filter/GameFilter.razor.css | 2 +- .../Pages/Games/Game.razor | 19 ++- .../Pages/Games/Game.razor.cs | 3 +- .../Shared/Components/Popup/Popup.razor | 2 +- .../Components/Search/SearchInput.razor | 2 +- .../Components/Search/SearchInput.razor.cs | 4 +- .../Shared/Constants/Icons.cs | 28 ++--- 10 files changed, 182 insertions(+), 27 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor index d694e4f..a2309f2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRow.razor @@ -37,5 +37,5 @@ /5 - + \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor new file mode 100644 index 0000000..7e97df7 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor @@ -0,0 +1,36 @@ +@using GameIdeas.BlazorApp.Helpers +@using GameIdeas.BlazorApp.Shared.Constants + +
+
@Icons.Game
+ +
+ + @ResourcesKey.Unknown + +
+
+
+
+
+ +
+
+
+
+ + 10.0 Go + +
+ + @Interest + + /5 +
+ + +
+ +@code { + private int Interest = @Random.Shared.Next(1, 5); +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css new file mode 100644 index 0000000..df41d48 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameRowSkeleton.razor.css @@ -0,0 +1,111 @@ +.row { + display: grid; + grid-template-columns: auto 3fr 70px 2fr 3fr 60px 30px 30px; + grid-gap: 8px; + height: 64px; + background: var(--input-secondary); + box-shadow: var(--drop-shadow); + border-radius: var(--big-radius); + align-items: center; + overflow: hidden; +} + +.row * { + max-height: 64px; + height: fit-content; + padding: 6px 0; + box-sizing: border-box; +} + +.icon { + border-radius: var(--small-radius); + padding: 4px; + margin: 8px; + height: 48px; + width: 48px; + animation: loading 3s ease infinite; +} + +.icon ::deep svg { + fill: var(--input-secondary); +} + +.title { + border-radius: var(--small-radius); + animation: loading 3s ease infinite; + width: 160px; + height: 24px; + padding: 6px; + border-radius: var(--small-radius); +} + +.release-date, .storage, .max-value { + color: rgb(184, 184, 184); +} + +.pill { + width: 60px; + height: 24px; + padding: 0 6px; + border-radius: var(--small-radius); + align-content: center; + animation: loading 3s ease infinite; +} + +.pill-lg { + width: 80px; +} + +.pill-sm { + width: 40px; +} + +.platforms, .tags { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.detail { + transform: scale(0.6, 1) rotate(-90deg); + background: none; + border: none; + outline: none; + cursor: pointer; +} + +::deep .detail svg { + fill: var(--white); +} + +.value { + font-size: 24px; + font-weight: bold; +} + +.max-value { + position: absolute; + transform: translate(2px, 10px); +} + +@media screen and (max-width: 1000px) { + .row { + grid-template-columns: 48px 3fr 2fr 3fr 30px 30px; + } + + .tags, .storage { + display: none; + } +} + +@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); + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css index 269d9e7..748276e 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css @@ -13,7 +13,7 @@ .slider-container { width: 150px; - min-width: 150px; + min-width: 150px; } .select-container { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor index 714114a..8841706 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor @@ -13,16 +13,27 @@ + @bind-DisplayType=DisplayType + @bind-Value=GameFilter />
- @foreach (var game in GamesDto) + @if (!IsLoading) { - + @foreach (var game in GamesDto) + { + + } } + else + { + @for (int i = 0; i < 20; i++) + { + + } + } +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor.cs index 6534e9e..f586315 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Game.razor.cs @@ -3,7 +3,6 @@ using GameIdeas.BlazorApp.Shared.Components.Popup; using GameIdeas.BlazorApp.Shared.Models; using GameIdeas.Shared.Dto; using Microsoft.AspNetCore.Components; -using System.Net.Http.Headers; namespace GameIdeas.BlazorApp.Pages.Games; @@ -14,7 +13,7 @@ public partial class Game private DisplayType DisplayType = DisplayType.List; private GameFilterDto GameFilter = new(); private Popup? ManualAddPopup; - private bool IsLoading; + private bool IsLoading = false; private CategoriesDto? Categories; private IEnumerable GamesDto = []; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor index fb626b3..64a59ec 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor @@ -8,7 +8,7 @@
@if (Closable) { - + } @ChildContent
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor index db11012..886e722 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor @@ -17,7 +17,7 @@ @if (!string.IsNullOrEmpty(Text)) {
- @Icons.Shared.Close; + @Icons.Close;
} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs index 5e5f3d1..fd0f42e 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs @@ -57,8 +57,8 @@ public partial class SearchInput { return Icon switch { - SearchInputIcon.Dropdown => Icons.Search.Triangle, - SearchInputIcon.Search => Icons.Search.Glass, + SearchInputIcon.Dropdown => Icons.Triangle, + SearchInputIcon.Search => Icons.Glass, _ => new MarkupString() }; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs index 26ade56..07d5d99 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs @@ -8,21 +8,19 @@ public static class Icons private const string CloseBraket = ""; - public static class Search - { - public readonly static MarkupString Glass = new(OpenBraket + - "" + - CloseBraket); + public readonly static MarkupString Glass = new(OpenBraket + + "" + + CloseBraket); - public readonly static MarkupString Triangle = new(OpenBraket + - "" + - CloseBraket); - } + public readonly static MarkupString Triangle = new(OpenBraket + + "" + + CloseBraket); + + public readonly static MarkupString Close = new(OpenBraket + + "" + + CloseBraket); - public static class Shared - { - public readonly static MarkupString Close = new(OpenBraket + - "" + - CloseBraket); - } + public readonly static MarkupString Game = new(OpenBraket + + "" + + CloseBraket); }