Kleine Änderungen

2026-04-16 22:03:21 +02:00
parent fdc0cfce95
commit e4b762f905
2 changed files with 125 additions and 15 deletions
--- a/src/main/resources/static/js/mobile-nav.js
+++ b/src/main/resources/static/js/mobile-nav.js
@@ -4,7 +4,8 @@

    const path = window.location.pathname;
    const I = window.IC || function () { return ''; };
-    const TOPBAR_H = '4.875rem';
+    const TOPBAR_H  = '4.875rem';
+    const BOT_NAV_H = '3.75rem';

    // ── CSS ──────────────────────────────────────────────────────────────────
    const style = document.createElement('style');
@@ -82,7 +83,7 @@
            display: none;
            position: fixed;
            top: ${TOPBAR_H};
-            left: 0; right: 0; bottom: 0;
+            left: 0; right: 0; bottom: ${BOT_NAV_H};
            background: rgba(0,0,0,0.55);
            z-index: 998;
        }
@@ -93,7 +94,7 @@
            position: fixed;
            top: ${TOPBAR_H};
            right: 0;
-            bottom: 0;
+            bottom: ${BOT_NAV_H};
            width: min(80%, 360px);
            background: var(--color-card);
            border-left: 1px solid var(--color-secondary);
@@ -155,10 +156,54 @@
        .mnav-link--danger       { color: var(--color-primary); }
        .mnav-link--danger:hover { background: rgba(var(--color-primary-rgb,233,69,96),0.1); color: var(--color-primary); }

+        /* ── Bottom Navigation Bar ── */
+        .mob-bottom-nav {
+            display: none;
+            position: fixed;
+            bottom: 0; left: 0; right: 0;
+            height: ${BOT_NAV_H};
+            background: var(--color-card);
+            border-top: 1px solid var(--color-secondary);
+            box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
+            z-index: 500;
+            align-items: stretch;
+        }
+        .mob-bn-tab {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 0.18rem;
+            text-decoration: none;
+            color: var(--color-muted);
+            font-size: 1.25rem;
+            line-height: 1;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0.25rem 0;
+            transition: color 0.12s;
+            -webkit-tap-highlight-color: transparent;
+        }
+        .mob-bn-tab.active { color: var(--color-primary); }
+        .mob-bn-tab:hover  { color: var(--color-text); }
+        .mob-bn-label {
+            font-size: 0.6rem;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.01em;
+        }
+
        /* ── Show only on mobile ── */
        @media (max-width: 768px) {
            .mobile-topbar { display: flex; }
-            body.app       { padding-top: ${TOPBAR_H}; }
+            .mob-bottom-nav { display: flex; }
+            body.app {
+                padding-top: ${TOPBAR_H};
+                padding-bottom: ${BOT_NAV_H};
+            }
+            #mobMenuToggle { display: none; }
        }
    `;
    document.head.appendChild(style);
@@ -322,6 +367,35 @@
    document.body.appendChild(backdropEl);
    document.body.appendChild(panelEl);

+    // ── Bottom Navigation Bar ─────────────────────────────────────────────────
+    const onGames = path.startsWith('/games/');
+    const bottomNavEl = document.createElement('nav');
+    bottomNavEl.className = 'mob-bottom-nav';
+    bottomNavEl.id = 'mobBottomNav';
+    bottomNavEl.innerHTML = `
+        <a href="/userhome.html" class="mob-bn-tab${path === '/userhome.html' ? ' active' : ''}">
+            <span>${I('HOME') || '🏠'}</span>
+            <span class="mob-bn-label">Home</span>
+        </a>
+        <a href="/community/feed.html" class="mob-bn-tab${path.startsWith('/community/') ? ' active' : ''}">
+            <span>${I('GROUPS') || '👥'}</span>
+            <span class="mob-bn-label">Community</span>
+        </a>
+        <a href="/dating/dating.html" class="mob-bn-tab${path.startsWith('/dating/') ? ' active' : ''}" id="mobBnDatingTab">
+            <span>${I('DATING') || '♥'}</span>
+            <span class="mob-bn-label">Dating</span>
+        </a>
+        <button class="mob-bn-tab${onGames ? ' active' : ''}" id="mobBnGamesTab" aria-label="Games">
+            <span>${I('GAMEPAD') || '🕹️'}</span>
+            <span class="mob-bn-label">Games</span>
+        </button>
+        <a href="/konto/einstellungen.html" class="mob-bn-tab${path.startsWith('/konto/') || path.startsWith('/help/') ? ' active' : ''}">
+            <span>${I('SETTINGS') || '⚙️'}</span>
+            <span class="mob-bn-label">Konto</span>
+        </a>
+    `;
+    document.body.appendChild(bottomNavEl);
+
    // ── Accordion (nur eine Sektion gleichzeitig offen) ──────────────────────
    panelEl.querySelectorAll('.mnav-section-header').forEach(h => {
        h.addEventListener('click', () => {
@@ -333,7 +407,13 @@
    });

    // ── Open / Close ──────────────────────────────────────────────────────────
-    function openMenu() {
+    function openMenu(focusSectionLabel) {
+        if (focusSectionLabel) {
+            panelEl.querySelectorAll('.mnav-section').forEach(s => {
+                const label = s.querySelector('.mnav-section-header span')?.textContent?.trim();
+                s.classList.toggle('open', label === focusSectionLabel);
+            });
+        }
        panelEl.classList.add('open');
        backdropEl.classList.add('open');
    }
@@ -352,6 +432,22 @@
        l.addEventListener('click', () => { if (l.getAttribute('href') !== '#') closeMenu(); });
    });

+    // ── Games-Tab öffnet Panel mit Games-Sektionen ────────────────────────────
+    document.getElementById('mobBnGamesTab').addEventListener('click', e => {
+        e.stopPropagation();
+        if (panelEl.classList.contains('open')) {
+            closeMenu();
+        } else {
+            // Ersten aktiven Game-Bereich öffnen, sonst Vanilla Game als Default
+            const gameLabels = ['Vanilla Game', 'BDSM Game', 'Chastity Game'];
+            const activeLabel = gameLabels.find(lbl => {
+                const prefix = { 'Vanilla Game': '/games/vanilla/', 'BDSM Game': '/games/bdsm/', 'Chastity Game': '/games/chastity/' }[lbl];
+                return path.startsWith(prefix);
+            }) || 'Vanilla Game';
+            openMenu(activeLabel);
+        }
+    });
+
    // ── Badges ────────────────────────────────────────────────────────────────
    function setBadge(id, n) {
        const el = document.getElementById(id);
@@ -406,13 +502,14 @@
            if (el) el.style.display = '';
        }

-        // Dating
+        // Dating (Panel-Link + Bottom-Nav-Tab)
+        const datingHref = user.datingAktiv
+            ? '/dating/dating.html'
+            : '/konto/einstellungen.html#sec-dating';
        const datingLink = document.getElementById('mnavDatingLink');
-        if (datingLink) {
-            datingLink.href = user.datingAktiv
-                ? '/dating/dating.html'
-                : '/konto/einstellungen.html#sec-dating';
-        }
+        if (datingLink) datingLink.href = datingHref;
+        const bnDatingTab = document.getElementById('mobBnDatingTab');
+        if (bnDatingTab) bnDatingTab.href = datingHref;

        const hide    = id => { const el = document.getElementById(id); if (el) el.style.display = 'none'; };
        const show    = id => { const el = document.getElementById(id); if (el) el.style.display = ''; };
--- a/src/main/resources/static/js/shared.js
+++ b/src/main/resources/static/js/shared.js
@@ -119,15 +119,16 @@ document.addEventListener('click', e => {
 });

 // ── Bild-Karussell (Lightbox/Detail-Ansicht) ─────────────────────────────────
-function bilderCarousel(bilder) {
+function bilderCarousel(bilder, initialIdx = 0) {
    if (!bilder || bilder.length === 0) return '';
+    const idx = Math.max(0, Math.min(initialIdx, bilder.length - 1));
    const slides = bilder.map((b, i) =>
-        `<div class="car-slide${i === 0 ? ' active' : ''}"><img class="post-bild" src="data:image/jpeg;base64,${b}" alt=""></div>`
+        `<div class="car-slide${i === idx ? ' active' : ''}"><img class="post-bild" src="data:image/jpeg;base64,${b}" alt=""></div>`
    ).join('');
    const nav = bilder.length > 1
        ? `<button class="car-btn car-prev" onclick="event.stopPropagation();carNav(this,-1)">&#8249;</button>
           <button class="car-btn car-next" onclick="event.stopPropagation();carNav(this,1)">&#8250;</button>
-           <div class="car-indicator"><span class="car-cur">1</span>&#8202;/&#8202;${bilder.length}</div>`
+           <div class="car-indicator"><span class="car-cur">${idx + 1}</span>&#8202;/&#8202;${bilder.length}</div>`
        : '';
    return `<div class="post-carousel">${slides}${nav}</div>`;
 }
@@ -138,6 +139,8 @@ function bilderCarousel(bilder) {
 *  – Post-Text bekommt scrollbare Höhenbegrenzung
 */
 function _lbSetupContent(postId, prefix, bilder) {
+    const initialIdx = window.__pigNextIdx != null ? window.__pigNextIdx : 0;
+    window.__pigNextIdx = null;
    const body = document.getElementById('lbPostBody');
    const va = body.querySelector(`#${prefix}va-${postId}`);
    if (va) va.classList.add('lb-va');
@@ -146,7 +149,7 @@ function _lbSetupContent(postId, prefix, bilder) {
    if (pbi) {
        if (hasImages) {
            pbi.classList.add('lb-ic');
-            pbi.innerHTML = bilderCarousel(bilder);
+            pbi.innerHTML = bilderCarousel(bilder, initialIdx);
        } else {
            pbi.style.display = 'none';
        }
@@ -229,6 +232,16 @@ function _pigInit(id, probe) {
                `<div class="pig-item"><img src="data:image/jpeg;base64,${bilder[2]}" alt="">${moreHtml}</div>`);
        }
    }
+
+    // Click-Listener: angeklicktes Bild als Startindex für die Lightbox merken
+    grid.querySelectorAll('.pig-item').forEach((item, idx) => {
+        item.style.cursor = 'pointer';
+        item.addEventListener('click', e => {
+            e.stopPropagation();
+            window.__pigNextIdx = idx;
+            item.closest('.post-card')?.click();
+        });
+    });
 }

 function carNav(btn, dir) {