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:
@@ -1678,3 +1678,34 @@
|
||||
color: var(--color-club-content);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- News preview (management/templates/management/_news_preview.html) ---
|
||||
The NL/EN language toggle above the article body -- same bg-steel pill
|
||||
shell as member_list.html's Members/Guardians/Both selector, but a JS-
|
||||
toggled pair of <button>s (an in-page content swap, not a page navigation
|
||||
with its own querystring state) rather than links, so a dedicated small
|
||||
class pair is simpler than juggling several Tailwind utilities via
|
||||
classList from the script. */
|
||||
@layer components {
|
||||
.news-lang-btn {
|
||||
border-radius: 999px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-on-dark);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.news-lang-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.news-lang-btn.active {
|
||||
background: #fff;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
}
|
||||
|
||||
170
management/templates/management/_news_preview.html
Normal file
170
management/templates/management/_news_preview.html
Normal file
@@ -0,0 +1,170 @@
|
||||
{% load i18n lucide ui %}
|
||||
{% comment %}
|
||||
The D8 "Editor" pane -- shared by news_list.html's split-view preview and
|
||||
news_detail.html's standalone permalink page, so this article/photos/
|
||||
publish markup exists in exactly one place. Expects the context both
|
||||
views already build identically: news_item, can_edit, can_publish,
|
||||
publish_form, photo_upload_form. Pass show_header=False from a page that
|
||||
already renders its own status/Edit/Publish row elsewhere (news_detail.html
|
||||
puts them in the topbar, same as every other detail page in this app) --
|
||||
news_list.html's split view has no such per-item topbar, so it needs this
|
||||
include to carry that row itself.
|
||||
{% endcomment %}
|
||||
<div class="flex flex-col gap-4">
|
||||
{% if show_header|default:True %}
|
||||
<div class="flex flex-wrap items-center justify-between gap-2 border-b border-line pb-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{% if news_item.status == "draft" %}
|
||||
<span class="badge">{% trans "Draft" %}</span>
|
||||
{% elif news_item.is_scheduled %}
|
||||
<span class="badge badge-info">{% blocktrans with date=news_item.published_at %}Scheduled for {{ date }}{% endblocktrans %}</span>
|
||||
{% else %}
|
||||
<span class="badge badge-success">{% blocktrans with date=news_item.published_at %}Published {{ date }}{% endblocktrans %}</span>
|
||||
{% endif %}
|
||||
<span class="font-mono text-xs text-dim">{{ news_item.get_visibility_display }}</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{% if can_edit %}
|
||||
<a class="btn btn-outline btn-sm gap-2" href="{% url 'management:news_update' news_item.pk %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</a>
|
||||
<button class="btn btn-outline btn-error btn-sm gap-2" type="button" onclick="document.getElementById('delete_news_modal').showModal()">{% lucide "trash-2" size=14 %} {% trans "Delete" %}</button>
|
||||
{% endif %}
|
||||
{% if can_publish %}
|
||||
{% if news_item.status == "draft" %}
|
||||
<button class="btn btn-primary btn-sm gap-2" type="button" onclick="document.getElementById('publish_modal').showModal()">{% lucide "upload" size=14 %} {% trans "Publish" %}</button>
|
||||
{% else %}
|
||||
<button class="btn btn-outline btn-warning btn-sm gap-2" type="button" onclick="document.getElementById('unpublish_modal').showModal()">{% lucide "eye-off" size=14 %} {% trans "Unpublish" %}</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card overflow-hidden">
|
||||
{% if news_item.main_photo %}
|
||||
<img class="h-[190px] w-full object-cover" src="{{ news_item.main_photo.image.url }}" alt="">
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-1 rounded-full bg-steel p-1">
|
||||
<button type="button" class="news-lang-btn active" data-lang="nl">{% trans "Dutch" %}</button>
|
||||
<button type="button" class="news-lang-btn" data-lang="en">{% trans "English" %}</button>
|
||||
</div>
|
||||
{% if not news_item.title_en and not news_item.body_en %}
|
||||
<span class="news-lang-note hidden font-mono text-xs text-dim" data-lang-note="en">{% trans "No English translation yet -- showing Dutch." %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% 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="news-lang-content" data-lang-content="nl">
|
||||
<h1 class="font-display text-3xl leading-[1.05] font-extrabold text-ink uppercase md:text-4xl">{{ news_item.title }}</h1>
|
||||
<div class="my-3 h-[3px] w-14 bg-club"></div>
|
||||
<p class="whitespace-pre-line text-[15px] leading-relaxed text-ink">{{ news_item.body }}</p>
|
||||
</div>
|
||||
<div class="news-lang-content hidden" data-lang-content="en">
|
||||
<h1 class="font-display text-3xl leading-[1.05] font-extrabold text-ink uppercase md:text-4xl">{{ news_item.effective_title_en }}</h1>
|
||||
<div class="my-3 h-[3px] w-14 bg-club"></div>
|
||||
<p class="whitespace-pre-line text-[15px] leading-relaxed text-ink">{{ news_item.effective_body_en }}</p>
|
||||
</div>
|
||||
|
||||
{% 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>
|
||||
|
||||
<div class="card">
|
||||
<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>
|
||||
</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 %}
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
// Scoped to this include's own root, not document-wide -- news_list.html
|
||||
// can end up with two copies of this template's ids on the page across
|
||||
// navigations only in theory (each request only ever renders one
|
||||
// selected item), but querying from a scope root costs nothing and
|
||||
// avoids ever wiring the same listener twice if that assumption changes.
|
||||
document.querySelectorAll(".news-lang-btn").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const lang = button.dataset.lang;
|
||||
document.querySelectorAll(".news-lang-btn").forEach((b) => b.classList.toggle("active", b === button));
|
||||
document.querySelectorAll(".news-lang-content").forEach((el) => el.classList.toggle("hidden", el.dataset.langContent !== lang));
|
||||
document.querySelectorAll(".news-lang-note").forEach((el) => el.classList.toggle("hidden", el.dataset.langNote !== lang));
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -5,63 +5,57 @@
|
||||
|
||||
{% block actions %}
|
||||
{% if can_add_news %}
|
||||
<a class="btn btn-primary gap-2" href="{% url 'management:news_create' %}">{% lucide "plus" size=16 %} {% trans "New news item" %}</a>
|
||||
<a class="btn btn-primary gap-2" href="{% url 'management:news_create' %}">{% lucide "plus" size=16 %} {% trans "New post" %}</a>
|
||||
{% endif %}
|
||||
{% endblock actions %}
|
||||
|
||||
{% block panel %}
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex w-[380px] shrink-0 flex-col gap-3">
|
||||
{# D8's filter chips -- All/Drafts/Scheduled, plus Published for symmetry with the statuses this app actually has. #}
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<a href="{% querystring status=None selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "all" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "All" %} <span class="badge badge-sm badge-ghost">{{ counts.all }}</span></a>
|
||||
<a href="{% querystring status="draft" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "draft" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Drafts" %} <span class="badge badge-sm badge-ghost">{{ counts.draft }}</span></a>
|
||||
<a href="{% querystring status="scheduled" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "scheduled" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Scheduled" %} <span class="badge badge-sm badge-ghost">{{ counts.scheduled }}</span></a>
|
||||
<a href="{% querystring status="published" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "published" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Published" %} <span class="badge badge-sm badge-ghost">{{ counts.published }}</span></a>
|
||||
</div>
|
||||
|
||||
<div class="card overflow-hidden divide-y">
|
||||
{% for news_item in news_items %}
|
||||
<div class="flex items-center gap-3.5 px-4.5 py-3.5 {% if news_item.status == 'draft' %}border-l-[3px] border-club bg-row-sel{% endif %}">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="mb-1 flex flex-wrap items-center gap-2">
|
||||
{% if news_item.status == "draft" %}
|
||||
{% for item in news_items %}
|
||||
<a href="{% querystring selected=item.pk %}" class="flex flex-col gap-1 border-l-[3px] px-4 py-3 {% if news_item and item.pk == news_item.pk %}border-club bg-row-sel{% else %}border-transparent hover:bg-subhead{% endif %}">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{% if item.status == "draft" %}
|
||||
<span class="badge badge-sm">{% trans "Draft" %}</span>
|
||||
{% elif news_item.is_scheduled %}
|
||||
<span class="badge badge-info badge-sm">{% blocktrans with date=news_item.published_at %}Scheduled for {{ date }}{% endblocktrans %}</span>
|
||||
{% elif item.is_scheduled %}
|
||||
<span class="badge badge-info badge-sm">{% trans "Scheduled" %}</span>
|
||||
{% else %}
|
||||
<span class="badge badge-success badge-sm">{% trans "Published" %}</span>
|
||||
{% endif %}
|
||||
<span class="font-mono text-xs text-dim">
|
||||
{% if news_item.status == "draft" %}
|
||||
{% blocktrans with time=news_item.modified|timesince %}Edited {{ time }} ago{% endblocktrans %}
|
||||
{% else %}
|
||||
{{ news_item.published_at|date:"j M Y" }}
|
||||
{% endif %}
|
||||
{% if item.status == "draft" %}{% blocktrans with time=item.modified|timesince %}Edited {{ time }} ago{% endblocktrans %}
|
||||
{% else %}{{ item.published_at|date:"j M Y" }}{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<a class="block truncate font-display text-lg font-extrabold text-ink uppercase hover:text-club" href="{% url 'management:news_detail' news_item.pk %}">{{ news_item.title }}</a>
|
||||
<div class="mt-0.5 flex flex-wrap items-center gap-2 text-[13px] text-muted">
|
||||
{% if news_item.created_by %}<span>{{ news_item.created_by }}</span>·{% endif %}
|
||||
{% for team in news_item.teams.all %}
|
||||
<span class="badge badge-outline badge-xs">{{ team.short_name }}</span>
|
||||
<div class="truncate font-display text-base font-extrabold text-ink uppercase">{{ item.title }}</div>
|
||||
<div class="truncate text-[13px] text-muted">
|
||||
{% if item.created_by %}{{ item.created_by }} · {% endif %}
|
||||
{% for team in item.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% empty %}{% trans "Club-wide" %}{% endfor %}
|
||||
</div>
|
||||
</a>
|
||||
{% empty %}
|
||||
<span>{% trans "Club-wide" %}</span>
|
||||
{% endfor %}
|
||||
· <span>{{ news_item.get_visibility_display }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if news_item.can_edit %}
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1">
|
||||
<a class="btn btn-outline btn-sm" href="{% url 'management:news_detail' news_item.pk %}" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</a>
|
||||
<button class="btn btn-sm btn-outline btn-error" type="button" onclick="document.getElementById('{{ news_item.pk|dom_id:"news_delete_modal" }}').showModal()" aria-label="{% trans 'Delete' %}">{% lucide "trash-2" size=14 %} {% trans "Delete" %}</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="px-4.5 py-10 text-center text-sm text-muted">{% trans "No news items yet." %}</div>
|
||||
<div class="px-4 py-10 text-center text-sm text-muted">{% trans "No news items yet." %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% include "management/_pagination.html" %}
|
||||
</div>
|
||||
|
||||
{% trans "Delete news item" as delete_news_title %}
|
||||
{% trans "Delete" as delete_label %}
|
||||
{% for news_item in news_items %}
|
||||
{% if news_item.can_edit %}
|
||||
{% url 'management:news_delete' news_item.pk as news_delete_url %}
|
||||
{% blocktrans with title=news_item.title asvar delete_news_body %}Delete “{{ title }}”? Its photos go with it. This cannot be undone.{% endblocktrans %}
|
||||
{% include "controlpanel/_confirm_modal.html" with modal_id=news_item.pk|dom_id:"news_delete_modal" title=delete_news_title body=delete_news_body action_url=news_delete_url submit_label=delete_label %}
|
||||
<div class="min-w-0 flex-1">
|
||||
{% if news_item %}
|
||||
{% include "management/_news_preview.html" %}
|
||||
{% else %}
|
||||
<div class="card p-10 text-center text-sm text-muted">{% trans "Select a post on the left to preview it here." %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock panel %}
|
||||
|
||||
@@ -3656,6 +3656,49 @@ class NewsManagementTests(ManagementTestBase):
|
||||
|
||||
self.assertNotContains(response, "Rival news")
|
||||
|
||||
def test_the_status_filter_chips_count_each_bucket(self):
|
||||
News.objects.create(club=self.club, title="Draft one", body="Body.")
|
||||
News.objects.create(club=self.club, title="Draft two", body="Body.")
|
||||
News.objects.create(club=self.club, title="Live", body="Body.", status=News.Status.PUBLISHED, published_at=timezone.now())
|
||||
News.objects.create(club=self.club, title="Upcoming", body="Body.", status=News.Status.PUBLISHED, published_at=timezone.now() + datetime.timedelta(days=3))
|
||||
self.client.force_login(self.admin_user)
|
||||
|
||||
response = self.club_get("news_list")
|
||||
|
||||
self.assertEqual(response.context["counts"], {"all": 4, "draft": 2, "scheduled": 1, "published": 1})
|
||||
|
||||
def test_the_draft_filter_chip_narrows_the_list_to_drafts(self):
|
||||
News.objects.create(club=self.club, title="A draft", body="Body.")
|
||||
News.objects.create(club=self.club, title="Already live", body="Body.", status=News.Status.PUBLISHED, published_at=timezone.now())
|
||||
self.client.force_login(self.admin_user)
|
||||
|
||||
response = self.club_get("news_list", params={"status": "draft"})
|
||||
|
||||
self.assertContains(response, "A draft")
|
||||
self.assertNotContains(response, "Already live")
|
||||
|
||||
def test_selecting_an_item_previews_it_on_the_right(self):
|
||||
News.objects.create(club=self.club, title="First post", body="First body.")
|
||||
second = News.objects.create(club=self.club, title="Second post", body="Second body.")
|
||||
self.client.force_login(self.admin_user)
|
||||
|
||||
response = self.club_get("news_list", params={"selected": str(second.pk)})
|
||||
|
||||
self.assertEqual(response.context["news_item"], second)
|
||||
self.assertContains(response, "Second body.")
|
||||
self.assertNotContains(response, "First body.")
|
||||
|
||||
def test_the_first_item_previews_by_default_when_none_is_selected(self):
|
||||
# News.Meta.ordering is "-created", so the most recently created row
|
||||
# (second) sorts first and is what should preview with no ?selected=.
|
||||
News.objects.create(club=self.club, title="First post", body="First body.")
|
||||
second = News.objects.create(club=self.club, title="Second post", body="Second body.")
|
||||
self.client.force_login(self.admin_user)
|
||||
|
||||
response = self.club_get("news_list")
|
||||
|
||||
self.assertEqual(response.context["news_item"], second)
|
||||
|
||||
def test_a_coach_manager_can_create_a_draft(self):
|
||||
self.client.force_login(self.coach_manager)
|
||||
|
||||
@@ -3695,13 +3738,18 @@ class NewsManagementTests(ManagementTestBase):
|
||||
self.assertContains(response, "Season kickoff")
|
||||
self.assertContains(response, "We're starting the season.")
|
||||
|
||||
def test_detail_page_hides_the_english_section_when_not_translated(self):
|
||||
def test_detail_page_notes_a_missing_english_translation(self):
|
||||
# The NL/EN toggle is always present now (not conditional on a
|
||||
# translation existing) -- untranslated items instead get a fallback
|
||||
# note, and the EN pane falls back to showing the Dutch content
|
||||
# (News.effective_title_en/effective_body_en) rather than sitting empty.
|
||||
item = News.objects.create(club=self.club, title="Seizoensstart", body="We beginnen het seizoen.")
|
||||
self.client.force_login(self.admin_user)
|
||||
|
||||
response = self.club_get("news_detail", item.pk)
|
||||
|
||||
self.assertNotContains(response, ">English<")
|
||||
self.assertContains(response, "No English translation yet")
|
||||
self.assertContains(response, 'data-lang-content="en"')
|
||||
|
||||
def test_plain_staff_cannot_create_news(self):
|
||||
self.client.force_login(self.plain_staff)
|
||||
|
||||
@@ -1920,17 +1920,62 @@ class GroupMemberRemoveView(MemberAdminRequiredMixin, View):
|
||||
|
||||
|
||||
class NewsListView(ClubStaffRequiredMixin, ListView):
|
||||
"""The D8 three-pane page: a filterable list on the left (status chips --
|
||||
all/draft/scheduled/published) and, on the right, a preview of whichever
|
||||
item is selected (``?selected=<pk>``, defaulting to the first row of
|
||||
whatever's currently listed so the pane is never empty). news_detail.html
|
||||
stays a separate, unchanged permalink page for anywhere else that links
|
||||
straight to one news item; both share _news_preview.html so the actual
|
||||
article/photos/publish markup exists in exactly one place."""
|
||||
|
||||
template_name = "management/news_list.html"
|
||||
context_object_name = "news_items"
|
||||
paginate_by = 25
|
||||
paginate_by = 20
|
||||
|
||||
def get_queryset(self):
|
||||
return News.objects.filter(club=self.request.club).prefetch_related("teams")
|
||||
queryset = News.objects.filter(club=self.request.club).select_related("created_by").prefetch_related("teams")
|
||||
status_filter = self.request.GET.get("status", "all")
|
||||
now = timezone.now()
|
||||
if status_filter == "draft":
|
||||
queryset = queryset.filter(status=News.Status.DRAFT)
|
||||
elif status_filter == "scheduled":
|
||||
queryset = queryset.filter(status=News.Status.PUBLISHED, published_at__gt=now)
|
||||
elif status_filter == "published":
|
||||
queryset = queryset.filter(status=News.Status.PUBLISHED, published_at__lte=now)
|
||||
return queryset
|
||||
|
||||
def get_context_data(self, **kwargs):
|
||||
club, user = self.request.club, self.request.user
|
||||
base = News.objects.filter(club=club)
|
||||
now = timezone.now()
|
||||
|
||||
for news_item in self.object_list:
|
||||
news_item.can_edit = can_edit_news(self.request.user, news_item)
|
||||
return super().get_context_data(**kwargs)
|
||||
news_item.can_edit = can_edit_news(user, news_item)
|
||||
|
||||
selected_pk = self.request.GET.get("selected")
|
||||
selected_item = None
|
||||
if selected_pk:
|
||||
selected_item = News.objects.filter(club=club, pk=selected_pk).select_related("created_by").prefetch_related("teams", "photos").first()
|
||||
if selected_item is None and self.object_list:
|
||||
selected_item = self.object_list[0]
|
||||
if selected_item is not None:
|
||||
selected_item.can_edit = can_edit_news(user, selected_item)
|
||||
|
||||
return super().get_context_data(
|
||||
status_filter=self.request.GET.get("status", "all"),
|
||||
counts={
|
||||
"all": base.count(),
|
||||
"draft": base.filter(status=News.Status.DRAFT).count(),
|
||||
"scheduled": base.filter(status=News.Status.PUBLISHED, published_at__gt=now).count(),
|
||||
"published": base.filter(status=News.Status.PUBLISHED, published_at__lte=now).count(),
|
||||
},
|
||||
news_item=selected_item,
|
||||
can_edit=selected_item.can_edit if selected_item else False,
|
||||
can_publish=can_publish_news(user, club),
|
||||
publish_form=NewsPublishForm(),
|
||||
photo_upload_form=NewsPhotoUploadForm(),
|
||||
**kwargs,
|
||||
)
|
||||
|
||||
|
||||
class NewsCreateView(NewsAuthorRequiredMixin, CreateView):
|
||||
|
||||
@@ -86,6 +86,14 @@ class News(ClubScopedModel):
|
||||
needs a cron job to "flip" it at the scheduled moment."""
|
||||
return self.status == self.Status.PUBLISHED and self.published_at is not None and self.published_at > timezone.now()
|
||||
|
||||
@property
|
||||
def main_photo(self):
|
||||
"""The cover photo for the article preview, if one's been marked as
|
||||
such. Filters ``self.photos.all()`` in Python rather than a fresh
|
||||
``.filter(is_main=True)`` query, so a prefetch_related("photos") on
|
||||
the calling queryset is actually honoured instead of bypassed."""
|
||||
return next((photo for photo in self.photos.all() if photo.is_main), None)
|
||||
|
||||
|
||||
class NewsPhoto(UUIDModel):
|
||||
news_item = models.ForeignKey(News, on_delete=models.CASCADE, related_name="photos", verbose_name=_("news item"))
|
||||
|
||||
@@ -3696,6 +3696,9 @@
|
||||
.h-\[180px\] {
|
||||
height: 180px;
|
||||
}
|
||||
.h-\[190px\] {
|
||||
height: 190px;
|
||||
}
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -3789,6 +3792,9 @@
|
||||
.w-\[236px\] {
|
||||
width: 236px;
|
||||
}
|
||||
.w-\[380px\] {
|
||||
width: 380px;
|
||||
}
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
@@ -4162,6 +4168,9 @@
|
||||
.border-success {
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
.border-warning {
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
@@ -4303,6 +4312,9 @@
|
||||
.p-6 {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
.p-10 {
|
||||
padding: calc(var(--spacing) * 10);
|
||||
}
|
||||
.p-\[18px\] {
|
||||
padding: 18px;
|
||||
}
|
||||
@@ -4549,6 +4561,10 @@
|
||||
--tw-leading: .96;
|
||||
line-height: .96;
|
||||
}
|
||||
.leading-\[1\.05\] {
|
||||
--tw-leading: 1.05;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.leading-\[1\.5\] {
|
||||
--tw-leading: 1.5;
|
||||
line-height: 1.5;
|
||||
@@ -5120,6 +5136,12 @@
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.md\:text-4xl {
|
||||
@media (width >= 48rem) {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
}
|
||||
.lg\:flex {
|
||||
@media (width >= 64rem) {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user