rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Forum Tab-Pills — Marquee-Scroll bei Hover für abgeschnittenen Text, SW by-v595

Browse source
This commit is contained in:
rene 2026-05-02 08:35:49 +02:00
parent 7474e10031
commit d1572c52bc
4 changed files with 32 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '594'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '595'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';

19
backend/static/js/pages/forum.js
View file

@ -99,10 +99,10 @@ window.Page_forum = (() => {
<div class="forum-category-tabs by-tabs" id="forum-tabs">
${KATEGORIEN.map(k => `
<button class="by-tab ${k.key === _aktivKat ? 'active' : ''}"
data-kat="${k.key}">${_esc(k.label)}</button>
data-kat="${k.key}"><span class="by-tab-text">${_esc(k.label)}</span></button>
`).join('')}
<button class="by-tab ${_activeSection === 'map' ? 'active' : ''}"
data-section="map">${UI.icon('users')} Mitgliederkarte</button>
data-section="map"><span class="by-tab-text">${UI.icon('users')} Mitgliederkarte</span></button>
</div>
<!-- Rechte Spalte: HdM-Kachel + Suche + Threads -->
@ -130,6 +130,21 @@ window.Page_forum = (() => {
const _tabCount = _tabsEl.querySelectorAll('.by-tab').length;
_tabsEl.style.setProperty('--forum-tab-cols', Math.ceil(_tabCount / 2));
// Marquee-Scroll: nur Tabs animieren, bei denen Text wirklich abgeschnitten ist
_tabsEl.addEventListener('mouseenter', e => {
const btn = e.target.closest('.by-tab');
const span = btn?.querySelector('.by-tab-text');
if (!span) return;
const overflow = span.scrollWidth - btn.clientWidth;
if (overflow <= 2) return;
span.style.setProperty('--tab-scroll-px', `-${overflow}px`);
span.classList.add('scrolling');
}, true);
_tabsEl.addEventListener('mouseleave', e => {
const span = e.target.closest('.by-tab')?.querySelector('.by-tab-text');
if (span) span.classList.remove('scrolling');
}, true);
// Tab-Klicks
_tabsEl.addEventListener('click', e => {
const btn = e.target.closest('[data-kat], [data-section]');