templates/partials/_flash_messages.html.twig line 1

  1. {# templates/partials/_flash_messages.html.twig #}
  3. {% for type, messages in app.flashes %}
  4.     {% for message in messages %}
  5.         <div class="flash-message bg-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-50 border-l-4 border-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-500 p-4 rounded-r-lg mb-4 relative animate-slide-in" data-autodismiss="{{ type == 'success' ? '3000' : '5000' }}">
  6.             <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-500 hover:text-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-700 transition-colors" onclick="this.closest('.flash-message').remove()">
  7.                 <i class="fas fa-times"></i>
  8.             </button>
  9.             <div class="flex items-center">
  10.                 <i class="fas fa-{{ type == 'success' ? 'check-circle' : (type == 'error' ? 'exclamation-circle' : (type == 'warning' ? 'exclamation-triangle' : 'info-circle')) }} text-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-500 mr-3"></i>
  11.                 <p class="text-{{ type == 'success' ? 'green' : (type == 'error' ? 'red' : (type == 'warning' ? 'amber' : 'blue')) }}-700 pr-6">{{ message|raw }}</p>
  12.             </div>
  13.         </div>
  14.     {% endfor %}
  15. {% endfor %}
  17. {% if error is defined and error %}
  18.     <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-r-lg mb-4 animate-shake relative">
  19.         <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-red-500 hover:text-red-700 transition-colors" onclick="this.closest('[class*=\'bg-red-50\']').remove()">
  20.             <i class="fas fa-times"></i>
  21.         </button>
  22.         <div class="flex items-center">
  23.             <i class="fas fa-exclamation-circle text-red-500 mr-3"></i>
  24.             <p class="text-red-700 pr-6">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
  25.         </div>
  26.     </div>
  27. {% endif %}
  29. <style>
  30. @keyframes slideIn {
  31.     from {
  32.         transform: translateY(-20px);
  33.         opacity: 0;
  34.     }
  35.     to {
  36.         transform: translateY(0);
  37.         opacity: 1;
  38.     }
  39. }
  40. .animate-slide-in {
  41.     animation: slideIn 0.3s ease-out;
  42. }
  44. @keyframes shake {
  45.     0%, 100% { transform: translateX(0); }
  46.     10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  47.     20%, 40%, 60%, 80% { transform: translateX(5px); }
  48. }
  49. .animate-shake {
  50.     animation: shake 0.6s ease-in-out;
  51. }
  53. @keyframes fadeOut {
  54.     from {
  55.         opacity: 1;
  56.         transform: translateY(0);
  57.     }
  58.     to {
  59.         opacity: 0;
  60.         transform: translateY(-10px);
  61.     }
  62. }
  63. .flash-message.fade-out {
  64.     animation: fadeOut 0.3s ease-out forwards;
  65. }
  66. </style>
  68. <script>
  69. document.addEventListener('DOMContentLoaded', function() {
  70.     document.querySelectorAll('.flash-message[data-autodismiss]').forEach(function(message) {
  71.         var delay = parseInt(message.dataset.autodismiss, 10);
  72.         setTimeout(function() {
  73.             message.classList.add('fade-out');
  74.             setTimeout(function() {
  75.                 message.remove();
  76.             }, 300);
  77.         }, delay);
  78.     });
  79. });
  80. </script>