christophe/chesscubing
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fixer la barre de menu en haut de page

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-13 23:45:18 +02:00
parent e3d0a9faf2
commit 53f0af761e
2 changed files with 26 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ChessCubing.App/Layout/MainLayout.razor
View File

@@ -4,9 +4,14 @@
@if (!HideGlobalMenu) @if (!HideGlobalMenu)
{ {
<SiteMenu /> <SiteMenu />
<main class="site-layout-body">
@Body
</main>
}
else
{
@Body
} }
@Body
@code { @code {
private bool HideGlobalMenu private bool HideGlobalMenu

29
styles.css
View File

@@ -18,6 +18,7 @@
--success: #ffb13a; --success: #ffb13a;
--shadow: 0 18px 48px rgba(0, 0, 0, 0.38); --shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
--radius: 28px; --radius: 28px;
--site-menu-offset: calc(6.9rem + var(--safe-top));
--safe-top: env(safe-area-inset-top, 0px); --safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px); --safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
@@ -1023,29 +1024,34 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
padding: 1.2rem 0 2rem; padding: 1.2rem 0 2rem;
} }
.site-layout-body {
padding-top: var(--site-menu-offset);
}
.site-menu-shell { .site-menu-shell {
position: sticky; position: fixed;
top: calc(var(--safe-top) + 0.75rem); inset: 0 0 auto 0;
z-index: 40; z-index: 40;
width: min(1220px, calc(100% - 2rem)); width: 100%;
margin: 0 auto; margin: 0;
padding: 1rem 0 0; padding: var(--safe-top) 0 0;
} }
.site-menu-bar { .site-menu-bar {
border: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border);
border-radius: 26px;
background: rgba(14, 16, 21, 0.9); background: rgba(14, 16, 21, 0.9);
box-shadow: var(--shadow); box-shadow: none;
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
} }
.site-menu-main { .site-menu-main {
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr) auto;
width: min(1220px, calc(100% - 2rem));
margin: 0 auto;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem 1.2rem; padding: 1rem 0;
} }
.site-menu-brand { .site-menu-brand {
@@ -1474,6 +1480,10 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
} }
@media (max-width: 900px) { @media (max-width: 900px) {
:root {
--site-menu-offset: calc(12.5rem + var(--safe-top));
}
.phase-body { .phase-body {
overflow-y: auto; overflow-y: auto;
} }
@@ -1483,7 +1493,6 @@ body[data-page="cube"] .zone-button.cube-hold-ready::after {
overscroll-behavior: none; overscroll-behavior: none;
} }
.site-menu-shell,
.setup-shell, .setup-shell,
.phase-shell, .phase-shell,
.rules-shell { .rules-shell {