display django messages on HTMX events

scipost_django/scipost/static/scipost/assets/css/_messages.scss

@@ -3,8 +3,7 @@
     padding-right: 10px;
     position: fixed;
     bottom: 0px;
-    left: 0px;
-    width: 100%;
+    right: 0px;
     z-index: 9999;
 }
 

scipost_django/scipost/templates/scipost/_hx_messages.html

+{% for message in messages %}
+  <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
+    <button type="button"
+            class="btn-close"
+            style="top: unset !important"
+            data-bs-dismiss="alert"
+            aria-label="Close"></button>
+    {{ message|safe|escape }}
+  </div>
+{% endfor %}

scipost_django/scipost/templates/scipost/bare_base.html

@@ -34,6 +34,7 @@
     {% block breadcrumb %}{% endblock breadcrumb %}
 
     {% block secondary_navbar %}{% endblock secondary_navbar %}
+    
     {% include 'scipost/messages.html' %}
 
 

scipost_django/scipost/templates/scipost/messages.html

-<div class="alert-fixed-container">
-  {% for message in messages %}
-    <div class="alert alert-{{ message.tags }} alert-dismissible" role="alert">
-      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
-      {{ message|safe|escape }}
-    </div>
-  {% endfor %}
-</div>
+<div id="global-message-container"
+     class="alert-fixed-container"
+     hx-get="{% url 'scipost:_hx_messages' %}"
+     hx-trigger="load, htmx:trigger from:body delay:1000"
+     hx-swap="beforeend"
+     hx-sync="body:drop"></div>

scipost_django/scipost/urls.py

@@ -156,6 +156,7 @@ urlpatterns = [
         TemplateView.as_view(template_name="scipost/acknowledgement.html"),
         name="acknowledgement",
     ),
+    path("messages", views._hx_messages, name="_hx_messages"),
     #
     #######
     # Info

scipost_django/scipost/views.py

@@ -175,6 +175,10 @@ def trigger_error(request):
     division_by_zero = 1 / 0
 
 
+def _hx_messages(request):
+    return render(request, "scipost/_hx_messages.html")
+
+
 #############
 # Main view
 #############