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

feat : sélecteur de densité L/M/S sur la page liste (v1.6.7)

Browse Source 
Boutons [L][M][S] dans la barre de recherche hero : pleine largeur (défaut),
980 px centré, 660 px compact. Préférence localStorage. Anti-FOUC inline dans layout.php.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Cédric Abonnel
2026-05-15 20:24:28 +02:00
parent 5cea473d17
commit a55e22f1f4
5 changed files with 88 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/layout.php
+1
View File
@@ -50,6 +50,7 @@
</head>
<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>
<header>
<nav class="navbar navbar-expand-lg navbar-dark mb-0" role="navigation" aria-label="Navigation principale">
templates/post_list.php
+50 -10
View File
@@ -86,12 +86,17 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
autofocus>
<button type="submit" class="hero-search-btn">Rechercher</button>
</form>
<p class="hero-search-stats">
<?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
<?php if ($totalUpcoming > 0): ?>
· <?= $totalUpcoming ?> à venir
<?php endif; ?>
</p>
<div class="hero-search-footer">
<p class="hero-search-stats">
<?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
<?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
</p>
<div class="density-toggle" role="group" aria-label="Taille d'affichage">
<button type="button" class="density-btn" data-d="l" title="Pleine largeur">L</button>
<button type="button" class="density-btn" data-d="m" title="Normal">M</button>
<button type="button" class="density-btn" data-d="s" title="Compact">S</button>
</div>
</div>
</div>
<?php /* ─── Héro + derniers articles ─────────────────────────────────── */ ?>
@@ -266,10 +271,17 @@ function _renderCard(array $post, array $privateCats, array $allCats, \Parsedown
autofocus>
<button type="submit" class="hero-search-btn">Rechercher</button>
</form>
<p class="hero-search-stats">
<?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
<?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
</p>
<div class="hero-search-footer">
<p class="hero-search-stats">
<?= $totalPublished ?> article<?= $totalPublished > 1 ? 's' : '' ?>
<?php if ($totalUpcoming > 0): ?>· <?= $totalUpcoming ?> à venir<?php endif; ?>
</p>
<div class="density-toggle" role="group" aria-label="Taille d'affichage">
<button type="button" class="density-btn" data-d="l" title="Pleine largeur">L</button>
<button type="button" class="density-btn" data-d="m" title="Normal">M</button>
<button type="button" class="density-btn" data-d="s" title="Compact">S</button>
</div>
</div>
</div>
<?php endif; ?>
@@ -340,6 +352,34 @@ if (!empty($_tagCats)):
<a href="/new" class="fab-new" title="Nouvel article" aria-label="Nouvel article">+</a>
<?php endif; ?>
<script>
(function(){
var KEY = 'folio_density';
var cur = localStorage.getItem(KEY) || 'l';
function apply(d) {
if (d === 'l') {
delete document.body.dataset.density;
} else {
document.body.dataset.density = d;
}
document.querySelectorAll('.density-btn').forEach(function(btn){
btn.classList.toggle('active', btn.dataset.d === d);
});
}
apply(cur);
document.addEventListener('click', function(e){
var btn = e.target.closest('.density-btn');
if (!btn) return;
cur = btn.dataset.d;
localStorage.setItem(KEY, cur);
apply(cur);
});
})();
</script>
<?php
$content = ob_get_clean();
$title = siteTitle();