Update ui

This commit is contained in:
2026-04-01 21:52:26 +11:00
parent e89825a114
commit 3e6d348554
+11 -1
View File
@@ -249,7 +249,7 @@
<div class="container mx-auto mt-20 p-2">
{% if messages %}
{% for message in messages %}
<div class="bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4" role="alert">
<div class="flash-message bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4 transition-all duration-500 ease-in-out" role="alert">
<span class="block sm:inline">{{ message }}</span>
</div>
{% endfor %}
@@ -272,6 +272,16 @@
theme: 'classic',
width: '100%'
});
// Auto-dismiss flash messages after 5s with fade + collapse animation
setTimeout(function() {
$('.flash-message').each(function() {
$(this).css({'opacity': '0', 'max-height': $(this).outerHeight(true) + 'px', 'overflow': 'hidden', 'margin-bottom': $(this).css('margin-bottom')});
$(this).animate({'opacity': 0, 'max-height': 0, 'marginBottom': 0, 'paddingTop': 0, 'paddingBottom': 0}, 500, function() {
$(this).remove();
});
});
}, 5000);
});
</script>
{% block extra_js %}{% endblock %}