feat: Redisign message element

Antoliny0919 · Antoliny0919 · commit e1fc0cba0cbf · 2025-12-04T10:32:15.000+09:00
diff --git a/djangosnippets/settings/base.py b/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
 
diff --git a/djangosnippets/templates/base.html b/djangosnippets/templates/base.html
@@ -15,6 +15,7 @@
   {% tailwind_css %}
 </head>
 <body class="{% block bodyclass %}{% endblock %}">
+  {% block header %}
   <div id="accountbar"><div class="inner">
     <p>
     {% url 'account_logout' as logout_url %}
@@ -26,7 +27,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 +39,8 @@
       </ul>
     </nav>
   </div></header>
+  {% endblock %}
+  {% include 'includes/messages.html' %}
   <div id="main" class="container mb-auto mx-auto w-7/8">
     {% block secondary_nav %}
     <nav id="subnav">
@@ -48,16 +51,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 %}
@@ -75,10 +68,12 @@ <h1>{% block content_header %}{% endblock %}</h1>
   {% endblock %}
   </div>
 </div>
+  {% block footer %}
   <footer>
     <p id="copyright">Written by <a href="https://github.com/django-de/djangosnippets.org/graphs/contributors">various people</a>. Hosted by <a href="https://www.heroku.com" class="heroku">Heroku</a>, powered by <a href="http://www.djangoproject.com/">Django</a></p>
     <p class="legal"><a href="/about/">About</a> | <a href="/about/faq/">FAQ</a> | <a href="/about/tos/">Terms of service</a> | <a href="/about/legal/">Legal notices</a></p>
   </footer>
+  {% endblock %}
   {% block extra_body %}{% endblock %}
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="{% static 'js/fastclick.js' %}"></script>
diff --git a/djangosnippets/templates/includes/messages.html b/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 %}
