Files
RosterChief/management/templates/management/news_detail.html
Bernard Siebens bff685966d Fix scrambled mobile layout on member detail and sweep the rest of the app
The mobile responsive pass still had real gaps: on member_detail.html,
dt/dd label-value rows (phone numbers, dates) squeezed onto one line
below `sm` instead of stacking, and guardian call/emergency-call
buttons -- whose labels embed the guardian's name -- used a bare
`grow` inside a non-wrapping flex row, pushing the whole row off
screen once a name was long enough. Both patterns are fixed here and
propagated to every other page with the same shape of bug:
event_detail.html and event_series_detail.html still had the
unmigrated dt/dd rows from before the first pass; sponsor_list.html's
URLs and parent_claim_list.html's emails could force a table-card
wider than the viewport (unbreakable strings, fixed with break-all);
parent_claim_list.html's Approve/Reject buttons could both land on
the left edge once the row wrapped (fixed with ms-auto); news_list.html's
team-badge list and news_detail.html's per-photo action buttons were
missing flex-wrap; team_detail.html had a stray table never converted
to table-cards and two unstacked stat lists; referee_management.html's
per-game referee badges were missing flex-wrap.

Also hide the three dashboard charts (signups, fee status, renewal
rate) below `lg` -- three squeezed canvases stacked on a phone added
scroll without adding readability the stat cards above don't already
give, and match family_list.html's search box to member_list.html's
icon-only-below-`sm` pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-16 10:35:26 +02:00

120 lines
7.1 KiB
HTML

{% extends "management/base.html" %}
{% load i18n lucide ui %}
{% block heading %}{{ news_item.title }}{% endblock heading %}
{% block subheading %}
{% if news_item.status == "draft" %}
{% trans "Draft" %}
{% elif news_item.is_scheduled %}
{% blocktrans with date=news_item.published_at %}Scheduled for {{ date }}{% endblocktrans %}
{% else %}
{% blocktrans with date=news_item.published_at %}Published {{ date }}{% endblocktrans %}
{% endif %}
· {{ news_item.get_visibility_display }}
{% endblock subheading %}
{% block actions %}
{% if can_edit %}
<a class="btn btn-outline gap-2" href="{% url 'management:news_update' news_item.pk %}">{% lucide "pencil" size=16 %} {% trans "Edit" %}</a>
<button class="btn btn-outline btn-error gap-2" type="button" onclick="document.getElementById('delete_news_modal').showModal()">{% lucide "trash-2" size=16 %} {% trans "Delete" %}</button>
{% endif %}
{% if can_publish %}
{% if news_item.status == "draft" %}
<button class="btn btn-primary gap-2" type="button" onclick="document.getElementById('publish_modal').showModal()">{% lucide "upload" size=16 %} {% trans "Publish" %}</button>
{% else %}
<button class="btn btn-outline btn-warning gap-2" type="button" onclick="document.getElementById('unpublish_modal').showModal()">{% lucide "eye-off" size=16 %} {% trans "Unpublish" %}</button>
{% endif %}
{% endif %}
{% endblock actions %}
{% block panel %}
<div class="card bg-base-100 shadow">
<div class="card-body">
{% if news_item.teams.all %}
<div class="flex flex-wrap gap-2 mb-2">
{% for team in news_item.teams.all %}
<span class="badge badge-neutral">{{ team.short_name }}</span>
{% endfor %}
</div>
{% endif %}
<p class="whitespace-pre-line">{{ news_item.body }}</p>
</div>
</div>
{% if news_item.title_en or news_item.body_en %}
<div class="card bg-base-100 shadow mt-4">
<div class="card-body">
<h2 class="card-title text-base">{% trans "English" %}</h2>
{% if news_item.title_en %}<p class="font-semibold">{{ news_item.title_en }}</p>{% endif %}
{% if news_item.body_en %}<p class="whitespace-pre-line">{{ news_item.body_en }}</p>{% endif %}
</div>
</div>
{% endif %}
<div class="card bg-base-100 shadow mt-4">
<div class="card-body">
<div class="flex flex-wrap items-center justify-between gap-2">
<h2 class="card-title text-base">{% 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="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
{% for photo in news_item.photos.all %}
<div class="relative">
<img class="rounded-box aspect-square object-cover w-full" src="{{ photo.image.url }}" alt="">
{% if photo.is_main %}
<span class="badge badge-success badge-sm absolute top-1 left-1">{% trans "Main" %}</span>
{% endif %}
{% if can_edit %}
<div class="flex flex-wrap gap-1 mt-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="opacity-60 col-span-full">{% 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 %}
{% endblock panel %}