From 7c0adb1c58efe6d1f635b0c2052646c1ce8db5ba Mon Sep 17 00:00:00 2001 From: Egamorf Date: Tue, 6 May 2025 01:15:52 +0200 Subject: [PATCH] Add read more description --- .../Pages/Detail/GameDetail.razor | 4 +- .../Pages/Detail/GameDetail.razor.css | 8 +++- .../Shared/Components/ReadMore/ReadMore.razor | 16 +++++++ .../Components/ReadMore/ReadMore.razor.cs | 25 +++++++++++ .../Components/ReadMore/ReadMore.razor.css | 44 +++++++++++++++++++ .../CreateStaticResourceKey.cs | 4 ++ .../Constants/GlobalConstants.cs | 2 + .../GameIdeas.WebAPI/Files/GameIdeas.fr.json | 4 +- 8 files changed, 103 insertions(+), 4 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/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/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