mirror of
https://github.com/wahyd4/links.git
synced 2026-08-08 21:04:53 +10:00
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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user