alpinux.cedrica5l/alpinux-static
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

feat: sélecteur de largeur du contenu (S/M/L/∞)

Browse source 
Ajoute 4 boutons dans le header pour choisir la largeur du contenu :
- S : ~900 px  M : ~1200 px  L : ~1600 px  ∞ : plein écran
La préférence est mémorisée en localStorage et appliquée instantanément
via la CSS custom property --content-width sur <main>.

Closes #33

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alpinux 2026-05-06 11:36:53 +02:00
parent 857539725f
commit 7f5d86449e
2 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/static/app.css
View file

@ -49,8 +49,15 @@ header { background: var(--blue-dark); color: #fff; }
border: 1px solid rgba(255,255,255,.3); transition: background .15s, color .15s; }
.btn-logout-icon:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
.width-switcher { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
.width-switcher button { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.6); border-radius: 4px; padding: .2rem .45rem; font-size: .72rem;
font-weight: 700; cursor: pointer; transition: background .15s, color .15s; line-height: 1.3; }
.width-switcher button:hover { background: rgba(255,255,255,.18); 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 { margin: 2rem 1.5rem; padding: 0 0 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
main { max-width: var(--content-width, none); margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
/* ── Carte générique ──────────────────────────────────────────── */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.8rem; }

28
app/templates/base.html
View file

@ -28,6 +28,12 @@
value="{{ request.args.get('q', '') }}" aria-label="Recherche">
<button type="submit" aria-label="Lancer la recherche">🔍</button>
</form>
<div class="width-switcher" title="Largeur du contenu">
<button data-width="900" title="Étroit (~900 px)">S</button>
<button data-width="1200" title="Normal (~1200 px)">M</button>
<button data-width="1600" title="Large (~1600 px)">L</button>
<button data-width="" title="Plein écran">∞</button>
</div>
<div class="header-user">
{% if user %}
<span class="user-chip" title="{{ user.name }}">
@ -59,5 +65,27 @@
</div>
</footer>
<script>
(function () {
const KEY = 'content-width';
const WIDTHS = ['900', '1200', '1600', ''];
const btns = document.querySelectorAll('.width-switcher button');
function apply(val) {
document.documentElement.style.setProperty(
'--content-width', val ? val + 'px' : 'none'
);
btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === val));
}
apply(localStorage.getItem(KEY) ?? '');
btns.forEach(btn => btn.addEventListener('click', () => {
const val = btn.dataset.width;
localStorage.setItem(KEY, val);
apply(val);
}));
})();
</script>
</body>
</html>