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

Add header for game list #3

Merged
Egamorf merged 14 commits from feature/add-header-for-games-list into main 2025-02-27 01:09:05 +01:00
Conversation 0 Commits 14 Files Changed 28 +91 -31
6 changed files with 91 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 99e541083f - Show all commits

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

@@ -8,7 +8,8 @@
@Body
</div>
<span class="orb red"></span>
<span class="orb blue"></span>
<span class="orb green"></span>
</div>

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

@@ -1,41 +1,37 @@
.page {
background: var(--background);
overflow: hidden
height: 100%;
overflow: hidden;
z-index: 1;
}
.orb {
position: absolute;
border-radius: 100%;
z-index: -1;
}
.green {
position: absolute;
width: 80vh;
height: 80vh;
top: -20vh;
background: #315941;
filter: blur(30vh);
z-index: -999;
}
.blue {
position: absolute;
width: 80vw;
height: 80vw;
left: 10vw;
top: 50vh;
background: #3A4156;
filter: blur(30vh);
z-index: -999;
}
.red {
position: absolute;
width: 100vh;
height: 100vh;
left: 60vw;
top: -30vh;
top: -40vh;
background: #593533;
filter: blur(30vh);
z-index: -999;
}

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor
View File

@@ -12,18 +12,19 @@
<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 14 14">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<div class="button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<div class="second-button button" @onclick=HandleMoreAddClickedAsync>
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />
</svg>
</div>
</div>
<div class="dropdown-more-add">
<div @ref=DropdownAdd class="dropdown-container" @onfocusout=HandlerDropdownAddFocusOut tabindex="1000">
<div class="dropdown-more-add @(AddButtonsVisile ? string.Empty : "invisible")">
<div class="drowdown-more-element">
@ResourcesKey.ManualAdd
</div>
@@ -32,8 +33,9 @@
</div>
</div>
</div>
</div>
<div class="icon-container">
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<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>

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
View File

@@ -4,8 +4,22 @@ namespace GameIdeas.BlazorApp.Shared.Components;
public partial class HeaderLayout : LayoutComponentBase
{
private Task HandleIconClicked()
private bool AddButtonsVisile = false;
private ElementReference DropdownAdd;
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleMoreAddClickedAsync()
{
AddButtonsVisile = !AddButtonsVisile;
await DropdownAdd.FocusAsync();
}
private void HandlerDropdownAddFocusOut()
{
AddButtonsVisile = false;
}
}

47
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css
View File

@@ -5,7 +5,6 @@
align-items: flex-end;
padding: 0px 10px;
height: 40px;
width: 100%;
}
.icon-container {
@@ -17,6 +16,15 @@
height: 100%;
}
.icon-container img {
max-height: 85%;
max-width: 85%;
}
.icon-container:hover {
cursor: pointer;
}
.account-add-container {
display: flex;
flex-direction: row;
@@ -26,6 +34,7 @@
.add-container {
overflow: visible;
margin-right: 40px;
}
.add-buttons {
@@ -33,6 +42,7 @@
flex-direction: row;
background: var(--violet);
border-radius: var(--small-radius);
overflow: hidden;
}
.button {
@@ -44,23 +54,50 @@
}
.first-button {
border-right: 1px solid var(--line-black);
border-right: 2px solid var(--line-black);
}
.second-button .button-icon {
padding: 6px;
}
.button-icon {
color: var(--white);
fill: var(--white);
}
.button-icon:hover {
background: var(--line-black);
cursor: pointer;
}
.account-icon {
color: var(--light-grey);
fill: var(--light-grey);
}
.dropdown-more-add {
margin-top: 0px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--violet);
box-shadow: var(--drop-shadow);
border-radius: var(--small-radius);
position: fixed;
padding: 4px;
animation-name: fade-in;
animation-duration: 0.4s
}
.drowdown-more-element {
width: 100%;
width: fit-content;
}
.drowdown-more-element:hover {
color: var(--light-grey);
cursor: pointer;
}
.invisible {
display: none;
}

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

@@ -18,16 +18,21 @@
html {
font-family: 'Noto Sans', sans-serif;
font-size: 12px
font-size: 12px;
color: var(--white)
}
html, body, .app {
html, body, #app {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#app {
background: var(--background);
}
h1:focus {
outline: none;
}
@@ -138,3 +143,8 @@ code {
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}