Redesign the News page around D8's list + preview split view
Replaces the flat news list with a D8-style two-pane layout: a filterable list on the left (All/Drafts/Scheduled/Published chips with counts) and a preview of whichever item is selected on the right, reusing the same article/photos/publish markup news_detail.html already had (now factored into _news_preview.html so both pages share it). Adds an NL/EN language toggle to the article preview -- the club's two content languages are now switchable in place, with a fallback note when a translation is missing, instead of a separate "English" card that only appeared once translated. The standalone news_detail.html permalink page is unchanged behaviourally. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
@@ -29,102 +29,5 @@
|
||||
{% endblock actions %}
|
||||
|
||||
{% block panel %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% if news_item.teams.all %}
|
||||
<div class="mb-1 flex flex-wrap gap-2">
|
||||
{% for team in news_item.teams.all %}
|
||||
<span class="badge badge-neutral">{{ team.short_name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="mb-1 font-display text-xs font-bold tracking-[.14em] text-club uppercase">{% trans "Club-wide" %}</div>
|
||||
{% endif %}
|
||||
<div class="h-[3px] w-14 bg-club"></div>
|
||||
<p class="whitespace-pre-line text-[15px] leading-relaxed text-ink">{{ news_item.body }}</p>
|
||||
|
||||
{% if news_item.created_by %}
|
||||
<div class="mt-2 flex items-center gap-2.5 border-t border-line pt-3.5 text-sm text-muted">
|
||||
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-steel font-display text-xs font-extrabold text-white">{{ news_item.created_by.first_name|slice:":1" }}{{ news_item.created_by.last_name|slice:":1" }}</span>
|
||||
{% blocktrans with name=news_item.created_by %}Posted by {{ name }}{% endblocktrans %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if news_item.title_en or news_item.body_en %}
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{% lucide "languages" size=18 %} {% trans "English" %}</h2>
|
||||
{% if news_item.title_en %}<p class="font-display text-lg font-extrabold text-ink uppercase">{{ news_item.title_en }}</p>{% endif %}
|
||||
{% if news_item.body_en %}<p class="whitespace-pre-line text-[15px] leading-relaxed text-ink">{{ news_item.body_en }}</p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card mt-4">
|
||||
<div class="card-body">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 class="card-title">{% lucide "image" size=18 %} {% trans "Photos" %}</h2>
|
||||
{% if can_edit %}
|
||||
<button class="btn btn-outline btn-sm gap-2" type="button" onclick="document.getElementById('add_photos_modal').showModal()">{% lucide "image-plus" size=14 %} {% trans "Add photos" %}</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
{% for photo in news_item.photos.all %}
|
||||
<div class="relative">
|
||||
<img class="aspect-square w-full rounded-box border border-line object-cover" src="{{ photo.image.url }}" alt="">
|
||||
{% if photo.is_main %}
|
||||
<span class="badge badge-success badge-sm absolute top-1.5 left-1.5">{% trans "Main" %}</span>
|
||||
{% endif %}
|
||||
{% if can_edit %}
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
{% if not photo.is_main %}
|
||||
<form method="post" action="{% url 'management:news_photo_set_main' news_item.pk photo.pk %}">
|
||||
{% csrf_token %}
|
||||
<button class="btn btn-outline btn-xs gap-1" type="submit">{% lucide "star" size=12 %} {% trans "Set main" %}</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<button class="btn btn-outline btn-error btn-xs gap-1" type="button" onclick="document.getElementById('{{ photo.pk|dom_id:"delete_photo_modal" }}').showModal()">{% lucide "trash-2" size=12 %} {% trans "Delete" %}</button>
|
||||
</div>
|
||||
{% url 'management:news_photo_delete' news_item.pk photo.pk as delete_photo_url %}
|
||||
{% trans "Delete photo" as delete_photo_title %}
|
||||
{% trans "This photo will be permanently removed." as delete_photo_body %}
|
||||
{% trans "Delete" as delete_label %}
|
||||
{% include "controlpanel/_confirm_modal.html" with modal_id=photo.pk|dom_id:"delete_photo_modal" title=delete_photo_title body=delete_photo_body action_url=delete_photo_url submit_label=delete_label submit_icon="trash-2" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<p class="col-span-full text-sm text-muted">{% trans "No photos yet." %}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if can_edit %}
|
||||
{% trans "Add photos" as add_photos_label %}
|
||||
{% url 'management:news_photo_upload' news_item.pk as add_photos_url %}
|
||||
{% include "controlpanel/_modal_form.html" with modal_id="add_photos_modal" title=add_photos_label form=photo_upload_form action_url=add_photos_url submit_label=add_photos_label submit_icon="image-plus" %}
|
||||
|
||||
{% trans "Delete news item" as delete_news_title %}
|
||||
{% blocktrans asvar delete_news_body %}Delete “{{ news_item }}”? Its photos go with it. This cannot be undone.{% endblocktrans %}
|
||||
{% trans "Delete" as delete_label %}
|
||||
{% url 'management:news_delete' news_item.pk as delete_news_url %}
|
||||
{% include "controlpanel/_confirm_modal.html" with modal_id="delete_news_modal" title=delete_news_title body=delete_news_body action_url=delete_news_url submit_label=delete_label %}
|
||||
{% endif %}
|
||||
|
||||
{% if can_publish %}
|
||||
{% if news_item.status == "draft" %}
|
||||
{% trans "Publish" as publish_label %}
|
||||
{% url 'management:news_publish' news_item.pk as publish_url %}
|
||||
{% trans "Leave as now to publish immediately, or pick a future date/time to schedule it." as publish_blurb %}
|
||||
{% include "controlpanel/_modal_form.html" with modal_id="publish_modal" title=publish_label form=publish_form action_url=publish_url submit_label=publish_label submit_icon="upload" blurb=publish_blurb %}
|
||||
{% else %}
|
||||
{% trans "Unpublish" as unpublish_label %}
|
||||
{% blocktrans asvar unpublish_body %}This pulls “{{ news_item }}” back to a draft. It won't be visible anywhere until it's published again.{% endblocktrans %}
|
||||
{% url 'management:news_unpublish' news_item.pk as unpublish_url %}
|
||||
{% include "controlpanel/_confirm_modal.html" with modal_id="unpublish_modal" title=unpublish_label body=unpublish_body action_url=unpublish_url submit_label=unpublish_label submit_icon="eye-off" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% include "management/_news_preview.html" with show_header=False %}
|
||||
{% endblock panel %}
|
||||
|
||||
Reference in New Issue
Block a user