Bernard Siebens
875250366e
"1 hour, 20 minutes ago" ran long and ate into the body text's width now that it's no longer truncated -- a compact two-line HH:MM/date column (same shape as the calendar row's own day/date marker) fixes that. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
35 lines
2.2 KiB
HTML
35 lines
2.2 KiB
HTML
{% load i18n %}
|
|
{% comment %}
|
|
One M7 notification row -- included from notifications.html once per day
|
|
bucket. Expects ``row`` ({notification, source_label}) in scope. The
|
|
whole row is the tap target (a submit button styled full-width, since a
|
|
POST form can't wrap another form/link) -- tapping always marks it read,
|
|
and also navigates to the linked News/Event when its source resolves to
|
|
one (see mobile.views._notification_source_link and
|
|
NotificationsView.post). A club-coloured bar marks it unread -- full
|
|
height via self-stretch, same technique as mobile/_calendar_row.html's
|
|
own kind marker, so it still spans the row now that the body text below
|
|
is shown in full (no truncatechars) and can wrap to several lines. The
|
|
timestamp is stacked time-over-date (like _calendar_row.html's own
|
|
day/date column) rather than a relative "X ago" string -- that can run
|
|
long ("1 hour, 20 minutes ago") and eats into the body text's width now
|
|
that it's no longer truncated.
|
|
{% endcomment %}
|
|
<form method="post" action="{% url "mobile:notifications" %}" hx-boost="false">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="action" value="mark_read">
|
|
<input type="hidden" name="notification_id" value="{{ row.notification.pk }}">
|
|
<button type="submit" class="m-card flex w-full items-center gap-3 p-3.5 text-left">
|
|
<span class="w-[3px] shrink-0 self-stretch rounded-full {% if not row.notification.read_at %}bg-club{% else %}bg-line{% endif %}"></span>
|
|
<span class="min-w-0 flex-1">
|
|
<span class="block text-sm font-semibold text-ink">{{ row.notification.title }}</span>
|
|
<span class="block text-xs text-muted">{{ row.notification.body }}</span>
|
|
{% if row.source_label %}<span class="block font-display text-[11px] font-extrabold text-club uppercase tracking-wide">{{ row.source_label }}</span>{% endif %}
|
|
</span>
|
|
<span class="w-11 shrink-0 text-right">
|
|
<span class="block font-mono text-[11px] text-dim">{{ row.notification.created|date:"H:i" }}</span>
|
|
<span class="block font-mono text-[10px] text-dim">{{ row.notification.created|date:"d M" }}</span>
|
|
</span>
|
|
</button>
|
|
</form>
|