Close button for messages

gas/locale/es/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-03-23 16:58+0000\n"
+"POT-Creation-Date: 2021-04-14 16:22+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,6 +143,10 @@ msgstr "Salir"
 msgid "Home"
 msgstr "Inicio"
 
+#: templates/gas/base.html:66
+msgid "Close"
+msgstr "Cerrar"
+
 #: templates/gas/base_form.html:23 templates/gas/delete_confirmation.html:21
 msgid "Cancel"
 msgstr "Cancelar"

gas/locale/eu/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-04-14 15:09+0000\n"
+"POT-Creation-Date: 2021-04-14 16:22+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,6 +143,10 @@ msgstr "Irten"
 msgid "Home"
 msgstr "Hasiera"
 
+#: templates/gas/base.html:66
+msgid "Close"
+msgstr "Itxi"
+
 #: templates/gas/base_form.html:23 templates/gas/delete_confirmation.html:21
 msgid "Cancel"
 msgstr "Ezeztatu"

gas/static/gas/css/gas.css

@@ -1,3 +1,12 @@
+:root {
+    --success-dark: #3f3;
+    --success: #9f9;
+    --error-dark: #f33;
+    --error: #f99;
+    --info-dark: #33f;
+    --info: #99f;
+}
+
 table {
     border-collapse: collapse;
     border: 1px solid gray;
@@ -197,11 +206,42 @@ label {
     font-weight: bold;
 }
 
+.message {
+    position: relative;
+    border: 2px solid;
+    border-radius: 0.5em;
+    padding: 1em;
+}
+
+.message .message-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background-color: transparent;
+    border: none;
+    color: var(--white);
+    icon: pointer;
+}
+
+.message.success {
+    border-color: var(--success-dark);
+    background-color: var(--success);
+}
+
+.message.error {
+    border-color: var(--error-dark);
+    background-color: var(--error);
+}
+
+.message.info {
+    border-color: var(--info-dark);
+    background-color: var(--info);
+}
+
 #login {
     background: #eee;
 }
 
-
 #login form {
     border: 1px solid gray;
     border-radius: 0.5em;
@@ -209,4 +249,4 @@ label {
     margin: 2em auto;
     width: 20em;
     padding: 1em;
-}       
+}

gas/static/gas/js/gas.js

@@ -4,6 +4,12 @@ var GAS = {
             $('.select2').select2({
                 width: 'resolve',
             });
+
+            $('#messages .message-close').click(function(event){
+                event.preventDefault();
+                let $message = $(this).parents('.message');
+                $message.remove();
+            });
         });
 
         var csrftoken = GAS.getCookie('csrftoken');

gas/templates/gas/base.html

@@ -63,6 +63,7 @@
                         {% for message in messages %}
                             <div class="message {% if message.tags %} {{ message.tags }}{% endif %}">
                                 {{ message|safe }}
+                                <button class="message-close" type="button"><i class="fas fa-times" title="{% trans "Close" %}"></i></button>
                             </div>
                         {% endfor %}
                     </div>