feat: Redisign message element

Author: Antoliny0919

djangosnippets/settings/base.py

@@ -195,15 +195,6 @@ def user_url(user):
 DISQUS_WEBSITE_SHORTNAME = "djangosnippets"
 DISQUS_USE_SINGLE_SIGNON = True
 
-MESSAGE_TAGS = {
-    messages.DEBUG: "secondary",
-    messages.INFO: "info",
-    messages.SUCCESS: "success",
-    messages.WARNING: "warning",
-    messages.ERROR: "alert",
-}
-
-
 DATABASES = {"default": dj_database_url.config(conn_max_age=600, conn_health_checks=True)}
 DATABASES["default"]["ATOMIC_REQUESTS"] = True
 

djangosnippets/templates/base.html

@@ -26,7 +26,7 @@
     {% endif %}
     </p>
   </div></div>
-  <header><div class="inner">
+  <header class="mb-0"><div class="inner">
     <a title="Go back to the frontpage" href="{% url 'home' %}" id="logo">django<b>snippets</b></a>
     <nav>
       <ul>
@@ -38,6 +38,7 @@
       </ul>
     </nav>
   </div></header>
+  {% include 'includes/messages.html' %}
   <div id="main" class="container mb-auto mx-auto w-7/8">
     {% block secondary_nav %}
     <nav id="subnav">
@@ -48,16 +49,6 @@
       </ul>
     </nav>
     {% endblock %}
-
-  {% if messages %}
-    {% for message in messages %}
-      <div data-alert class="alert-box {% if message.tags %} {{ message.tags }}{% else %}message_info{% endif %}">
-        {{ message }}
-        <a href="#" class="close">&times;</a>
-      </div>
-    {% endfor %}
-  {% endif %}
-
   <div id="base-container">
   <h1>{% block content_header %}{% endblock %}</h1>
   {% block new_content_header %}{% endblock %}

djangosnippets/templates/includes/messages.html

@@ -0,0 +1,33 @@
+{% if messages %}
+    {% for message in messages %}
+    <div class="mx-4 relative" x-data="{ show: true }">
+        <div data-alert
+        class="absolute w-full flex justify-between pl-8 pr-4 py-2 border-2 rounded-md font-text text-lg
+        {% if 'error' in message.tags %}
+        border-red-600 bg-red-100
+        {% elif 'warning' in message.tags %}
+        border-orange-600 bg-orange-100
+        {% elif 'success' in message.tags %}
+        border-green-600 bg-green-100
+        {% else %}
+        border-blue-600 bg-blue-100
+        {% endif %}
+        "
+        :class="show ? '' : 'opacity-0 duration-500 -translate-y-10'"
+        >
+        {{ message }}
+        <button type="button" @click="show = false" href="#" class="m-0 text-base-black border-2 p-0 px-2 rounded-full text-base relative
+        {% if 'error' in message.tags %}
+        bg-red-400
+        {% elif 'warning' in message.tags %}
+        bg-orange-400
+        {% elif 'success' in message.tags %}
+        bg-green-400
+        {% else %}
+        bg-blue-400
+        {% endif %}
+        "><span class="relative -top-0.5">&times;</span></button>
+        </div>
+    </div>
+    {% endfor %}
+{% endif %}