Buttons neu sortiert
This commit is contained in:
+3
-2
@@ -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
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user