mirror of
https://github.com/wahyd4/links.git
synced 2026-08-08 21:04:53 +10:00
Update ui
This commit is contained in:
+11
-1
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user