style: render homepage descriptions in the category pages' description row

The homepage printed each description inside its expanded row as .expand-desc, styled apart from the .desc-row that category pages use, so every spacing change to the table had to be tuned twice. The homepage now reveals the same .desc-row while a row is open, so its descriptions take the category pages' 15.2px size, and the .expand-desc markup and styles are gone.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-10-21 23:37:37 +08:00
co-authored by Claude
parent 7fa386709c
commit 4ea309ff7d
3 changed files with 11 additions and 21 deletions
+10 -12
View File
@@ -123,12 +123,18 @@ rows.forEach(function (row, i) {
row._expandRow = next;
});
function setRowOpen(row, open) {
row.classList.toggle("open", open);
row.setAttribute("aria-expanded", String(open));
// The homepage shows a row's description only while the row is open
if (isIndexDocument && row._descRow) row._descRow.hidden = !open;
}
function collapseAll() {
if (!tbody) return;
const openRows = tbody.querySelectorAll("tr.row.open");
openRows.forEach(function (row) {
row.classList.remove("open");
row.setAttribute("aria-expanded", "false");
setRowOpen(row, false);
});
}
@@ -312,14 +318,7 @@ if (tbody) {
}
if (!row) return;
const isOpen = row.classList.contains("open");
if (isOpen) {
row.classList.remove("open");
row.setAttribute("aria-expanded", "false");
} else {
row.classList.add("open");
row.setAttribute("aria-expanded", "true");
}
setRowOpen(row, !row.classList.contains("open"));
});
// Keyboard: Enter or Space on focused .row toggles expand
@@ -367,8 +366,7 @@ function openEntryRow(row) {
searchInput.value = "";
applyFilters();
}
row.classList.add("open");
row.setAttribute("aria-expanded", "true");
setRowOpen(row, true);
}
// Group headings are hidden while sorted flat or filtered out by search, so a link to one must restore them first
-6
View File
@@ -1151,10 +1151,6 @@ th[data-sort].sort-asc::after {
display: table-row;
}
.desc-row:not([hidden]) + .expand-row .expand-desc {
display: none;
}
.table .expand-row td {
padding-top: 0;
background: var(--row-open);
@@ -1172,14 +1168,12 @@ th[data-sort].sort-asc::after {
animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.expand-desc a,
.expand-also-see a,
.expand-meta a,
.footer a {
color: var(--accent-deep);
}
.expand-desc a:hover,
.expand-also-see a:hover,
.expand-meta a:hover {
color: var(--accent);
+1 -3
View File
@@ -235,9 +235,7 @@
<td></td>
<td colspan="5">
<div class="expand-content">
{% if entry.description %}
<div class="expand-desc">{{ entry.description | safe }}</div>
{% endif %} {% if entry.also_see %}
{% if entry.also_see %}
<div class="expand-also-see">
Also see: {% for see in entry.also_see %}<a
href="{{ see.url }}"