From 8fa635773c301f695f13e1248c4aa146d59a1c11 Mon Sep 17 00:00:00 2001
From: Ludovic Stephan <ludovic.stephan@ens.fr>
Date: Fri, 28 Aug 2020 16:11:50 +0200
Subject: [PATCH] Notifications are closable

---
 bds/static/bds/js/bds.js    |  7 +++++++
 bds/templates/bds/base.html | 40 ++++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 18 deletions(-)
 create mode 100644 bds/static/bds/js/bds.js
diff --git a/bds/static/bds/js/bds.js b/bds/static/bds/js/bds.js
new file mode 100644
index 00000000..3c2fb49b
--- /dev/null
+++ b/bds/static/bds/js/bds.js
@@ -0,0 +1,7 @@
+$(function () {
+    // Close notifications when delete button is pressed
+    $(".notification .delete").on("click", function () {
+        $(this).parent().remove();
+    });
+
+});
\ No newline at end of file
diff --git a/bds/templates/bds/base.html b/bds/templates/bds/base.html
index ac2b4875..f456f6dc 100644
--- a/bds/templates/bds/base.html
+++ b/bds/templates/bds/base.html
@@ -16,31 +16,35 @@
     {# Javascript #}
     <script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
     <script src="{% static "vendor/jquery/jquery.autocomplete-light.min.js" %}"></script>
+    <script src="{% static 'bds/js/bds.js' %}"></script>
 
     {% block extra_head %}{% endblock extra_head %}
   </head>
   <body>
     {% include "bds/nav.html" %}
+    {% block layout %}
+    <div class="columns">
+      <div class="column is-two-thirds is-offset-2">
+        <section class="section">
 
-    <section class="section">
-      <div class="columns">
-        <div class="column is-two-thirds is-offset-2">
-        {% if messages %}
-          {% for message in messages %}
-            <div class="notification is-{{ message.level_tag|bulma_message_tag }}">
-              {% if 'safe' in message.tags %}
-                  {{ message|safe }}
-              {% else %}
-                  {{ message }}
-              {% endif %}
-            </div>
-          {% endfor %}
-        {% endif %}
+          {% if messages %}
+            {% for message in messages %}
+              <div class="notification is-{{ message.level_tag|bulma_message_tag }}">
+                {% if 'safe' in message.tags %}
+                    {{ message|safe }}
+                {% else %}
+                    {{ message }}
+                {% endif %}
+                <button class="delete"></button>
+              </div>
+            {% endfor %}
+          {% endif %}
 
-        {% block content %}
-        {% endblock content %}
-        </div>
+          {% block content %}
+          {% endblock content %}
+        </section>
       </div>
-    </section>
+    </div>
+    {% endblock layout %}
   </body>
 </html>
