electron-rare/electron-rare.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine mobile header UX

Browse Source
This commit is contained in:
Clément SAILLANT
2026-03-14 21:52:49 +00:00
parent bb44f068df
commit c19bfad3f8
4 changed files with 61 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lab/assets/index-Zjyw1-5g.js → lab/assets/index-CYNTQ0ay.js
+6 -6
View File
File diff suppressed because one or more lines are too long
lab/index.html
+2 -2
View File
@@ -7,8 +7,8 @@
<meta <meta
name="description" name="description"
content="Lab interactif: prototypes React Router, parcours experimentaux et idees de dispositifs immersifs." /> content="Lab interactif: prototypes React Router, parcours experimentaux et idees de dispositifs immersifs." />
<script type="module" crossorigin src="/lab/assets/index-Zjyw1-5g.js"></script> <script type="module" crossorigin src="/preview/lab/assets/index-CYNTQ0ay.js"></script>
<link rel="stylesheet" crossorigin href="/lab/assets/index-7Y0vZRJY.css"> <link rel="stylesheet" crossorigin href="/preview/lab/assets/index-7Y0vZRJY.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
src/layouts/BaseLayout.astro
+22 -1
View File
@@ -590,13 +590,34 @@ const structuredDataJsonLd = JSON.stringify({
} }
}); });
var syncRootOpenState = function () {
var isCompactViewport = window.innerWidth < 960;
var hasOpenMenu = false;
for (var i = 0; i < menus.length; i += 1) {
if (menus[i].hasAttribute('open')) {
hasOpenMenu = true;
break;
}
}
document.documentElement.classList.toggle('site-nav-open', isCompactViewport && hasOpenMenu);
};
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
if (window.innerWidth >= 768) { if (window.innerWidth >= 960) {
for (var i = 0; i < menus.length; i += 1) { for (var i = 0; i < menus.length; i += 1) {
closeMenu(menus[i]); closeMenu(menus[i]);
} }
} }
syncRootOpenState();
}); });
for (var j = 0; j < menus.length; j += 1) {
menus[j].addEventListener('toggle', syncRootOpenState);
}
syncRootOpenState();
})(); })();
</script> </script>
src/styles/global.css
+31 -14
View File
@@ -5224,6 +5224,7 @@ input.contact-minitel-textarea:focus {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; align-items: center;
position: relative;
gap: 0.75rem; gap: 0.75rem;
min-height: 4rem; min-height: 4rem;
padding-top: 0.55rem; padding-top: 0.55rem;
@@ -5250,6 +5251,7 @@ input.contact-minitel-textarea:focus {
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: end; justify-self: end;
position: relative;
gap: 0.5rem; gap: 0.5rem;
} }
@@ -5383,7 +5385,7 @@ input.contact-minitel-textarea:focus {
padding-bottom: 0.38rem; padding-bottom: 0.38rem;
} }
@media (min-width: 768px) { @media (min-width: 960px) {
.site-header-shell { .site-header-shell {
grid-template-columns: minmax(0, auto) 1fr; grid-template-columns: minmax(0, auto) 1fr;
gap: 1rem; gap: 1rem;
@@ -5433,7 +5435,7 @@ input.contact-minitel-textarea:focus {
} }
} }
@media (max-width: 767px) { @media (max-width: 959px) {
.site-header-shell { .site-header-shell {
min-height: 3.35rem; min-height: 3.35rem;
gap: 0.55rem; gap: 0.55rem;
@@ -5463,7 +5465,8 @@ input.contact-minitel-textarea:focus {
} }
.site-header-quick-link { .site-header-quick-link {
min-height: 2.45rem; min-height: 2.75rem;
height: 2.75rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -5474,10 +5477,15 @@ input.contact-minitel-textarea:focus {
} }
.site-header-menu-toggle { .site-header-menu-toggle {
min-height: 2.75rem;
height: 2.75rem;
padding-inline: 0.78rem; padding-inline: 0.78rem;
} }
.site-header-primary { .site-header-primary {
left: 0;
right: 0;
width: auto;
max-height: min(74vh, 28rem); max-height: min(74vh, 28rem);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@@ -5493,29 +5501,38 @@ input.contact-minitel-textarea:focus {
@media (max-width: 420px) { @media (max-width: 420px) {
.site-header-shell { .site-header-shell {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto;
gap: 0.42rem;
} }
.site-header-right { .site-header-right {
width: 100%; gap: 0.35rem;
justify-content: stretch;
} }
.site-header-quick-link, .site-header-brand-title {
.site-header-menu { font-size: 0.92rem;
flex: 1 1 0;
} }
.site-header-quick-link, .site-header-quick-link,
.site-header-menu-toggle { .site-header-menu-toggle {
width: 100%; min-height: 2.55rem;
height: 2.55rem;
} }
.site-header-primary { .site-header-quick-link {
width: 100%; padding-inline: 0.72rem;
left: 0; font-size: 0.62rem;
right: auto; letter-spacing: 0.06em;
} }
.site-header-menu-toggle {
padding-inline: 0.7rem;
}
}
html.site-nav-open,
html.site-nav-open body {
overflow: hidden;
} }
:root[data-da-variant="v12"] .site-header-brand { :root[data-da-variant="v12"] .site-header-brand {