Collapse watchlist alternative titles
This commit is contained in:
+30
-8
@@ -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 ? "✓" : ""}</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"
|
||||
|
||||
Reference in New Issue
Block a user