Buttons neu sortiert

This commit is contained in:
2026-06-24 09:34:00 +02:00
parent 1cfbb8b8fe
commit 308eec734f
2 changed files with 15 additions and 10 deletions
+3 -2
View File
@@ -244,8 +244,9 @@ img.avatar-lg { width: 72px; height: 72px; }
/* Nur die Vorfahren bilden einen Thread -> Linie. Antworten nur eingerückt. */ /* Nur die Vorfahren bilden einen Thread -> Linie. Antworten nur eingerückt. */
#ancestors .threadline { border-right: var(--line-w) solid gray; } #ancestors .threadline { border-right: var(--line-w) solid gray; }
/* Interaktionsleiste: Vote-Buttons zentriert (das Antworten-Label sitzt jetzt /* Interaktionsleiste: Antworten-Button links, Vote-Buttons mittig, Repost
oben in der Byline). */ rechts. Antwort- und Repost-Zahl stehen in den Buttons; der Repost-Cooldown
wandert in die Byline (siehe setupBump). */
.interactions { .interactions {
display: flex; display: flex;
align-items: center; align-items: center;
+12 -8
View File
@@ -73,10 +73,12 @@ function renderEntry(e) {
media = `<img src="/${e.filepath}" alt="" loading="lazy">`; media = `<img src="/${e.filepath}" alt="" loading="lazy">`;
} }
// Antwort- und Repost-Zahl wandern in die Buttons unten; in der Byline bleibt
// nur Name, Zeit und (im Cooldown) der Hinweis bis zum nächsten Repost.
el.innerHTML = ` el.innerHTML = `
<div class="muted byline"> <div class="muted byline">
<a href="/u/${user}"><img class="avatar avatar-sm" src="${avatarUrl(e.avatar)}" alt="" loading="lazy"></a> <a href="/u/${user}"><img class="avatar avatar-sm" src="${avatarUrl(e.avatar)}" alt="" loading="lazy"></a>
<span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when} · <a href="/e/${e.pid}">${replyLabel}</a> · ${repostLabel}</span> <span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when}<span class="cooldown"></span></span>
</div> </div>
<div class="threadline-wrapper"> <div class="threadline-wrapper">
<div class="threadline"></div> <div class="threadline"></div>
@@ -84,12 +86,13 @@ function renderEntry(e) {
<div class="content">${linkify(e.content)}</div> <div class="content">${linkify(e.content)}</div>
${media} ${media}
<div class="interactions"> <div class="interactions">
<a class="button reply" href="/e/${e.pid}">Antworten (${e.reply_count})</a>
<div class="row"> <div class="row">
<button class="ghost" data-mode="left">Links</button> <button class="ghost" data-mode="left">Links</button>
<span class="muted"> / </span> <span class="muted"> / </span>
<button class="ghost" data-mode="right">Rechts</button> <button class="ghost" data-mode="right">Rechts</button>
</div> </div>
<button class="bump" type="button">Repost</button> <button class="bump" type="button">Repost (${e.bump_count})</button>
</div> </div>
</div> </div>
</div> </div>
@@ -137,16 +140,17 @@ function setupVoting(el, pid) {
function setupBump(el, e) { function setupBump(el, e) {
const btn = el.querySelector(".bump"); const btn = el.querySelector(".bump");
if (!btn) return; if (!btn) return;
const cooldown = el.querySelector(".cooldown");
// sekunden bis zum nächsten erlaubten Bump aus den geladenen Daten. // sekunden bis zum nächsten erlaubten Bump aus den geladenen Daten.
const nowSec = () => Math.floor(Date.now() / 1000); const nowSec = () => Math.floor(Date.now() / 1000);
// lock sperrt den Button und zeigt die grobe Restzeit (auf Tage aufgerundet, // lock sperrt den Button; die Restzeit steht jetzt oben in der Byline, auf
// mindestens 1 -> nie "0 Tage", solange noch Restzeit übrig ist). // Stunden aufgerundet (mindestens 1 -> nie "0h", solange Restzeit übrig ist).
function lock(retryAfter) { function lock(retryAfter) {
btn.disabled = true; btn.disabled = true;
const days = Math.max(1, Math.ceil(retryAfter / 86400)); const hours = Math.max(1, Math.ceil(retryAfter / 3600));
btn.textContent = `Repost (${days} ${days === 1 ? "Tag" : "Tage"})`; if (cooldown) cooldown.textContent = ` · Repost in ${hours}h`;
} }
const remaining = e.last_bump + e.bump_count * 86400 - nowSec(); const remaining = e.last_bump + e.bump_count * 86400 - nowSec();
@@ -155,8 +159,8 @@ function setupBump(el, e) {
btn.addEventListener("click", async () => { btn.addEventListener("click", async () => {
const res = await api.post(`/entry/${e.pid}/bump`, new FormData()); const res = await api.post(`/entry/${e.pid}/bump`, new FormData());
if (res.ok) { if (res.ok) {
btn.disabled = true; btn.textContent = `Repost (${res.data.bump_count})`;
btn.textContent = "repostet"; lock(res.data.retry_after || 86400);
} else if (res.status === 429) { } else if (res.status === 429) {
lock(res.data.retry_after || 86400); lock(res.data.retry_after || 86400);
} else { } else {