Rework flash messages (spiral-project#943)

TomRoussel · Dec 1, 2021 · 0d535b1 · 0d535b1
1 parent 184c49d
commit 0d535b1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
@@ -456,17 +456,8 @@ tr.payer_line .balance-name {
   margin-top: 10px;
 }
 
-.messages {
-  display: flex;
-  justify-content: center;
-  position: absolute;
-  top: 4.5rem;
-  width: 100%;
-  pointer-events: none;
-}
-
-.messages .alert {
-  pointer-events: auto;
+.flash {
+  z-index: 1031;
 }
 
 .light {

diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
@@ -1,4 +1,22 @@
 {% import "forms.html" as forms %}
+
+{% macro flash_messages(classes='') %}
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+<div class="position-absolute d-flex flex-wrap mt-2 mr-1 {{ classes }}">
+  {% for category, message in messages %}
+    <div class="flash mr-2 text-center alert alert-{{ "success" if category == "message" else category }} alert-dismissible fade show">
+      {{ message }}
+      <button type="button" class="close h-100" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+  {% endfor %}
+</div>
+{% endif %}
+{% endwith %}
+{% endmacro %}
+
 <!DOCTYPE html>
 <html class="h-100">
 <head>
@@ -120,16 +138,9 @@ <h6 class="dropdown-header">{{ _('Languages') }}</h6>
   {% endblock %}
   </div>
 
-  <div class="messages">
-    {% for category, message in get_flashed_messages(with_categories=true) %}
-      <div class="flash alert alert-{{ "success" if category == "message" else category }} alert-dismissible fade show">
-        {{ message }}
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-    {% endfor %}
-  </div>
+  {% if not messages_shown %}
+  {{ flash_messages(classes="w-100 justify-content-center") }}
+  {% endif %}
 
   {% block footer %}
   <footer class="footer mt-auto py-3">

diff --git a/ihatemoney/templates/sidebar_table_layout.html b/ihatemoney/templates/sidebar_table_layout.html
@@ -53,8 +53,12 @@
 </aside>
 
 <main class="offset-md-3 col-xs-12 col-md-9 d-flex flex-column">
+  {{ flash_messages() }}
   {% block content %}{% endblock %}
 </main>
 
 </div>
 {% endblock %}
+
+{# It must be set outside of the block definition #}
+{% set messages_shown = True %}