feat: Filter-Leiste einklappbar für schlankeren Header

- 🔽/🔼 Toggle-Button im Header (rechts neben brettspiel-news.de)
- Filter-Bar standardmäßig eingeklappt (display:none)
- Pfeil wechselt beim Ein-/Ausklappen
- Alle Filter-Optionen erhalten (Halle, Kategorie, Sortierung)
This commit is contained in:
Hermes Agent
2026-06-17 22:16:10 +02:00
parent 3dfea22046
commit 4d7469e47e
+21
View File
@@ -1869,6 +1869,12 @@ def public_frontend():
.site-header .header-right { margin-left:auto; }
.site-header .header-right a { color:#aaa; text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
.site-header .header-right a:hover { color:#fff; }
.filter-toggle-btn { background:none; border:1.5px solid rgba(255,255,255,0.3); border-radius:8px; color:#fff; font-size:1rem; cursor:pointer; padding:0.3rem 0.5rem; line-height:1; transition:all 0.15s; margin-left:0.5rem; }
.filter-toggle-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); }
.filter-toggle-btn.active { background:rgba(255,255,255,0.15); border-color:#fff; }
.filter-toggle-btn .badge { position:absolute; top:-4px; right:-4px; width:8px; height:8px; background:#dc3545; border-radius:50%; border:1.5px solid #20228a; display:none; }
.filter-toggle-btn.has-active .badge { display:block; }
.filter-collapsed { display:none; }
/* Main grid — masonry (CSS columns) */
.main-grid { max-width:1300px; margin:1.5rem auto; padding:0 1rem; column-count:4; column-gap:1.2rem; }
@@ -2057,6 +2063,7 @@ def public_frontend():
</a>
<div class="header-right">
<a href="https://brettspiel-news.de">brettspiel-news.de</a>
<button id="filterToggle" class="filter-toggle-btn" aria-label="Filter einblenden">🔽</button>
</div>
</header>
@@ -2069,6 +2076,20 @@ def public_frontend():
<p>Powered by <a href="https://brettspiel-news.de">brettspiel-news.de</a> — Die Stimme der Brettspiel-Community</p>
</footer>
<script>
(function() {
var btn = document.getElementById('filterToggle');
var bar = document.getElementById('filterBar');
if (btn && bar) {
btn.addEventListener('click', function() {
var hidden = bar.classList.toggle('filter-collapsed');
btn.textContent = hidden ? '🔽' : '🔼';
btn.classList.toggle('active', !hidden);
});
}
})();
</script>
<!-- ── Chat Bubble ──────────────────────────────────────────── -->
<button class="chat-bubble" id="chatBubble" title="BSN Community Assistant" aria-label="Chat öffnen">
💬<span class="bubble-dot"></span>