From 750abb703e2856545f27ff9888811cd2712662a4 Mon Sep 17 00:00:00 2001 From: Karl Determe Date: Fri, 14 Aug 2026 23:01:43 +0200 Subject: [PATCH] feat: add mobile inbox template for notifications and discussions management --- .../templates/notifications/inbox_mobile.html | 481 ++++++++++++++---- 1 file changed, 369 insertions(+), 112 deletions(-) diff --git a/streetup/notifications/templates/notifications/inbox_mobile.html b/streetup/notifications/templates/notifications/inbox_mobile.html index 6568d31..0de9f96 100644 --- a/streetup/notifications/templates/notifications/inbox_mobile.html +++ b/streetup/notifications/templates/notifications/inbox_mobile.html @@ -1,150 +1,393 @@ {% extends "mobile/mobile_base.html" %} {% load i18n %} +{% load static %} +{% load roles %} +{% load mention_tags %} {% block title %}{% translate "Notifications" %}{% endblock title %} {% block extra_head %} {% endblock extra_head %} {% block content %} +
-

- {% translate "Notifications" %} - {% if unread_count > 0 %} - {{ unread_count }} - {% endif %} +

+ {% translate "Notifications" %}

- - {% translate "Accueil" %} - -
- -
-
-
-
- -
-
-
- - -
- {% if filter_type or show_archived %} - - {% translate "Réinitialiser" %} - - {% endif %} -
-
+
+ + + + + {% translate "Accueil" %} +
-{% if unread_count > 0 %} -
- -
-{% endif %} + + -{% if notifications %} -
- {% for item in notifications %} - {% with notif=item.notification %} -
-
-
-
-
- - {{ notif.title }} - {% if not item.is_read and not item.is_archived %} - {% translate "Nouveau" %} - {% endif %} + +
+ + +
+ + +
+
+
+ +
+
- {% if notif.content %} -

{{ notif.content|linebreaksbr }}

- {% endif %} -
- {{ notif.created_at|date:"d/m/Y H:i" }} - {% if item.team_name %} - {{ item.team_name }} - {% endif %} - {% if item.mobile_action_url and item.mobile_action_url != request.path and item.mobile_action_url != '/notifications/' and item.mobile_action_url != '/notifications' and item.mobile_action_url != '/mobile/notifications/' and item.mobile_action_url != '/mobile/notifications' %} - - {{ notif.action_label|default:item.mobile_action_url }} +
+
+ + +
+ {% if filter_type or show_archived %} + + {% translate "Réinitialiser" %} {% endif %}
-
-
- {% if not item.is_read %} - - {% endif %} - {% if item.recipient_type == 'personal' and not item.is_archived %} - - {% endif %} -
+
-
- {% endwith %} - {% endfor %} -
-{% else %} -
- -

- {% if show_archived %} - {% translate "Aucune notification archivée." %} - {% else %} - {% translate "Vous n'avez aucune notification." %} + + {% if unread_count > 0 %} +

+ +
{% endif %} -

+ + {% if notifications %} +
+ {% for item in notifications %} + {% with notif=item.notification %} +
+
+
+
+
+ + {{ notif.title }} + {% if not item.is_read and not item.is_archived %} + {% translate "Nouveau" %} + {% endif %} +
+ {% if notif.content %} +

{{ notif.content|linebreaksbr }}

+ {% endif %} +
+ {{ notif.created_at|date:"d/m/Y H:i" }} + {% if item.team_name %} + {{ item.team_name }} + {% endif %} + {% if item.mobile_action_url and item.mobile_action_url != request.path and item.mobile_action_url != '/notifications/' and item.mobile_action_url != '/notifications' and item.mobile_action_url != '/mobile/notifications/' and item.mobile_action_url != '/mobile/notifications' %} + + {{ notif.action_label|default:item.mobile_action_url }} + + {% endif %} +
+
+
+ {% if not item.is_read %} + + {% endif %} + {% if item.recipient_type == 'personal' and not item.is_archived %} + + {% endif %} +
+
+
+
+ {% endwith %} + {% endfor %} +
+ {% else %} +
+ +

+ {% if show_archived %} + {% translate "Aucune notification archivée." %} + {% else %} + {% translate "Vous n'avez aucune notification." %} + {% endif %} +

+
+ {% endif %} + +
+ + + +
-{% endif %} + + +{% include "notifications/_new_discussion_modal.html" %} {% endblock content %} {% block extra_scripts %} @@ -155,6 +398,18 @@ const archiveBase = "{% url 'notifications:archive' 0 %}"; const markAllUrl = "{% url 'notifications:mark_all_read' %}"; + // Synchronize tab changes in URL query param + const tabs = document.querySelectorAll('#mobileInboxTabs button[data-bs-toggle="tab"]'); + tabs.forEach(tab => { + tab.addEventListener('shown.bs.tab', event => { + const isDiscussions = event.target.id === 'tab-discussions-btn'; + const tabName = isDiscussions ? 'discussions' : 'notifications'; + const url = new URL(window.location); + url.searchParams.set('tab', tabName); + window.history.replaceState({}, '', url); + }); + }); + function updateBadge(count) { const badges = document.querySelectorAll('#mobile-navbar-notif-badge, #navbar-notif-badge'); badges.forEach((badge) => { @@ -188,7 +443,8 @@ } document.querySelectorAll('.mark-read-btn').forEach((button) => { - button.addEventListener('click', async () => { + button.addEventListener('click', async (e) => { + e.stopPropagation(); button.disabled = true; const pk = button.dataset.pk; const type = button.dataset.type; @@ -207,7 +463,8 @@ }); document.querySelectorAll('.archive-btn').forEach((button) => { - button.addEventListener('click', async () => { + button.addEventListener('click', async (e) => { + e.stopPropagation(); button.disabled = true; const pk = button.dataset.pk; try {