Refactoring global style (#43)

Reviewed-on: #43

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 {
@@ -41,6 +41,10 @@
     gap: 34px;  
 }
 
+.pills {
+    gap: 8px;
+}
+
 .additional-informations, .platforms {
     padding: 20px;
     background: var(--input-secondary);

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
 
-<div class="advanced-filter-container">
+<div class="advanced-filter-container" style="@(ExpandedFilter ? "display: flex" : "")">
     <span class="title">@ResourcesKey.Filters</span>
 
     <div class="duplicate">
@@ -30,3 +32,10 @@
 
     <span class="title">@ResourcesKey.LastAdd</span>
 </div>
+
+<button type="button" class="open-filter" @onclick=HandleExpandFilter>
+    @Icons.Filter
+</button>
+
+<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="true"
+                AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

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

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

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;

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

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 {

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/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -43,4 +43,8 @@ public static class Icons
     public readonly static MarkupString Back = new(OpenBraket +
         "<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
         CloseBraket);
+
+    public readonly static MarkupString Filter = new(OpenBraket +
+        "<path d=\"M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z\" />" +
+        CloseBraket);
 }

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