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

fix: sélecteur de largeur — type=button + init CSS dans <head>

Browse source 
- Ajout de type="button" sur les boutons du sélecteur (évite le submit)
- Initialisation de --content-width dans <head> pour éviter le flash
- Séparation init CSS (head) / gestion active (body)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alpinux 2026-05-06 11:44:31 +02:00
parent 6d25cab295
commit b18db0646c
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/templates/base.html
View file

@ -6,6 +6,9 @@
<title>{% block title %}CDN{% endblock %} — Static Alpinux</title> <title>{% block title %}CDN{% endblock %} — Static Alpinux</title>
<link rel="icon" type="image/x-icon" href="https://static.alpinux.org/logo/favicon.ico"> <link rel="icon" type="image/x-icon" href="https://static.alpinux.org/logo/favicon.ico">
<link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
<script>
(function(){var w=localStorage.getItem('content-width');document.documentElement.style.setProperty('--content-width',w?w+'px':'none');})();
</script>
</head> </head>
<body> <body>
@ -29,10 +32,10 @@
<button type="submit" aria-label="Lancer la recherche">🔍</button> <button type="submit" aria-label="Lancer la recherche">🔍</button>
</form> </form>
<div class="width-switcher" title="Largeur du contenu"> <div class="width-switcher" title="Largeur du contenu">
<button data-width="900" title="Étroit (~900 px)">S</button> <button type="button" data-width="900" title="Étroit (~900 px)">S</button>
<button data-width="1200" title="Normal (~1200 px)">M</button> <button type="button" data-width="1200" title="Normal (~1200 px)">M</button>
<button data-width="1600" title="Large (~1600 px)">L</button> <button type="button" data-width="1600" title="Large (~1600 px)">L</button>
<button data-width="" title="Plein écran">∞</button> <button type="button" data-width="" title="Plein écran">∞</button>
</div> </div>
<div class="header-user"> <div class="header-user">
{% if user %} {% if user %}
@ -68,22 +71,19 @@
<script> <script>
(function () { (function () {
const KEY = 'content-width'; const KEY = 'content-width';
const WIDTHS = ['900', '1200', '1600', ''];
const btns = document.querySelectorAll('.width-switcher button'); const btns = document.querySelectorAll('.width-switcher button');
function apply(val) { function applyActive(val) {
document.documentElement.style.setProperty( btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === (val ?? '')));
'--content-width', val ? val + 'px' : 'none'
);
btns.forEach(b => b.classList.toggle('ws-active', b.dataset.width === val));
} }
apply(localStorage.getItem(KEY) ?? ''); applyActive(localStorage.getItem(KEY));
btns.forEach(btn => btn.addEventListener('click', () => { btns.forEach(btn => btn.addEventListener('click', () => {
const val = btn.dataset.width; const val = btn.dataset.width;
localStorage.setItem(KEY, val); try { localStorage.setItem(KEY, val); } catch(_) {}
apply(val); document.documentElement.style.setProperty('--content-width', val ? val + 'px' : 'none');
applyActive(val);
})); }));
})(); })();
</script> </script>