feat(website): show desc-row on index page when a filter is active

On category pages desc-rows are always visible. On the index page they
were always hidden. Now they become visible whenever a tag/category
filter is applied, giving filtered results the same richness as category
pages.

Also tightens two related CSS rules: border-bottom suppression only
fires when the adjacent desc-row is actually visible, and the expand-row
description is hidden while the desc-row is already showing to avoid
duplicate text.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-05-03 13:08:27 +08:00
parent 1afccd8bc9
commit fc8d1ba35e
3 changed files with 19 additions and 3 deletions

View File

@@ -132,6 +132,7 @@ function collapseAll() {
function applyFilters() {
const query = searchInput ? searchInput.value.toLowerCase().trim() : "";
const descRowsVisible = !isIndexDocument || activeFilter !== null;
let visibleCount = 0;
collapseAll();
@@ -159,8 +160,11 @@ function applyFilters() {
}
if (row.hidden !== !show) row.hidden = !show;
if (row._descRow && row._descRow.hidden !== !show) {
row._descRow.hidden = !show;
if (row._descRow) {
const descHidden = !show || !descRowsVisible;
if (row._descRow.hidden !== descHidden) {
row._descRow.hidden = descHidden;
}
}
if (show) {

View File

@@ -788,7 +788,7 @@ kbd {
box-shadow: inset 3px 0 0 var(--accent);
}
.row:has(+ .desc-row) td {
.row:has(+ .desc-row:not([hidden])) td {
border-bottom-color: transparent;
padding-bottom: 0.35rem;
}
@@ -980,6 +980,10 @@ th[data-sort].sort-asc::after {
display: table-row;
}
.desc-row:not([hidden]) + .expand-row .expand-desc {
display: none;
}
.expand-row td {
padding-top: 0.1rem;
padding-bottom: 1.15rem;

View File

@@ -251,6 +251,14 @@
</td>
<td class="col-arrow"><span class="arrow">&rarr;</span></td>
</tr>
{% if entry.description %}
<tr class="desc-row" aria-hidden="true" hidden>
<td class="col-num"></td>
<td colspan="5">
<div class="desc-text">{{ entry.description | safe }}</div>
</td>
</tr>
{% endif %}
<tr class="expand-row" id="expand-{{ loop.index }}">
<td></td>
<td colspan="4">