From e4fe2495efe353db950ecceb500eb687e5ac3cf8 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Tue, 6 May 2025 21:53:26 +0200 Subject: [PATCH] Refactoring global style (#43) Reviewed-on: https://gitea.egamorf.com/PRJ-Game-Ideas/game-ideas/pulls/43 --- .../Pages/Detail/GameDetail.razor | 4 +- .../Pages/Detail/GameDetail.razor.css | 8 ++- .../Games/Filter/AdvancedGameFilter.razor | 13 ++++- .../Games/Filter/AdvancedGameFilter.razor.cs | 12 ++++ .../Games/Filter/AdvancedGameFilter.razor.css | 55 ++++++++++++++++++- .../Pages/Games/Filter/GameFilter.razor.css | 6 ++ .../Pages/Games/Games.razor.css | 4 +- .../Header/HeaderGameIdeas.razor.css | 9 ++- .../Shared/Components/ReadMore/ReadMore.razor | 16 ++++++ .../Components/ReadMore/ReadMore.razor.cs | 25 +++++++++ .../Components/ReadMore/ReadMore.razor.css | 44 +++++++++++++++ .../Shared/Constants/Icons.cs | 4 ++ .../CreateStaticResourceKey.cs | 4 ++ .../Constants/GlobalConstants.cs | 2 + .../GameIdeas.WebAPI/Files/GameIdeas.fr.json | 4 +- 15 files changed, 194 insertions(+), 16 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor index 6350c31..9682b3f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor @@ -2,7 +2,9 @@ @using GameIdeas.BlazorApp.Helpers @using GameIdeas.BlazorApp.Shared.Components.Header @using GameIdeas.BlazorApp.Shared.Components.Interest +@using GameIdeas.BlazorApp.Shared.Components.ReadMore @using GameIdeas.BlazorApp.Shared.Constants +@using GameIdeas.Shared.Constants @layout MainLayout @@ -18,7 +20,7 @@
- @Game.Description +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css index 8c8695b..6ca1c29 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Detail/GameDetail.razor.css @@ -1,6 +1,6 @@ .detail-container, .properties-tags { display: grid; - grid-gap: 20px; + grid-gap: 10px; } .flex { @@ -38,7 +38,11 @@ .pills, .informations { display: flex; flex-wrap: wrap; - gap: 34px; + gap: 34px; +} + +.pills { + gap: 8px; } .additional-informations, .platforms { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor index e111326..37c3ae6 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor @@ -1,8 +1,10 @@ -@using GameIdeas.BlazorApp.Shared.Components.Select.Models +@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter +@using GameIdeas.BlazorApp.Shared.Components.Select.Models @using GameIdeas.BlazorApp.Shared.Components.SelectSearch +@using GameIdeas.BlazorApp.Shared.Constants @using GameIdeas.Shared.Dto -
+
@ResourcesKey.Filters
@@ -30,3 +32,10 @@ @ResourcesKey.LastAdd
+ + + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs index 9c6b796..a3ab225 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs @@ -1,4 +1,5 @@ using GameIdeas.BlazorApp.Helpers; +using GameIdeas.BlazorApp.Shared.Components.BackdropFilter; using GameIdeas.BlazorApp.Shared.Components.Select.Models; using GameIdeas.Resources; using GameIdeas.Shared.Dto; @@ -13,6 +14,8 @@ public partial class AdvancedGameFilter [Parameter] public EventCallback GameFilterChanged { get; set; } private readonly SelectTheme Theme = SelectTheme.AdvancedFilter; + private bool ExpandedFilter; + private BackdropFilter? BackdropFilter; private async Task HandleValueChanged() { @@ -45,4 +48,13 @@ public partial class AdvancedGameFilter throw new ArgumentNullException(ResourcesKey.ErrorStorageSpaceLabel); } + private void HandleExpandFilter(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) + { + ExpandedFilter = true; + BackdropFilter?.Show(); + } + private void HandleBackdropFilterClicked() + { + ExpandedFilter = false; + } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css index fc8c9f4..80fef48 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css @@ -2,15 +2,39 @@ display: flex; flex-direction: column; gap: 10px; - padding-right: 20px; - padding-left: 10px; + padding: 0 20px; min-height: calc(100vh - 80px); box-sizing: border-box; - width: 100%; + width: 260px; border-left: 2px solid var(--line); z-index: var(--index-content); } +.open-filter { + padding: 0; + display: none; + position: fixed; + outline: none; + border: none; + background: var(--input-primary); + border-radius: 100px; + right: 10px; + bottom: 10px; + overflow: hidden; + z-index: var(--index-floating); +} + +.open-filter ::deep svg { + fill: var(--white); + width: 24px; + height: 24px; + padding: 10px; +} + + .open-filter:hover ::deep svg { + background: var(--input-selected); + } + .duplicate { display: none; flex-direction: column; @@ -30,3 +54,28 @@ display: flex; } } + +@media screen and (max-width: 700px) { + .advanced-filter-container { + display: none; + } + + .open-filter { + display: flex; + } + + .advanced-filter-container { + border-radius: var(--big-radius) 0 0 var(--big-radius); + background: var(--input-primary); + border: none; + right: 0; + position: fixed; + z-index: 800; + width: auto; + height: auto; + left: 25vw; + bottom: 0; + top: 0; + padding: 60px 20px; + } +} \ 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 c8cc520..9e6343e 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 @@ -63,6 +63,12 @@ padding-right: 1px; } +@media screen and (max-width: 700px) { + .slider-container { + display: none; + } +} + @media screen and (max-width: 1000px) { .select-container { display: none; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Games.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Games.razor.css index 501965d..68ce3d2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Games.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Games.razor.css @@ -1,6 +1,5 @@ .container { - display: grid; - grid-template-columns: 1fr 240px; + display: flex; padding: 20px 0; height: fit-content; } @@ -11,4 +10,5 @@ display: flex; flex-direction: column; gap: 20px; + width: 100%; } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css index 6a501b0..20930bb 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css @@ -4,7 +4,6 @@ justify-content: space-between; align-items: flex-end; padding: 0px 10px; - height: 40px; } .icon-container { @@ -12,14 +11,14 @@ flex-direction: row; justify-content: center; align-items: center; - width: 40px; - height: 100%; cursor: pointer; + margin-right: 10px; + } .icon-container img { - max-height: 85%; - max-width: 85%; + width: 34px; + height: 34px; } .content { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor new file mode 100644 index 0000000..39c268d --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor @@ -0,0 +1,16 @@ +
+
+ @DisplayedText() +
+ @if (Text?.Length > MaxLength && !_showFullText) + { +
+ } + @if (Text?.Length > MaxLength) + { + + } +
+ diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs new file mode 100644 index 0000000..8fb9488 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs @@ -0,0 +1,25 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace GameIdeas.BlazorApp.Shared.Components.ReadMore; + +public partial class ReadMore +{ + private bool _showFullText = false; + + [Parameter] + public string? Text { get; set; } + + [Parameter] + public int MaxLength { get; set; } = 100; + + private string DisplayedText() + { + if (Text == null) return string.Empty; + if (_showFullText || Text.Length <= MaxLength) return Text; + + return Text[..MaxLength] + "..."; + } + + private void ToggleFullText() => _showFullText = !_showFullText; +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css new file mode 100644 index 0000000..1474318 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css @@ -0,0 +1,44 @@ +.button { + margin: 0 auto 10px auto; + border: none; + outline: none; + background: var(--violet); + border-radius: var(--small-radius); + z-index: var(--index-floating); + color: var(--white); + font-size: 14px; + line-height: 22px; + padding: 2px 8px; +} + + .button:hover { + background: var(--violet-selected); + } + +.text { + overflow-wrap: break-word; + margin: 0 10px; +} + +.readmore-container { + width: 100%; + position: relative; + display: flex; + flex-direction: column; + gap: 8px; + color: var(--white); + font-size: 14px; + line-height: 22px; + white-space: break-spaces; +} + +.fade-overlay { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 4.5em; + background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); + border-radius: 0 0 var(--big-radius) var(--big-radius); + pointer-events: none; +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs index 582fe1d..f3b906f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs @@ -43,4 +43,8 @@ public static class Icons public readonly static MarkupString Back = new(OpenBraket + "" + CloseBraket); + + public readonly static MarkupString Filter = new(OpenBraket + + "" + + CloseBraket); } diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs index 62ae033..20cdaf6 100644 --- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs +++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs @@ -66,6 +66,8 @@ public class Translations (TranslationService translationService) public string ConfirmDeleteDescription => translationService.Translate(nameof(ConfirmDeleteDescription)); public string Informations => translationService.Translate(nameof(Informations)); public string About => translationService.Translate(nameof(About)); + public string ReadMore => translationService.Translate(nameof(ReadMore)); + public string ReadLess => translationService.Translate(nameof(ReadLess)); } public static class ResourcesKey @@ -140,4 +142,6 @@ public static class ResourcesKey public static string ConfirmDeleteDescription => _instance?.ConfirmDeleteDescription ?? throw new InvalidOperationException("ResourcesKey.ConfirmDeleteDescription is not initialized."); public static string Informations => _instance?.Informations ?? throw new InvalidOperationException("ResourcesKey.Informations is not initialized."); public static string About => _instance?.About ?? throw new InvalidOperationException("ResourcesKey.About is not initialized."); + public static string ReadMore => _instance?.ReadMore ?? throw new InvalidOperationException("ResourcesKey.ReadMore is not initialized."); + public static string ReadLess => _instance?.ReadLess ?? throw new InvalidOperationException("ResourcesKey.ReadLess is not initialized."); } \ No newline at end of file diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs index 86a6cd6..0620bdd 100644 --- a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs +++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs @@ -23,4 +23,6 @@ public class GlobalConstants public const string SUB_DOMAIN_NAME = "api-"; public const double DELAY_INPUT_MS = 500; + + public const int MAX_DESCRIPTION_LENGTH = 350; } diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json index ec9317f..7507151 100644 --- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json +++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json @@ -61,5 +61,7 @@ "Confirm": "Confirmer", "ConfirmDeleteDescription": "Êtes-vous sur de vouloir supprimer cet élément ?", "Informations": "Informations", - "About": "À propos" + "About": "À propos", + "ReadMore": "Afficher", + "ReadLess": "Réduire" } \ No newline at end of file