PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor header and base page
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 39s
Details

Browse Source
This commit is contained in:
Maxime Adler
2025-04-08 14:28:33 +02:00
parent 778b123c64
commit 7cd289fc5d
18 changed files with 113 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
View File

@@ -1,8 +1,7 @@
.page { .page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 100vh; height: 100%;
height: 100vh;
} }
.orb { .orb {

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
View File

@@ -2,11 +2,9 @@
@using GameIdeas.BlazorApp.Shared.Components.Select @using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models @using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SliderRange @using GameIdeas.BlazorApp.Shared.Components.SliderRange
@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Shared.Dto @using GameIdeas.Shared.Dto
@using GameIdeas.BlazorApp.Pages.Games.Models
<EditForm EditContext="EditContext">
<div class="form-filter"> <div class="form-filter">
<SelectList TItem="Func<GameDto, object>" <SelectList TItem="Func<GameDto, object>"
Headers="SortTypes" Headers="SortTypes"
@@ -14,13 +12,11 @@
@bind-Value=GameFilterParams!.SortProperty @bind-Value=GameFilterParams!.SortProperty
HeaderChanged=HandleSortTypeChanged HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort"> Theme="SelectListTheme.Sort">
<Button>
<div class="square-button"> <div class="square-button">
<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <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" /> <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
</svg> </svg>
</div> </div>
</Button>
</SelectList> </SelectList>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))"> <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
@@ -62,7 +58,5 @@
@bind-Min=GameFilterParams.MinRating /> @bind-Min=GameFilterParams.MinRating />
</div> </div>
</div> </div>
</EditForm>

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
View File

@@ -1,6 +1,6 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
using GameIdeas.BlazorApp.Shared.Components.Select.Models; using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.SliderRange; using GameIdeas.BlazorApp.Shared.Components.SliderRange;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Shared.Dto; using GameIdeas.Shared.Dto;
using GameIdeas.Shared.Enum; using GameIdeas.Shared.Enum;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
@@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter 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 EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public DisplayType DisplayType { get; set; } [Parameter] public DisplayType DisplayType { get; set; }
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; } [Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
@@ -45,7 +45,7 @@ public partial class GameFilter
protected override void OnInitialized() protected override void OnInitialized()
{ {
EditContext = new EditContext(GameFilterParams!); EditContext = new EditContext(GameFilterParams);
EditContext.OnFieldChanged += async (s, e) => EditContext.OnFieldChanged += async (s, e) =>
{ {
await GameFilterParamsChanged.InvokeAsync(GameFilterParams); await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
@@ -54,7 +54,7 @@ public partial class GameFilter
private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader) 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) private async Task HandleDisplayClicked(DisplayType displayType)

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
View File

@@ -1,20 +1,18 @@
@page "/Games" @page "/Games"
@using GameIdeas.BlazorApp.Layouts @using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Filter @using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Shared.Components @using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources @using GameIdeas.Resources
@layout MainLayout @layout MainLayout
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle> <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<HeaderLayout> <GamesHeader>
<Body>
<GameFilter @bind-DisplayType=DisplayType <GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams /> @bind-GameFilterParams=GameFilterParams />
</Body> </GamesHeader>
</HeaderLayout>
<div class="container"> <div class="container">
<div class="content"> <div class="content">

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
View File

@@ -1,5 +1,5 @@
using GameIdeas.BlazorApp.Pages.Games.Filter; using GameIdeas.BlazorApp.Pages.Games.Filter;
using GameIdeas.BlazorApp.Pages.Games.Models; using GameIdeas.BlazorApp.Shared.Models;
namespace GameIdeas.BlazorApp.Pages.Games; namespace GameIdeas.BlazorApp.Pages.Games;

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
View File

@@ -1,5 +1,6 @@
.container { .container {
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px;
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor → src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor
View File

@@ -1,18 +1,18 @@
@using GameIdeas.BlazorApp.Pages.Games @using GameIdeas.BlazorApp.Pages.Games
@using GameIdeas.BlazorApp.Pages.Games.Models
@using GameIdeas.BlazorApp.Shared.Components.Account @using GameIdeas.BlazorApp.Shared.Components.Account
@using GameIdeas.BlazorApp.Shared.Components.Select @using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models @using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Resources @using GameIdeas.Resources
@inherits LayoutComponentBase @inherits ComponentBase
<div class="header-tab"> <div class="header-tab">
<div class="icon-container" @onclick="HandleIconClicked"> <div class="icon-container" @onclick="HandleIconClicked">
<img src="icon.png" alt="Game Ideas"> <img src="icon.png" alt="Game Ideas">
</div> </div>
@Body @ChildContent
<div class="account-add-container"> <div class="account-add-container">
<div class="add-container"> <div class="add-container">
@@ -27,13 +27,11 @@
ValueChanged=HandleAddTypeClickedAsync ValueChanged=HandleAddTypeClickedAsync
Theme="SelectListTheme.Navigation" Theme="SelectListTheme.Navigation"
AlignRight=true> AlignRight=true>
<Button>
<div class="second-button button"> <div class="second-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" /> <path d="M1 3H23L12 22" />
</svg> </svg>
</div> </div>
</Button>
</SelectList> </SelectList>
</div> </div>
</div> </div>

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.cs → src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs
View File

@@ -1,14 +1,16 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
using GameIdeas.BlazorApp.Shared.Components.Account; using GameIdeas.BlazorApp.Shared.Components.Account;
using GameIdeas.BlazorApp.Shared.Components.Select.Models; using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Resources; using GameIdeas.Resources;
using Microsoft.AspNetCore.Components; 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 EventCallback<AddType> AddTypeChanged { get; set; }
[Parameter] public RenderFragment? ChildContent { get; set; }
private readonly IEnumerable<SelectElement<AddType>> SelectElements = [ private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd }, new SelectElement<AddType> { Item = AddType.Manual, Label = ResourcesKey.ManualAdd },

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css → src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css
View File

@@ -5,7 +5,6 @@
align-items: flex-end; align-items: flex-end;
padding: 0px 10px; padding: 0px 10px;
height: 40px; height: 40px;
z-index: var(--index-layout)
} }
.icon-container { .icon-container {

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AddType.cs
View File

@@ -1,7 +0,0 @@
namespace GameIdeas.BlazorApp.Pages.Games.Models;
public enum AddType
{
Manual,
Auto
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs
View File

@@ -1,7 +0,0 @@
namespace GameIdeas.BlazorApp.Pages.Games.Models;
public enum DisplayType
{
Card,
List
}

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css
View File

@@ -13,6 +13,11 @@
justify-content: space-between; justify-content: space-between;
} }
.buttons {
display: flex;
align-items: center;
}
::deep .search-field { ::deep .search-field {
border: none !important; border: none !important;
outline: none !important; outline: none !important;

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs
View File

@@ -24,6 +24,7 @@ public partial class MultipleSelectList<TItem>
SearchInput?.SetText(string.Join(", ", Values)); SearchInput?.SetText(string.Join(", ", Values));
await ValuesChanged.InvokeAsync(Values); await ValuesChanged.InvokeAsync(Values);
StateHasChanged();
} }
private async Task HandleTextChanged() private async Task HandleTextChanged()

14
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor
View File

@@ -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 @typeparam TItem
<div class="select-list" @onclick=HandleButtonClicked> <div class="select-list" @onclick=HandleButtonClicked>
<div class="select-button"> <div class="select-button">
@Button @ChildContent
</div> </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())"> <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
@foreach (var item in Headers) @foreach (var item in Headers)
@@ -35,3 +34,6 @@
</div> </div>
</div> </div>
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
IsVisible=IsContentOpen OnClick="HandleContentClosed" />

25
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
View File

@@ -5,7 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Select;
public partial class SelectList<TItem> 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 TItem? Value { get; set; }
[Parameter] public EventCallback<TItem?> ValueChanged { get; set; } [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
[Parameter] public TItem? Header { 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 SelectListTheme Theme { get; set; }
[Parameter] public bool AlignRight { get; set; } [Parameter] public bool AlignRight { get; set; }
private bool ContentVisile = false; private bool IsContentOpen = false;
private DateTime ContentLastFocusOut = DateTime.Now;
private ElementReference Container;
public async Task OpenAsync() private void HandleButtonClicked()
{ {
if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2)) IsContentOpen = !IsContentOpen;
{
await Container.FocusAsync();
ContentVisile = true;
}
} }
public void Close() => ContentVisile = false; private void HandleContentClosed()
private async Task HandleButtonClicked() => await OpenAsync();
private void HandleFocusOut()
{ {
ContentLastFocusOut = DateTime.Now; IsContentOpen = false;
ContentVisile = false;
} }
private async Task HandleItemClicked(SelectElement<TItem> selectedValue) private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
@@ -46,6 +35,7 @@ public partial class SelectList<TItem>
} }
selectedValue.IsSelected = true; selectedValue.IsSelected = true;
Value = selectedValue.Item; Value = selectedValue.Item;
await ValueChanged.InvokeAsync(Value); await ValueChanged.InvokeAsync(Value);
} }
@@ -58,6 +48,7 @@ public partial class SelectList<TItem>
} }
selectedValue.IsSelected = true; selectedValue.IsSelected = true;
Header = selectedValue.Item; Header = selectedValue.Item;
await HeaderChanged.InvokeAsync(Header); await HeaderChanged.InvokeAsync(Header);
} }

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/AddType.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.BlazorApp.Shared.Models;
public enum AddType
{
Manual,
Auto
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Models/DisplayType.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.BlazorApp.Shared.Models;
public enum DisplayType
{
Card,
List
}

4
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -22,7 +22,6 @@
--index-background: -100; --index-background: -100;
--index-orb: -1; --index-orb: -1;
--index-content: 0; --index-content: 0;
--index-layout: 100;
--index-component: 300; --index-component: 300;
--index-floating: 500; --index-floating: 500;
--index-backdrop: 700; --index-backdrop: 700;
@@ -33,7 +32,8 @@
html { html {
font-family: 'Noto Sans', sans-serif; font-family: 'Noto Sans', sans-serif;
font-size: 12px; font-size: 12px;
color: var(--white) color: var(--white);
overflow: hidden;
} }
html, body, #app { html, body, #app {