feat: Like-Button jetzt auch auf Detailseite klickbar

- Detailseite: 👍 als interaktiver Button (statt statischer Text)
- JS-Fetch-Handler auf /api/like/<id>, Cookie-Dedup
- CSS: .detail-like-btn mit Hover/Liked-Styles (BSN-Blau)
- Gleiche Logik wie Übersichtskarten (1 Like pro Browser)
This commit is contained in:
Hermes Agent
2026-06-17 22:04:06 +02:00
parent 600ef6ac8d
commit a8be332662
+29 -2
View File
@@ -2833,7 +2833,10 @@ def public_detail(sub_id: int):
.detail-card {{ padding:1.2rem; }} .detail-card {{ padding:1.2rem; }}
.site-header {{ padding:0.8rem 1rem; }} .site-header {{ padding:0.8rem 1rem; }}
}} }}
</style>
.detail-like-btn:hover {{ border-color:#20228a; color:#20228a; background:rgba(32,34,138,0.05); }}
.detail-like-btn.liked {{ background:#20228a; color:#fff; border-color:#20228a; font-weight:600; }}
.detail-like-btn:active {{ transform:scale(0.94); }}</style>
</head> </head>
<body> <body>
<header class="site-header"> <header class="site-header">
@@ -2854,7 +2857,7 @@ def public_detail(sub_id: int):
{"".join([f'<div class="detail-content">{content}</div>' if content else ''])} {"".join([f'<div class="detail-content">{content}</div>' if content else ''])}
<div style="display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0ede6;"> <div style="display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0ede6;">
<span style="font-size:0.8rem;color:#999;">👁 {row['views'] or 0} Aufrufe</span> <span style="font-size:0.8rem;color:#999;">👁 {row['views'] or 0} Aufrufe</span>
<span style="font-size:0.8rem;color:#999;">👍 {row['likes'] or 0}</span> <button id="detail-like-btn" data-id="{sub_id}" class="detail-like-btn">👍 {row['likes'] or 0}</button>
</div> </div>
</article> </article>
</main> </main>
@@ -2864,6 +2867,30 @@ def public_detail(sub_id: int):
<div style="text-align:center;padding:1rem 1.5rem 2.5rem;font-size:0.7rem;color:#aaa;max-width:720px;margin:0 auto;"> <div style="text-align:center;padding:1rem 1.5rem 2.5rem;font-size:0.7rem;color:#aaa;max-width:720px;margin:0 auto;">
Beitrags-ID: <strong style="color:#20228a;">#{sub_id}</strong> \u2014 Bei Fragen oder Löschwunsch bitte diese ID angeben. Beitrags-ID: <strong style="color:#20228a;">#{sub_id}</strong> \u2014 Bei Fragen oder Löschwunsch bitte diese ID angeben.
</div> </div>
<script>
(function(){{
var btn = document.getElementById('detail-like-btn');
if (!btn) return;
btn.addEventListener('click', function() {{
if (this.classList.contains('liked')) return;
this.disabled = true;
var id = this.getAttribute('data-id');
fetch('/api/like/' + id, {{method:'POST'}})
.then(function(r) {{ return r.json(); }})
.then(function(data) {{
if (!data.already) {{
btn.classList.add('liked');
btn.textContent = '👍 ' + data.likes;
btn.style.background = '#20228a';
btn.style.color = '#fff';
btn.style.borderColor = '#20228a';
}}
btn.disabled = false;
}})
.catch(function() {{ btn.disabled = false; }});
}});
}})();
</script>
</body> </body>
</html>""" </html>"""