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

Refactor: Update style and dropdown (#10)

Browse Source 
Co-authored-by: Maxime Adler <madler@sqli.com>
Reviewed-on: #10
This commit was merged in pull request #10.
This commit is contained in:
Egamorf
2025-04-08 16:10:01 +02:00
parent 003f2547a3
commit 3d5056ce91
38 changed files with 426 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@ public partial class AdvancedGameFilter
new() { Item = "Electronic Arts", Label = "Electronic Arts" },
new() { Item = "Ubisoft", Label = "Ubisoft" },
new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
new() { Item = "Bethesda", Label = "Bethesda" },
new() { Item = "Bethesda", Label = "Bethesda" }
];
private readonly IEnumerable<SelectElement<string>> Developers = [

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css
View File

@@ -2,10 +2,13 @@
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 20px;
padding-right: 20px;
padding-left: 10px;
height: 100%;
border-left: 2px solid var(--light-grey);
box-sizing: border-box;
width: 240px;
border-left: 2px solid var(--line);
z-index: var(--index-component);
}
.duplicate {

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

@@ -2,67 +2,61 @@
@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"
Items="GameProperties"
@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))">
<svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
<div class="form-filter">
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams!.SortProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<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>
</SelectList>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
<svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
</svg>
</div>
<div class="search-container">
<SearchInput @bind-Text=GameFilterParams.SearchName
Placeholder="@ResourcesKey.Research" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Plateforms"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Plateforms
Theme="SelectListTheme.Filter" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Genres
Theme="SelectListTheme.Filter" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=GameFilterParams.MaxRating
@bind-Min=GameFilterParams.MinRating />
</div>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
<svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
</svg>
</div>
</EditForm>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
<svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
</svg>
</div>
<div class="search-container">
<SearchInput @bind-Text=GameFilterParams.SearchName
Placeholder="@ResourcesKey.Research" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Plateforms"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Plateforms
Theme="SelectListTheme.Filter" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Genres
Theme="SelectListTheme.Filter" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=GameFilterParams.MaxRating
@bind-Min=GameFilterParams.MinRating />
</div>
</div>

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.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)

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

@@ -3,6 +3,7 @@
flex-direction: row;
gap: 8px;
align-items: center;
z-index: var(--index-component);
}
.search-container {
@@ -26,7 +27,7 @@
width: 28px;
min-width: 28px;
border-radius: var(--small-radius);
background: var(--black);
background: var(--input-primary);
overflow: hidden;
}
@@ -40,7 +41,7 @@
.square-button svg:hover {
cursor: pointer;
background: var(--low-white);
background: var(--input-selected);
}
.selected-icon {

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

@@ -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>
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
</Body>
</HeaderLayout>
<GamesHeader>
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
</GamesHeader>
<div class="container">
<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.Models;
using GameIdeas.BlazorApp.Shared.Models;
namespace GameIdeas.BlazorApp.Pages.Games;

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

@@ -1,5 +1,6 @@
.container {
margin-top: 20px;
margin-bottom: 10px;
justify-content: space-between;
display: flex;
flex-direction: row;
@@ -7,5 +8,5 @@
}
.content {
z-index: var(--index-content);
}

47
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor Normal file
View File

@@ -0,0 +1,47 @@
@using GameIdeas.BlazorApp.Pages.Games
@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 ComponentBase
<div class="header-tab">
<div class="icon-container" @onclick="HandleIconClicked">
<img src="icon.png" alt="Game Ideas">
</div>
@ChildContent
<div class="account-add-container">
<div class="add-container">
<div class="add-buttons">
<div class="first-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<SelectList TItem="AddType"
Items="SelectElements"
ValueChanged=HandleAddTypeClickedAsync
Theme="SelectListTheme.Navigation"
AlignRight=true>
<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>
</SelectList>
</div>
</div>
<div class="account-container">
<div class="icon-container" @onclick=HandleAccountClicked>
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
<AccountSettings @ref="AccountSettings" />
</div>
</div>
</div>

36
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.cs Normal file
View File

@@ -0,0 +1,36 @@
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.Pages.Games.Header;
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 },
new SelectElement<AddType> { Item = AddType.Auto, Label = ResourcesKey.AutoAdd }
];
private AccountSettings? AccountSettings;
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleAddTypeClickedAsync(AddType value)
{
await AddTypeChanged.InvokeAsync(value);
}
private void HandleAccountClicked()
{
AccountSettings?.Toggle();
}
}

77
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GamesHeader.razor.css Normal file
View File

@@ -0,0 +1,77 @@
.header-tab {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 10px;
height: 40px;
}
.icon-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 100%;
}
.icon-container img {
max-height: 85%;
max-width: 85%;
}
.icon-container:hover {
cursor: pointer;
}
.account-add-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.add-container {
margin-right: 40px;
}
.add-buttons {
display: flex;
flex-direction: row;
background: var(--violet);
border-radius: var(--small-radius);
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
}
.first-button {
border-right: 2px solid var(--violet-selected);
border-radius: var(--small-radius) 0 0 var(--small-radius);
overflow: hidden;
}
.second-button .button-icon {
padding: 6px;
border-radius: 0 var(--small-radius) var(--small-radius) 0;
overflow: hidden;
}
.button-icon {
fill: var(--white);
}
.button-icon:hover {
background: var(--violet-selected);
cursor: pointer;
}
.account-icon {
fill: var(--line);
}

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
}