From 58588012ae326e283c0bc6d5162e23ee27348269 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Tue, 6 May 2025 21:50:58 +0200 Subject: [PATCH] Update style --- .../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/Constants/Icons.cs | 4 ++ 7 files changed, 91 insertions(+), 12 deletions(-) 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/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); }