bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bigger unread badge with a real count, and a Clear all action for notifications

Browse Source 
The header bell's unread indicator was an 8px dot -- now a proper count
badge (capped at "9+"), matching the size/legibility of similar badges
elsewhere in the app. Notifications also gains "Clear all" next to
"Mark all read" -- a hard delete of the list (the same clear-all gesture
a phone's own notification centre uses), not another read-state flip.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-21 17:41:14 +02:00
parent 385e2f3c38
commit 5bfb6ce76e
6 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mobile/templates/mobile/base.html
View File

@@ -67,7 +67,11 @@
<div class="flex-1"></div>
<a class="relative flex h-11 w-11 shrink-0 items-center justify-center" href="{% url "mobile:notifications" %}" aria-label="{% trans "Notifications" %}">
<svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
{% if unread_notification_count %}<span class="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-club" style="border: 2px solid var(--color-navy)"></span>{% endif %}
{% if unread_notification_count %}
<span class="absolute -top-1 -right-1 flex h-[19px] min-w-[19px] items-center justify-center rounded-full bg-club px-1 font-mono text-[11px] font-bold text-white" style="border: 2px solid var(--color-navy)">
{% if unread_notification_count > 9 %}9+{% else %}{{ unread_notification_count }}{% endif %}
</span>
{% endif %}
</a>
</div>
{% block header_extra %}{% endblock header_extra %}

23
mobile/templates/mobile/notifications.html
View File

@@ -25,12 +25,23 @@
<button type="button" class="btn btn-dark shrink-0" @click="window.rosterchiefPush.subscribe(); requested = true">{% trans "Enable" %}</button>
</div>
{% if unread_notification_count %}
<form method="post" action="{% url "mobile:notifications" %}">
{% csrf_token %}
<input type="hidden" name="action" value="mark_all_read">
<button class="font-display text-xs font-extrabold tracking-wide text-club uppercase" type="submit">{% trans "Mark all read" %}</button>
</form>
{% if today or earlier_this_week or older %}
<div class="flex items-center justify-between">
{% if unread_notification_count %}
<form method="post" action="{% url "mobile:notifications" %}">
{% csrf_token %}
<input type="hidden" name="action" value="mark_all_read">
<button class="font-display text-xs font-extrabold tracking-wide text-club uppercase" type="submit">{% trans "Mark all read" %}</button>
</form>
{% else %}
<span></span>
{% endif %}
<form method="post" action="{% url "mobile:notifications" %}">
{% csrf_token %}
<input type="hidden" name="action" value="clear_all">
<button class="font-display text-xs font-extrabold tracking-wide text-muted uppercase" type="submit">{% trans "Clear all" %}</button>
</form>
</div>
{% endif %}
{% if not today and not earlier_this_week and not older %}