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 0000000..61a7c68 Binary files /dev/null and b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/default-account.png differ diff --git a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs index d1c2bdd..6ac7586 100644 --- a/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs +++ b/src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs @@ -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."); } \ 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