Show up to 3 news items on Home, with a link to a full "All news" page
Home's news card now shows up to 3 recent items (lead item with its photo placeholder, the next two as compact rows) instead of just the latest one, plus an "All news" link -- the design canvas's own M1 markup already had that link, just unbuilt until now. Both also now filter by visibility (internal or both, never external-only -- that's the public website's own audience), which the teaser never actually enforced before. New mobile:news_list page is the full archive: every published, member-visible item for the club, newest first, not narrowed to any particular team the way Home's own teaser is. Paginated at 20/page. The bottom tab bar's News tab now links here instead of a dead #news anchor on Home. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
@@ -95,7 +95,7 @@
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||||
<span class="tab-bar-label">{% trans "Calendar" %}</span>
|
||||
</a>
|
||||
<a class="tab-bar-item {% if active_tab == "news" %}tab-bar-item-active{% endif %}" href="{% url "mobile:home" %}#news">
|
||||
<a class="tab-bar-item {% if active_tab == "news" %}tab-bar-item-active{% endif %}" href="{% url "mobile:news_list" %}">
|
||||
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9l5 5v9a2 2 0 0 1-2 2Z"/><path d="M9 13h6M9 17h6M9 9h1"/></svg>
|
||||
<span class="tab-bar-label">{% trans "News" %}</span>
|
||||
</a>
|
||||
|
||||
@@ -126,24 +126,40 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if news_item %}
|
||||
{% if news_items %}
|
||||
<div>
|
||||
<div class="mb-2.5 flex items-baseline justify-between">
|
||||
<span class="font-display text-xs font-extrabold text-muted uppercase tracking-wide">{% trans "Club news" %}</span>
|
||||
<a class="text-xs font-semibold text-club" href="{% url "mobile:news_list" %}">{% trans "All news" %}</a>
|
||||
</div>
|
||||
<a class="m-card block overflow-hidden" href="{% url "mobile:news_detail" news_item.slug %}">
|
||||
<div class="flex h-[104px] items-center justify-center bg-line text-xs text-dim">{% trans "News photo" %}</div>
|
||||
<div class="p-3.5">
|
||||
<div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
|
||||
{% if news_team %}{{ news_team.name }}{% else %}{% trans "Club news" %}{% endif %} · {{ news_item.published_at|date:"d M" }}
|
||||
{% with lead=news_items.0 %}
|
||||
<a class="m-card block overflow-hidden" href="{% url "mobile:news_detail" lead.slug %}">
|
||||
<div class="flex h-[104px] items-center justify-center bg-line text-xs text-dim">{% trans "News photo" %}</div>
|
||||
<div class="p-3.5">
|
||||
<div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
|
||||
{% with team=lead.teams.first %}{% if team %}{{ team.name }}{% else %}{% trans "Club news" %}{% endif %}{% endwith %} · {{ lead.published_at|date:"d M" }}
|
||||
</div>
|
||||
<div class="mt-1 font-display text-xl leading-tight font-extrabold text-ink uppercase">{{ lead.title }}</div>
|
||||
</div>
|
||||
<div class="mt-1 font-display text-xl leading-tight font-extrabold text-ink uppercase">{{ news_item.title }}</div>
|
||||
</a>
|
||||
{% endwith %}
|
||||
{% if news_items|length > 1 %}
|
||||
<div class="m-card mt-2.5 overflow-hidden">
|
||||
{% for item in news_items|slice:"1:" %}
|
||||
{% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
|
||||
<a class="block p-3.5" href="{% url "mobile:news_detail" item.slug %}">
|
||||
<div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
|
||||
{% with team=item.teams.first %}{% if team %}{{ team.name }}{% else %}{% trans "Club news" %}{% endif %}{% endwith %} · {{ item.published_at|date:"d M" }}
|
||||
</div>
|
||||
<div class="text-sm font-semibold text-ink">{{ item.title }}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not hero_attendance and not needs_answer and not dues_rows and not news_item %}
|
||||
{% if not hero_attendance and not needs_answer and not dues_rows and not news_items %}
|
||||
<div class="m-card p-6 text-center">
|
||||
<p class="text-sm text-muted">{% trans "Nothing to show right now." %}</p>
|
||||
</div>
|
||||
|
||||
48
mobile/templates/mobile/news_list.html
Normal file
48
mobile/templates/mobile/news_list.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% extends "mobile/base.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% comment %}
|
||||
"All news" -- what Home's own news card links to. Every published,
|
||||
member-visible (internal or both) news item, newest first, full-width
|
||||
like Calendar's own agenda rows (see NewsListView's docstring for why
|
||||
this isn't filtered to just this account's teams the way Home's own
|
||||
teaser is).
|
||||
{% endcomment %}
|
||||
|
||||
{% block content %}
|
||||
<div class="-mx-4">
|
||||
{% if page.object_list %}
|
||||
<div class="flex flex-col gap-px bg-line">
|
||||
{% for item in page.object_list %}
|
||||
<a class="flex flex-col gap-1 bg-white px-4 py-3" href="{% url "mobile:news_detail" item.slug %}">
|
||||
<div class="font-display text-[11px] font-extrabold text-club uppercase tracking-wide">
|
||||
{% with team=item.teams.first %}{% if team %}{{ team.name }}{% else %}{% trans "Club news" %}{% endif %}{% endwith %} · {{ item.published_at|date:"d M Y" }}
|
||||
</div>
|
||||
<div class="text-[15px] font-semibold text-ink">{{ item.title }}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if page.has_other_pages %}
|
||||
<div class="flex items-center justify-between px-4 py-3">
|
||||
{% if page.has_previous %}
|
||||
<a class="font-display text-xs font-extrabold tracking-wide text-club uppercase" href="?page={{ page.previous_page_number }}">{% trans "Newer" %}</a>
|
||||
{% else %}
|
||||
<span></span>
|
||||
{% endif %}
|
||||
{% if page.has_next %}
|
||||
<a class="font-display text-xs font-extrabold tracking-wide text-club uppercase" href="?page={{ page.next_page_number }}">{% trans "Older" %}</a>
|
||||
{% else %}
|
||||
<span></span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="mx-4">
|
||||
<div class="m-card p-6 text-center">
|
||||
<p class="text-sm text-muted">{% trans "No news yet." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user