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 {
@@ -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/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%;
 }