SPB Git forge
spboucher.ai ↗

spb/resto-ka

Public

Resto·Ka — tous les restaurants du Québec, menus complets et prix réels (famille ·Ka)

52commits 1branches 0releases
11.6 MBsize
maindefault branch
19 days agolast push
Python 69.3% TypeScript 16.7% CSS 7.9% JavaScript 4.7% HTML 1.4%

header opaque + z-index en tokens + scroll-lock ka-scroll-lock (standard header/menu KA 2026-08-22)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed 1 mo ago (Aug 22, 2026) parent 6b03213

2 changed files +14 −11

modified frontend/src/App.tsx +2 −2
@@ -150,8 +150,8 @@ function Header() {
150 150 // fermer le menu à chaque navigation + verrouiller le défilement en dessous
151 151 useEffect(() => { setOpen(false); }, [location]);
152 152 useEffect(() => {
153 − document.body.style.overflow = open ? "hidden" : "";
154 − return () => { document.body.style.overflow = ""; };
153 + document.documentElement.classList.toggle("ka-scroll-lock", open);
154 + return () => { document.documentElement.classList.remove("ka-scroll-lock"); };
155 155 }, [open]);
156 156
157 157 return (
modified frontend/src/styles.css +12 −9
@@ -31,12 +31,11 @@ img { display: block; }
31 31
32 32 /* ================= Header ================= */
33 33 .header {
34 − position: sticky; top: 0; z-index: 50;
35 − background: rgba(245, 243, 238, 0.88);
36 − backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
34 + position: sticky; top: 0; z-index: var(--z-header, 500);
35 + background: var(--paper);
37 36 border-bottom: 1.5px solid var(--ink);
38 37 }
39 −:root { --header-h: 66px; } /* hauteur du header (ancre du menu compte fixed) */
38 +:root { --header-h: 64px; } /* hauteur du header (ancre du menu compte fixed) */
40 39 .header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
41 40 .brand {
42 41 font-family: var(--font-display); font-weight: 700; font-size: 24px;
@@ -592,7 +591,7 @@ img { display: block; }
592 591 .fab { display: none; }
593 592
594 593 @media (max-width: 640px) {
595 − :root { --header-h: 58px; }
594 + :root { --header-h: 56px; }
596 595 .brand { font-size: 20px; }
597 596 .nav a { padding: 8px 13px; font-size: 13.5px; }
598 597 .ticker { font-size: 10px; padding: 6px 0; }
@@ -610,7 +609,7 @@ img { display: block; }
610 609 .filterbar.open .f-ctl select { max-width: none; width: 100%; }
611 610 .filterbar.open {
612 611 display: flex; flex-direction: column; gap: 12px;
613 − position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
612 + position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal, 900);
614 613 margin: 0; border-radius: 16px 16px 0 0; border: none; border-top: 2px solid var(--ink);
615 614 max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
616 615 padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
@@ -631,7 +630,7 @@ img { display: block; }
631 630 }
632 631 .filterbar.open .sheet-apply { display: flex; width: 100%; }
633 632 .sheet-backdrop {
634 − display: block; position: fixed; inset: 0; z-index: 90;
633 + display: block; position: fixed; inset: 0; z-index: var(--z-overlay, 800);
635 634 background: rgba(20, 24, 20, 0.45); backdrop-filter: blur(2px);
636 635 }
637 636 .fab {
@@ -661,7 +660,7 @@ img { display: block; }
661 660 @media (max-width: 760px) {
662 661 .tabbar {
663 662 display: grid;
664 − position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
663 + position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar, 600);
665 664 background: rgba(245, 243, 238, 0.94);
666 665 backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
667 666 border-top: 1.5px solid var(--ink);
@@ -811,7 +810,11 @@ img { display: block; }
811 810 max-height: 0; overflow: hidden; opacity: 0;
812 811 transition: max-height 0.3s ease, opacity 0.22s ease;
813 812 }
813 +.mobile-menu { z-index: var(--z-modal, 900); }
814 814 .mobile-menu.open { max-height: 480px; opacity: 1; }
815 +/* Le drawer vit DANS le header : quand il est ouvert, le header monte au niveau
816 + modal pour peindre au-dessus du .mm-backdrop (frère du header, overlay 800). */
817 +.header:has(.mobile-menu.open) { z-index: var(--z-modal, 900); }
815 818 .mm-link {
816 819 display: flex; align-items: center; gap: 12px;
817 820 padding: 15px 10px; min-height: 52px;
@@ -832,7 +835,7 @@ img { display: block; }
832 835 font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em;
833 836 }
834 837 .mm-backdrop {
835 − position: fixed; inset: 0; z-index: 40;
838 + position: fixed; inset: 0; z-index: var(--z-overlay, 800);
836 839 background: rgba(20, 24, 20, 0.35); backdrop-filter: blur(2px);
837 840 }
838 841 @media (max-width: 760px) {
839 842