Collapse watchlist alternative titles

This commit is contained in:
Dymas
2026-05-23 19:01:30 +02:00
parent 84c2e533d0
commit 0c1b46e395
7 changed files with 58 additions and 17 deletions
+30 -8
View File
@@ -413,13 +413,23 @@ WATCHLIST_HTML = r"""<!doctype html>
flex: 1;
min-width: 0;
}
.alt-title {
.alt-toggle {
min-height: 30px;
padding: 0 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
}
.alt-titles {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
margin-top: 4px;
margin-top: 8px;
overflow-wrap: anywhere;
min-height: 1.35em;
display: none;
}
.alt-titles.visible {
display: block;
}
.card-title a {
color: inherit;
@@ -1001,7 +1011,8 @@ WATCHLIST_HTML = r"""<!doctype html>
<div class="title-row">
<div>
<div class="card-title"></div>
<div class="alt-title"></div>
<button class="ghost alt-toggle" type="button" hidden>Alternative titles</button>
<div class="alt-titles" hidden></div>
</div>
<span class="finish-check ${item.finished_badge || ""}" ${item.finished_badge ? "" : "hidden"}>${item.finished_badge ? "&check;" : ""}</span>
</div>
@@ -1030,10 +1041,21 @@ WATCHLIST_HTML = r"""<!doctype html>
titleLink.rel = "noopener noreferrer";
titleLink.textContent = item.title;
titleNode.replaceChildren(titleLink);
const altTitleNode = card.querySelector(".alt-title");
altTitleNode.textContent = (item.display_alt_titles || []).length
? `Alt: ${item.display_alt_titles.join(" · ")}`
: "";
const altToggle = card.querySelector(".alt-toggle");
const altTitlesNode = card.querySelector(".alt-titles");
const altTitles = item.display_alt_titles || [];
if (altTitles.length) {
altToggle.hidden = false;
altTitlesNode.hidden = false;
altTitlesNode.textContent = altTitles.join(" · ");
altToggle.setAttribute("aria-expanded", "false");
altToggle.addEventListener("click", () => {
const visible = altTitlesNode.classList.toggle("visible");
altToggle.setAttribute("aria-expanded", visible ? "true" : "false");
altToggle.textContent = visible ? "Hide alternative titles" : "Alternative titles";
});
altToggle.textContent = "Alternative titles";
}
const finishCheck = card.querySelector(".finish-check");
if (finishCheck && item.finished_badge) {
finishCheck.title = item.finished_badge === "downloaded"