Move notifications into container

shiftregister/app/templates/helper_base.html

@@ -9,17 +9,12 @@
 {% endblock %}
 
 {% block body %}
-{% if helper %}
-<section class="hero">
-    <div class="container">
-        <div class="hero-body">
-            <h1 class="title">Hallo {{ helper.name }}!</h1>
-        </div>
-    </div>
-</section>
-{% endif %}
 <section class="section">
     <div class="container">
+{% include 'notifications.html' %}
+{% if helper %}
+        <h1 class="title">Hallo {{ helper.name }}!</h1>
+{% endif %}
 {% block content %}{% endblock %}
     </div>
 </section>

shiftregister/team/templates/team_base.html

@@ -10,6 +10,7 @@
 {% block body %}
 <section class="section">
     <div class="container">
+{% include 'notifications.html' %}
 {% block content %}{% endblock %}
     </div>
 </section>

templates/base.html

@@ -18,13 +18,9 @@
             </div>
         </div>
     </nav>
-{% for message in messages %}
-    <div class="notification{% for tag in message.tags.split %} is-{{ tag }}{% endfor %}">
-        <button class="delete"></button>
-        {{ message }}
-    </div>
-{% endfor %}
 {% block body %}
+{% include 'notifications.html' %}
 {% endblock %}
+    <script>document.querySelectorAll('.delete').forEach(btn => btn.addEventListener('click', event => event.target.parentElement.remove()));</script>
 </body>
 </html>

templates/notifications.html

@@ -0,0 +1,6 @@
+{% for message in messages %}
+    <div class="notification{% for tag in message.tags.split %} is-{{ tag }}{% endfor %}">
+        <button class="delete"></button>
+        {{ message }}
+    </div>
+{% endfor %}