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
name="description"
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>
<link rel="stylesheet" crossorigin href="/lab/assets/index-7Y0vZRJY.css">
<script type="module" crossorigin src="/preview/lab/assets/index-CYNTQ0ay.js"></script>
<link rel="stylesheet" crossorigin href="/preview/lab/assets/index-7Y0vZRJY.css">
</head>
<body>
<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 () {
if (window.innerWidth >= 768) {
if (window.innerWidth >= 960) {
for (var i = 0; i < menus.length; i += 1) {
closeMenu(menus[i]);
}
}
syncRootOpenState();
});
for (var j = 0; j < menus.length; j += 1) {
menus[j].addEventListener('toggle', syncRootOpenState);
}
syncRootOpenState();
})();
</script>
src/styles/global.css
+31 -14
View File
@@ -5224,6 +5224,7 @@ input.contact-minitel-textarea:focus {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
position: relative;
gap: 0.75rem;
min-height: 4rem;
padding-top: 0.55rem;
@@ -5250,6 +5251,7 @@ input.contact-minitel-textarea:focus {
display: flex;
align-items: center;
justify-self: end;
position: relative;
gap: 0.5rem;
}
@@ -5383,7 +5385,7 @@ input.contact-minitel-textarea:focus {
padding-bottom: 0.38rem;
}
@media (min-width: 768px) {
@media (min-width: 960px) {
.site-header-shell {
grid-template-columns: minmax(0, auto) 1fr;
gap: 1rem;
@@ -5433,7 +5435,7 @@ input.contact-minitel-textarea:focus {
}
}
@media (max-width: 767px) {
@media (max-width: 959px) {
.site-header-shell {
min-height: 3.35rem;
gap: 0.55rem;
@@ -5463,7 +5465,8 @@ input.contact-minitel-textarea:focus {
}
.site-header-quick-link {
min-height: 2.45rem;
min-height: 2.75rem;
height: 2.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -5474,10 +5477,15 @@ input.contact-minitel-textarea:focus {
}
.site-header-menu-toggle {
min-height: 2.75rem;
height: 2.75rem;
padding-inline: 0.78rem;
}
.site-header-primary {
left: 0;
right: 0;
width: auto;
max-height: min(74vh, 28rem);
overflow: auto;
-webkit-overflow-scrolling: touch;
@@ -5493,29 +5501,38 @@ input.contact-minitel-textarea:focus {
@media (max-width: 420px) {
.site-header-shell {
grid-template-columns: minmax(0, 1fr);
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.42rem;
}
.site-header-right {
width: 100%;
justify-content: stretch;
gap: 0.35rem;
}
.site-header-quick-link,
.site-header-menu {
flex: 1 1 0;
.site-header-brand-title {
font-size: 0.92rem;
}
.site-header-quick-link,
.site-header-menu-toggle {
width: 100%;
min-height: 2.55rem;
height: 2.55rem;
}
.site-header-primary {
width: 100%;
left: 0;
right: auto;
.site-header-quick-link {
padding-inline: 0.72rem;
font-size: 0.62rem;
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 {