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

Add content for header

Browse Source
This commit is contained in:
Maxime Adler
2025-02-21 16:03:03 +01:00
parent 4f04f61df6
commit 0c21e853f3
7 changed files with 320 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor
View File

@@ -1,5 +1,38 @@
<div class="header-tab">
<div class="icon" @onclick="HandleIconClicked">
@using GameIdeas.Resources
@inherits ComponentBase
<div class="header-tab">
<div class="header-icon" @onclick="HandleIconClicked">
<img src="icon.png" alt="Game Ideas">
</div>
</div>
<div class="header-body">
@Body
</div>
<div class="account-container">
<div class="add-container">
<div class="manual-add button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<div class="more-add button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M1 3H23L12 22" />
</svg>
</div>
<div class="dropdown-more-add">
<div class="drowdown-more-element">
@ResourcesKey.ManualAdd
</div>
<div class="drowdown-more-element">
@ResourcesKey.AutoAdd
</div>
</div>
</div>
<div class="account-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<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>
</div>
</div>

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs
View File

@@ -1,7 +1,10 @@
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components;
public partial class Header
{
[Parameter] public RenderFragment? Body { get; set; }
private Task HandleIconClicked()
{

257
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css Normal file
View File

@@ -0,0 +1,257 @@
.header-tab {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 10px;
height: 40px;
width: 100%;
}
.header-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
width: 40%;
height: 100%;
}
.header-body {
}
.account-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.button-icon {
color: var(--white);
}
.account-icon {
}
.add-container {
}
.button {
}
.manual-add {
}
.more-add {
}
.dropdown-more-add {
}
.drowdown-more-element {
}
/* Frame */
/* Auto layout */
padding: 0px;
gap: 40px;
width: 136px;
height: 40px;
/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;
/* Frame 9 */
width: 56px;
height: 28px;
/* Violet */
background: #A380D1;
border-radius: 4px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Frame 55 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 10px;
position: absolute;
width: 132px;
height: 56px;
left: 0px;
top: 28px;
/* Violet */
background: #A380D1;
box-shadow:
border-radius: 4px;
/* Frame 56 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
gap: 10px;
width: 132px;
height: 56px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Ajout manuel */
width: 89px;
height: 19px;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Ajout automatique */
width: 124px;
height: 19px;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
/* Frame */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
position: absolute;
width: 28px;
height: 28px;
left: 0px;
top: 0px;
/* Frame 10 */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
width: 16px;
height: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Frame */
width: 24px;
height: 24px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Vector */
position: absolute;
left: 20.83%;
right: 20.83%;
top: 20.83%;
bottom: 20.83%;
/* White */
background: #FFFFFF;
/* Line 5 */
position: absolute;
width: 28px;
height: 0px;
left: 28px;
top: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
transform: rotate(90deg);
/* Frame */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
position: absolute;
width: 28px;
height: 28px;
left: 28px;
top: 0px;
/* Frame 10 */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
width: 16px;
height: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Polygon 11 */
width: 16px;
height: 10px;
/* White */
background: #FFFFFF;
transform: rotate(-180deg);
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
/* Icon account */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
width: 40px;
height: 40px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
/* Vector */
width: 32px;
height: 32px;
/* Light black */
background: #5C5C5E;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;

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

@@ -1,15 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
:root {
--background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
--violet: #A380D1;
--red: #FF5E51;
--yellow: #FFC107;
--green: #43F8C0;
--light-grey: #5C5C5E;
--black: rgba(44, 43, 46, 0.8);
--white: #fff;
--semi-black: rgba(0, 0, 0, 0.5);
--small-radius: 4px;
--radius: 6px;
--drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Noto Sans', sans-serif;
font-size: 12rem
}
body {
background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
background: var(--background);
overflow: hidden
}

BIN
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/default-account.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

4
src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
View File

@@ -4,6 +4,8 @@ namespace GameIdeas.Resources;
public class Translations (TranslationService translationService)
{
public string GamesIdeas => translationService.Translate(nameof(GamesIdeas));
public string ManualAdd => translationService.Translate(nameof(ManualAdd));
public string AutoAdd => translationService.Translate(nameof(AutoAdd));
}
public static class ResourcesKey
@@ -16,4 +18,6 @@ public static class ResourcesKey
}
public static string GamesIdeas => _instance?.GamesIdeas ?? throw new InvalidOperationException("ResourcesKey.GamesIdeas is not initialized.");
public static string ManualAdd => _instance?.ManualAdd ?? throw new InvalidOperationException("ResourcesKey.ManualAdd is not initialized.");
public static string AutoAdd => _instance?.AutoAdd ?? throw new InvalidOperationException("ResourcesKey.AutoAdd is not initialized.");
}

4
src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
View File

@@ -1,3 +1,5 @@
{
"GamesIdeas": "Game Ideas"
"GamesIdeas": "Game Ideas",
"ManualAdd": "Ajout manuel",
"AutoAdd": "Ajout automatique"
}