fix: tag detail caps resource cards at 20 per tab + View all link

technology tag has 511 posts — the Posts tab rendered all of them, creating a
multi-thousand-pixel page on mobile (looked broken / unusable). Each section
now renders the latest 20 cards, shows the true total in the section badge,
and links 'View all N …' to the respective list page. slice:20 on all four
resource types (links/posts/pages/collections).
This commit is contained in:
OpenClaw Sub-agent
2026-08-03 19:04:03 +10:00
parent 49c0c7fc95
commit adab6048d6
+44 -8
View File
@@ -155,10 +155,13 @@
<!-- Links -->
<div id="links-section" class="resource-section apple-card">
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Links with this tag" %}</h2>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
{% trans "Links with this tag" %}
<span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ links|length }}</span>
</h2>
{% if links %}
<div class="res-grid">
{% for link in links %}
{% for link in links|slice:":20" %}
<a href="{% url 'link_detail' pk=link.pk %}" class="res-card">
<h3>{{ link.alias }}</h3>
{% if link.description %}<p class="res-desc">{{ link.description }}</p>{% endif %}
@@ -171,6 +174,12 @@
</a>
{% endfor %}
</div>
{% if links|length > 20 %}
<a href="{% url 'link_list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
{% blocktrans with n=links|length %}View all {{ n }} links{% endblocktrans %}
<svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
</a>
{% endif %}
{% else %}
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
@@ -183,10 +192,13 @@
<!-- Posts -->
<div id="posts-section" class="resource-section apple-card" hidden>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Posts with this tag" %}</h2>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
{% trans "Posts with this tag" %}
<span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ posts|length }}</span>
</h2>
{% if posts %}
<div class="res-grid">
{% for post in posts %}
{% for post in posts|slice:":20" %}
<a href="{% url 'post-detail' pk=post.pk %}" class="res-card">
<h3>{{ post.title }}</h3>
{% if post.summary %}<p class="res-desc">{{ post.summary }}</p>{% endif %}
@@ -199,6 +211,12 @@
</a>
{% endfor %}
</div>
{% if posts|length > 20 %}
<a href="{% url 'post-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
{% blocktrans with n=posts|length %}View all {{ n }} posts{% endblocktrans %}
<svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
</a>
{% endif %}
{% else %}
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
@@ -211,10 +229,13 @@
<!-- Pages -->
<div id="pages-section" class="resource-section apple-card" hidden>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Pages with this tag" %}</h2>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
{% trans "Pages with this tag" %}
<span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ pages|length }}</span>
</h2>
{% if pages %}
<div class="res-grid">
{% for page in pages %}
{% for page in pages|slice:":20" %}
<a href="{% url 'page-detail' pk=page.pk %}" class="res-card">
<h3>{{ page.title|default:page.url }}</h3>
{% if page.summary %}<p class="res-desc">{{ page.summary }}</p>{% endif %}
@@ -227,6 +248,12 @@
</a>
{% endfor %}
</div>
{% if pages|length > 20 %}
<a href="{% url 'page-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
{% blocktrans with n=pages|length %}View all {{ n }} pages{% endblocktrans %}
<svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
</a>
{% endif %}
{% else %}
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
@@ -239,10 +266,13 @@
<!-- Image Collections -->
<div id="collections-section" class="resource-section apple-card" hidden>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">{% trans "Image Collections with this tag" %}</h2>
<h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
{% trans "Image Collections with this tag" %}
<span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ image_collections|length }}</span>
</h2>
{% if image_collections %}
<div class="res-grid">
{% for collection in image_collections %}
{% for collection in image_collections|slice:":20" %}
<a href="{% url 'collection-detail' pk=collection.pk %}" class="res-card">
<h3>{{ collection.name }}</h3>
{% if collection.description %}<p class="res-desc">{{ collection.description }}</p>{% endif %}
@@ -255,6 +285,12 @@
</a>
{% endfor %}
</div>
{% if image_collections|length > 20 %}
<a href="{% url 'collection-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
{% blocktrans with n=image_collections|length %}View all {{ n }} collections{% endblocktrans %}
<svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
</a>
{% endif %}
{% else %}
<div class="res-empty">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">