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
 
 <HeaderGameIdeas>
@@ -18,7 +20,7 @@
 
 
     <div class="section col-2">
-        <span class="description">@Game.Description</span>
+        <ReadMore Text="@Game.Description" MaxLength="GlobalConstants.MAX_DESCRIPTION_LENGTH" />
 
         <div class="medias"></div>
     </div>

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 {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor

@@ -0,0 +1,16 @@
+<div class="readmore-container">
+    <div class="text">
+        @DisplayedText()
+    </div>
+    @if (Text?.Length > MaxLength && !_showFullText)
+    {
+        <div class="fade-overlay"></div>
+    }
+    @if (Text?.Length > MaxLength)
+    {
+        <button type="button" class="button" @onclick=ToggleFullText>
+            @(_showFullText ? @ResourcesKey.ReadLess : @ResourcesKey.ReadMore)
+        </button>
+    }
+</div>
+

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;
+}

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;
+}

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.");
 }

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;
 }

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"
 }