Message fixes

bds/static/src/sass/bds.scss

@@ -99,22 +99,9 @@ input[type="submit"] {
 
 /* --- Message styling --- */
 
-.error {
-  background: red;
-  color: white;
-  width: 100%;
+.notification {
   padding: 0.5em 0;
-  margin: 0;
   font-size: 1.2em;
   text-align: center;
 }
 
-.success {
-  background: green;
-  color: white;
-  width: 100%;
-  padding: 0.5em 0;
-  margin: 0;
-  font-size: 1.2em;
-  text-align: center;
-}

bds/templates/bds/base_layout.html

@@ -1,24 +1,24 @@
 {% extends "bds/base.html" %}
+{% load bulma_utils %}
 
 {% block body %}
 
 {% include "bds/nav.html" %}
 
-{% if messages %}
+<section class="section">
+  <div class="columns">
+    <div class="column is-two-thirds is-offset-2">
+    {% if messages %}
       {% for message in messages %}
-    <p class="{{ message.level_tag }}">
+        <div class="notification is-{{ message.level_tag|bulma_message_tag }}">
           {% if 'safe' in message.tags %}
               {{ message|safe }}
           {% else %}
               {{ message }}
           {% endif %}
-    </p>
+        </div>
       {% endfor %}
-{% endif %}
-
-<section class="section">
-  <div class="columns">
-    <div class="column is-two-thirds is-offset-2">
+    {% endif %}
     {% block content %}
     {% endblock content %}
     </div>

bds/templates/bds/forms/file.html

@@ -8,7 +8,7 @@
 <div class="control">
 
   <label class="file-label">
-    {{ field|addclass:'file-input' }}
+    {{ field|bulmafy:'file-input' }}
     <span class="file-cta">
       <span class="file-icon">
         <i class="fa fa-upload"></i>

bds/templates/bds/forms/input.html

@@ -5,7 +5,7 @@
 </label>
 
 <div class="control">
-  {{ field|addclass:'input' }}
+  {{ field|bulmafy:'input' }}
 
   {% for error in field.errors %}
     <span class="help is-danger {{ form.error_css_class }}">{{ error }}</span>

bds/templates/bds/forms/textarea.html

@@ -3,7 +3,7 @@
 </label>
 
 <div class="control">
-  {{ field|addclass:'textarea' }}
+  {{ field|bulmafy:'textarea' }}
 
   {% for error in field.errors %}
     <span class="help is-danger {{ form.error_css_class }}">{{ error }}</span>

bds/templatetags/bulma_utils.py

@@ -58,9 +58,17 @@ def is_file(field):
 
 
 @register.filter
-def addclass(field, css_class):
+def bulmafy(field, css_class):
     if len(field.errors) > 0:
         css_class += " is-danger"
     field_classes = field.field.widget.attrs.get("class", "")
     field_classes += f" {css_class}"
     return field.as_widget(attrs={"class": field_classes})
+
+
+@register.filter
+def bulma_message_tag(tag):
+    if tag == "error":
+        return "danger"
+
+    return tag