From 0c21e853f3f766b340148502b8bb8a1b12f39121 Mon Sep 17 00:00:00 2001 From: Maxime Adler Date: Fri, 21 Feb 2025 16:03:03 +0100 Subject: [PATCH] Add content for header --- .../Shared/Components/Header.razor | 39 ++- .../Shared/Components/Header.razor.cs | 3 + .../Shared/Components/Header.razor.css | 257 ++++++++++++++++++ .../GameIdeas.BlazorApp/wwwroot/css/app.css | 18 +- .../wwwroot/default-account.png | Bin 0 -> 6408 bytes .../CreateStaticResourceKey.cs | 4 + .../GameIdeas.WebAPI/Files/GameIdeas.fr.json | 4 +- 7 files changed, 320 insertions(+), 5 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/default-account.png diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor index 5db584e..347d232 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor @@ -1,5 +1,38 @@ -
-
+@using GameIdeas.Resources +@inherits ComponentBase + +
+
Game Ideas
-
\ No newline at end of file +
+ @Body +
+ +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs index e1036dc..6587063 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs @@ -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() { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css new file mode 100644 index 0000000..f9a0ebd --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css @@ -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; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index 9390d91..7b0ac83 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -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 } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/default-account.png b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/default-account.png new file mode 100644 index 0000000000000000000000000000000000000000..61a7c68f4a11702f2a01f8ee60317d407b14bf7d GIT binary patch literal 6408 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 yO=vtI 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."); } \ No newline at end of file diff --git a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json index 83fbcd7..022260c 100644 --- a/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json +++ b/src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json @@ -1,3 +1,5 @@ { - "GamesIdeas": "Game Ideas" + "GamesIdeas": "Game Ideas", + "ManualAdd": "Ajout manuel", + "AutoAdd": "Ajout automatique" } \ No newline at end of file