fix: render group page category list as collapsible details

Group pages rendered "Browse by category" with a plain div heading instead of the homepage's details/summary, so the two-column grid never applied, the arrow showed but did nothing, and the list didn't collapse on phones.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-10-26 12:08:15 +08:00
co-authored by Claude
parent 00129eb2a6
commit 7974eeacdf
+20 -12
View File
@@ -56,18 +56,26 @@
{% if group_categories %}
<nav class="hero-category-nav" aria-labelledby="hero-category-heading">
<div class="hero-category-meta">
<h2 id="hero-category-heading">Browse by category</h2>
</div>
<ul class="hero-category-links">
{% for sub in group_categories %}
<li>
<a class="hero-category-link" href="{{ category_urls[sub.name] }}"
>{{ sub.name }}</a
>
</li>
{% endfor %}
</ul>
<details class="hero-category-details" open>
<summary class="hero-category-meta">
<h2 id="hero-category-heading">Browse by category</h2>
</summary>
<ul class="hero-category-links">
{% for sub in group_categories %}
<li>
<a class="hero-category-link" href="{{ category_urls[sub.name] }}"
>{{ sub.name }}</a
>
</li>
{% endfor %}
</ul>
</details>
<script>
// Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
if (matchMedia("(max-width: 680px)").matches) {
document.currentScript.previousElementSibling.open = false;
}
</script>
</nav>
{% endif %}
</div>