diff --git a/app.py b/app.py index 0509073..d355d73 100644 --- a/app.py +++ b/app.py @@ -2877,20 +2877,17 @@ def public_frontend(): except: pass - # Metadata-Leiste: Avatar + Autor · Views · Comments · Like + # Metadata-Leiste: Avatar + Autor · Zeit · Views · Comments · Like meta_html = f"""
-
{avatar_html} {name}
+
{avatar_html} {name}{time_html}
{r['views'] or 0} {r['comment_count'] or 0} - +
""" is_ausverkauft = r["category"] == "ausverkauft" and r["spiel_titel"] - # Zeit-Block oben (für Text-only Karten) - time_top = f'
{time_html}
' if time_html else '' - # Badge-Titel vorbereiten (vermeidet Escaping-Probleme) badge_title = f' · {r["spiel_titel"]}' if r["spiel_titel"] else "" @@ -2898,8 +2895,7 @@ def public_frontend(): # Text-only card cards += f"""
- {time_top} - {f'
{r["halle"]}
' if r["halle"] else ''} + {f'
{r["halle"]}
' if r["halle"] else ''} {f'
🚫 AUSVERKAUFT{badge_title}
' if r["category"] == "ausverkauft" else ''}

{preview}

@@ -2911,8 +2907,7 @@ def public_frontend(): # Media card cards += f"""
{media_first} - {f'
{time_html}
' if time_html else ''} - {f'
{r["halle"]}
' if r["halle"] else ''} + {f'
{r["halle"]}
' if r["halle"] else ''} {f'
🚫 AUSVERKAUFT{badge_title}
' if r["category"] == "ausverkauft" else ''}

{preview}

@@ -2977,9 +2972,9 @@ def public_frontend(): .story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; } .story-card audio { width:100%; margin-top:0.5rem; } - /* Hall badge — subtle gray outline */ - .story-halle-badge { position:absolute; top:0.5rem; right:0.5rem; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#6B7280; padding:0.2rem 0.55rem; border-radius:6px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; z-index:5; border:1px solid rgba(0,0,0,0.06); } - .story-halle-badge svg { stroke:#9CA3AF !important; } + /* Hall badge — anthracite, light text */ + .story-halle-badge { position:absolute; top:0.5rem; right:0.5rem; background:#1F2937; color:#F9FAFB; padding:0.2rem 0.55rem; border-radius:6px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; z-index:5; } + .story-halle-badge svg { stroke:#D1D5DB !important; } /* Ausverkauft badge — keep red but cleaner */ .story-ausverkauft-badge { position:absolute; top:0; left:0; right:0; z-index:7; background:linear-gradient(180deg,#EF4444 0%,#DC2626 100%); color:#fff; padding:0.4rem 1rem; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-align:center; box-shadow:0 2px 8px rgba(220,38,38,0.3); display:flex; align-items:center; justify-content:center; gap:0.4rem; flex-wrap:wrap; } @@ -3015,6 +3010,8 @@ def public_frontend(): .card-meta-item { display:flex; align-items:center; gap:0.2rem; font-size:0.72rem; color:#9CA3AF; } .card-meta-item svg { stroke:#9CA3AF; } .meta-author { display:flex; align-items:center; gap:0.35rem; color:#6B7280; font-size:0.75rem; font-weight:500; } + .meta-author-name { font-weight:500; } + .meta-date { font-size:0.68rem; color:#9CA3AF; font-weight:400; margin-left:0.5rem; } .meta-spacer { flex:1; } /* Like button — subtle outline */ @@ -3512,14 +3509,14 @@ def public_frontend(): var likedPosts = JSON.parse(localStorage.getItem('likedPosts') || '[]'); // Restore liked state on page load - if (likedPosts.length) { - document.querySelectorAll('.stat-like-btn').forEach(function(btn) { - var id = parseInt(btn.getAttribute('data-id')); - if (likedPosts.indexOf(id) !== -1) { - btn.classList.add('liked'); - } - }); - } + document.querySelectorAll('.stat-like-btn').forEach(function(btn) { + var id = parseInt(btn.getAttribute('data-id')); + if (likedPosts.indexOf(id) !== -1) { + btn.classList.add('liked'); + } + // Touch-Event für Mobile + btn.addEventListener('touchend', function(e) { e.preventDefault(); btn.click(); }); + }); document.querySelectorAll('.stat-like-btn').forEach(function(btn) { btn.addEventListener('click', function(e) { @@ -3528,19 +3525,21 @@ def public_frontend(): var id = this.getAttribute('data-id'); if (this.classList.contains('liked')) return; this.disabled = true; + var self = this; fetch('/api/like/' + id, {method:'POST'}) .then(function(r) { return r.json(); }) .then(function(data) { if (!data.already) { - this.classList.add('liked'); - this.innerHTML = ' ' + data.likes; - this.setAttribute('data-likes', data.likes); + self.classList.add('liked'); + var countSpan = self.querySelector('.like-count'); + if (countSpan) countSpan.textContent = data.likes; + else self.setAttribute('data-likes', data.likes); likedPosts.push(parseInt(id)); localStorage.setItem('likedPosts', JSON.stringify(likedPosts)); } - this.disabled = false; - }.bind(this)) - .catch(function() { this.disabled = false; }.bind(this)); + self.disabled = false; + }) + .catch(function() { self.disabled = false; }); }); }); })();