cedricAbonnel/folio
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

fix : densité L/M/S — injection <style> dynamique dans <head>

Browse Source 
Remplace body[data-density] + CSS externe par un élément <style id="density-fouc">
injecté dynamiquement dans <head>, insensible aux problèmes de spécificité et de cache CSS.
Remplace aussi closest() par une boucle parentNode et dataset par getAttribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Cédric Abonnel
2026-05-15 20:49:08 +02:00
parent 5e88d44129
commit 58a110d5b9
3 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style.css
+1 -3
View File
@@ -1267,9 +1267,7 @@ footer.mt-5 { margin-top: 0 !important; }
} }
/* ─── Densité d'affichage L / M / S ──────── */ /* ─── Densité d'affichage L / M / S ──────── */
main { transition: max-width .22s ease, padding-left .22s ease, padding-right .22s ease; } main { transition: max-width .22s ease; }
body[data-density="m"] main { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
body[data-density="s"] main { max-width: 660px !important; margin-left: auto !important; margin-right: auto !important; }
/* Widget fixe haut-droite */ /* Widget fixe haut-droite */
.density-widget { .density-widget {
templates/layout.php
+1 -1
View File
@@ -50,7 +50,7 @@
</head> </head>
<body<?php if (!empty($bodyClass ?? '')): ?> class="<?= htmlspecialchars($bodyClass) ?>"<?php endif; ?>> <body<?php if (!empty($bodyClass ?? '')): ?> class="<?= htmlspecialchars($bodyClass) ?>"<?php endif; ?>>
<script>(function(){var d=localStorage.getItem('folio_density');if(d&&d!=='l')document.body.dataset.density=d;})();</script> <script>(function(){var d=localStorage.getItem('folio_density');if(d&&d!=='l'){var s=document.createElement('style');s.id='density-fouc';s.textContent='main[role="main"]{max-width:'+(d==='m'?'980px':'660px')+'!important;margin-left:auto!important;margin-right:auto!important}';document.head.appendChild(s);}})();</script>
<header> <header>
<nav class="navbar navbar-expand-lg navbar-dark mb-0" role="navigation" aria-label="Navigation principale"> <nav class="navbar navbar-expand-lg navbar-dark mb-0" role="navigation" aria-label="Navigation principale">
templates/post_list.php
+23 -11
View File
@@ -349,25 +349,37 @@ if (!empty($_tagCats)):
var KEY = 'folio_density'; var KEY = 'folio_density';
var cur = localStorage.getItem(KEY) || 'l'; var cur = localStorage.getItem(KEY) || 'l';
function apply(d) { function applyDensity(d) {
if (d === 'l') { var fouc = document.getElementById('density-fouc');
delete document.body.dataset.density; if (d !== 'l') {
var mw = d === 'm' ? '980px' : '660px';
if (!fouc) {
fouc = document.createElement('style');
fouc.id = 'density-fouc';
document.head.appendChild(fouc);
}
fouc.textContent = 'main[role="main"]{max-width:' + mw + '!important;margin-left:auto!important;margin-right:auto!important}';
} else { } else {
document.body.dataset.density = d; if (fouc) { fouc.parentNode.removeChild(fouc); }
} }
document.querySelectorAll('.density-btn').forEach(function(btn){ document.querySelectorAll('.density-btn').forEach(function(btn){
btn.classList.toggle('active', btn.dataset.d === d); btn.classList.toggle('active', btn.getAttribute('data-d') === d);
}); });
} }
apply(cur); applyDensity(cur);
document.addEventListener('click', function(e){ document.addEventListener('click', function(e){
var btn = e.target.closest('.density-btn'); var el = e.target;
if (!btn) return; while (el && el !== document) {
cur = btn.dataset.d; if (el.classList && el.classList.contains('density-btn')) {
localStorage.setItem(KEY, cur); cur = el.getAttribute('data-d') || 'l';
apply(cur); try { localStorage.setItem(KEY, cur); } catch(ignore) {}
applyDensity(cur);
return;
}
el = el.parentNode;
}
}); });
})(); })();
</script> </script>