2025-04-08 16:10:01 +02:00
18 changed files with 113 additions and 123 deletions
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -1,8 +1,7 @@
 .page {
    display: flex;
    flex-direction: column;
-    max-height: 100vh;
-    height: 100vh;
+    height: 100%;
 }

 .orb {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -2,11 +2,9 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SliderRange
+@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Shared.Dto
-@using GameIdeas.BlazorApp.Pages.Games.Models

-
-<EditForm EditContext="EditContext">
 <div class="form-filter">
    <SelectList TItem="Func<GameDto, object>"
                Headers="SortTypes"
@@ -14,13 +12,11 @@
                @bind-Value=GameFilterParams!.SortProperty
                HeaderChanged=HandleSortTypeChanged
                Theme="SelectListTheme.Sort">
-            <Button>
        <div class="square-button">
            <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
            </svg>
        </div>
-            </Button>
    </SelectList>

    <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
@@ -62,7 +58,5 @@
                        @bind-Min=GameFilterParams.MinRating />
    </div>
 </div>
-</EditForm>
-


--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
@@ -1,6 +1,6 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.BlazorApp.Shared.Components.SliderRange;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Shared.Dto;
 using GameIdeas.Shared.Enum;
 using Microsoft.AspNetCore.Components;
@@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;

 public partial class GameFilter
 {
-    [Parameter] public GameFilterParams? GameFilterParams { get; set; }
+    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
    [Parameter] public DisplayType DisplayType { get; set; }
    [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
@@ -45,7 +45,7 @@ public partial class GameFilter

    protected override void OnInitialized()
    {
-        EditContext = new EditContext(GameFilterParams!);
+        EditContext = new EditContext(GameFilterParams);
        EditContext.OnFieldChanged += async (s, e) =>
        {
            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
@@ -54,7 +54,7 @@ public partial class GameFilter

    private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
    {
-        GameFilterParams!.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
+        GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
    }

    private async Task HandleDisplayClicked(DisplayType displayType)
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
@@ -1,20 +1,18 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Filter
+@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Shared.Components
-@using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources

@layout MainLayout

 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>

-<HeaderLayout>
-    <Body>
+<GamesHeader>
    <GameFilter @bind-DisplayType=DisplayType
                @bind-GameFilterParams=GameFilterParams />
-    </Body>
-</HeaderLayout>
+</GamesHeader>

 <div class="container">
    <div class="content">
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
@@ -1,5 +1,5 @@
 using GameIdeas.BlazorApp.Pages.Games.Filter;
-using GameIdeas.BlazorApp.Pages.Games.Models;
+using GameIdeas.BlazorApp.Shared.Models;

 namespace GameIdeas.BlazorApp.Pages.Games;

--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
@@ -1,5 +1,6 @@
 .container {
    margin-top: 20px;
+    margin-bottom: 10px;
    justify-content: space-between;
    display: flex;
    flex-direction: row;
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor
@@ -1,18 +1,18 @@
@using GameIdeas.BlazorApp.Pages.Games
-@using GameIdeas.BlazorApp.Pages.Games.Models
@using GameIdeas.BlazorApp.Shared.Components.Account
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Resources

-@inherits LayoutComponentBase
+@inherits ComponentBase

 <div class="header-tab">
    <div class="icon-container" @onclick="HandleIconClicked">
        <img src="icon.png" alt="Game Ideas">
    </div>

-    @Body
+    @ChildContent

    <div class="account-add-container">
        <div class="add-container">
@@ -27,13 +27,11 @@
                            ValueChanged=HandleAddTypeClickedAsync
                            Theme="SelectListTheme.Navigation"
                            AlignRight=true>
-                    <Button>
                    <div class="second-button button">
                        <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M1 3H23L12 22" />
                        </svg>
                    </div>
-                    </Button>
                </SelectList>
            </div>
        </div>
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs
@@ -1,14 +1,16 @@
-using GameIdeas.BlazorApp.Pages.Games.Models;
 using GameIdeas.BlazorApp.Shared.Components.Account;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;

-namespace GameIdeas.BlazorApp.Shared.Layouts.Header;
+namespace GameIdeas.BlazorApp.Pages.Games.Header;

-public partial class HeaderLayout : LayoutComponentBase
+public partial class GamesHeader : ComponentBase
 {
    [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+

    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
        new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css
@@ -5,7 +5,6 @@
    align-items: flex-end;
    padding: 0px 10px;
    height: 40px;
-    z-index: var(--index-layout)
 }

 .icon-container {
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum AddType
-{
-    Manual,
-    Auto
-}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
@@ -1,7 +0,0 @@
-namespace GameIdeas.BlazorApp.Pages.Games.Models;
-
-public enum DisplayType
-{
-    Card,
-    List
-}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
@@ -13,6 +13,11 @@
    justify-content: space-between;
 }

+.buttons {
+    display: flex;
+    align-items: center;
+}
+
 ::deep .search-field {
    border: none !important;
    outline: none !important;
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
@@ -24,6 +24,7 @@ public partial class MultipleSelectList<TItem>
        SearchInput?.SetText(string.Join(", ", Values));

        await ValuesChanged.InvokeAsync(Values);
+        StateHasChanged();
    }

    private async Task HandleTextChanged()
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
@@ -1,15 +1,14 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
@typeparam TItem

 <div class="select-list" @onclick=HandleButtonClicked>
    <div class="select-button">
-        @Button
+        @ChildContent
    </div>
-    <div @ref=Container @onfocusout=HandleFocusOut
-        class="select-container @(AlignRight ? "align-right" : "")" 
-        tabindex="1000">

-        @if (ContentVisile)
+    <div class="select-container @(AlignRight ? "align-right" : "")">
+        @if (IsContentOpen)
        {
            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
                @foreach (var item in Headers)
@@ -35,3 +34,6 @@
    </div>
 </div>

+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
+
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
@@ -5,7 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Select;

 public partial class SelectList<TItem> 
 {
-    [Parameter] public RenderFragment? Button { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public TItem? Value { get; set; }
    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
    [Parameter] public TItem? Header { get; set; }
@@ -15,27 +15,16 @@ public partial class SelectList<TItem>
    [Parameter] public SelectListTheme Theme { get; set; }
    [Parameter] public bool AlignRight { get; set; }

-    private bool ContentVisile = false;
-    private DateTime ContentLastFocusOut = DateTime.Now;
-    private ElementReference Container;
+    private bool IsContentOpen = false;

-    public async Task OpenAsync()
+    private void HandleButtonClicked()
    {
-        if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
-        {
-            await Container.FocusAsync();
-            ContentVisile = true;
-        }
+        IsContentOpen = !IsContentOpen;
    }

-    public void Close() => ContentVisile = false;
-
-    private async Task HandleButtonClicked() => await OpenAsync();
-
-    private void HandleFocusOut()
+    private void HandleContentClosed()
    {
-        ContentLastFocusOut = DateTime.Now;
-        ContentVisile = false;
+        IsContentOpen = false;
    }

    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
@@ -46,6 +35,7 @@ public partial class SelectList<TItem>
        }

        selectedValue.IsSelected = true;
+
        Value = selectedValue.Item;
        await ValueChanged.InvokeAsync(Value);
    }
@@ -58,6 +48,7 @@ public partial class SelectList<TItem>
        }

        selectedValue.IsSelected = true;
+
        Header = selectedValue.Item;
        await HeaderChanged.InvokeAsync(Header);
    }
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum AddType
+{
+    Manual,
+    Auto
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs
@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Models;
+
+public enum DisplayType
+{
+    Card,
+    List
+}
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
@@ -22,7 +22,6 @@
    --index-background: -100;
    --index-orb: -1;
    --index-content: 0;
-    --index-layout: 100;
    --index-component: 300;
    --index-floating: 500;
    --index-backdrop: 700;
@@ -33,7 +32,8 @@
 html {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
-    color: var(--white)
+    color: var(--white);
+    overflow: hidden;
 }

 html, body, #app {