From 46a8a0b75f1c938e75403a392679a941873c31a4 Mon Sep 17 00:00:00 2001 From: Alpinux Date: Wed, 6 May 2026 11:53:25 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20s=C3=A9lecteur=20largeur=20=E2=80=94=20d?= =?UTF-8?q?ata-cw=20sur=20=20au=20lieu=20de=20CSS=20variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit max-width:none + margin:auto sur flex child causait le rétrécissement de main. Remplacé par width:100% + sélecteurs d'attribut html[data-cw]. Co-Authored-By: Claude Sonnet 4.6 --- app/static/app.css | 5 ++++- app/templates/base.html | 14 ++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/app/static/app.css b/app/static/app.css index 8591ef5..077462d 100644 --- a/app/static/app.css +++ b/app/static/app.css @@ -57,7 +57,10 @@ header { background: var(--blue-dark); color: #fff; } .width-switcher button.ws-active { background: rgba(255,255,255,.25); color: #fff; border-color: rgba(255,255,255,.5); } /* ── Mise en page ─────────────────────────────────────────────── */ -main { max-width: var(--content-width, none); margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; } +main { width: 100%; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; } +html[data-cw="900"] main { max-width: 900px; } +html[data-cw="1200"] main { max-width: 1200px; } +html[data-cw="1600"] main { max-width: 1600px; } /* ── Carte générique ──────────────────────────────────────────── */ .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.8rem; } diff --git a/app/templates/base.html b/app/templates/base.html index 5cbb21b..16ec6f3 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -7,7 +7,7 @@ @@ -72,17 +72,23 @@ (function () { const KEY = 'content-width'; const btns = document.querySelectorAll('.width-switcher button'); + const html = document.documentElement; function applyActive(val) { - btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val ?? ''))); + btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val || ''))); } applyActive(localStorage.getItem(KEY)); btns.forEach(btn => btn.addEventListener('click', () => { const val = btn.dataset.width; - try { localStorage.setItem(KEY, val); } catch(_) {} - document.documentElement.style.setProperty('--content-width', val ? val + 'px' : 'none'); + if (val) { + localStorage.setItem(KEY, val); + html.dataset.cw = val; + } else { + localStorage.removeItem(KEY); + delete html.dataset.cw; + } applyActive(val); })); })();