templates/caisse/_flashes.html.twig line 1

Open in your IDE?
  1. {# Messages de la caisse : notifications en haut à droite, fermées automatiquement (sauf erreurs). #}
  2. {% set flashes = app.flashes %}
  3. {% if flashes is not empty %}
  4. <div class="caisse-toasts" id="caisseToasts">
  5.     {% for type, messages in flashes %}
  6.         {% for message in messages %}
  7.             <div class="caisse-toast caisse-toast-{{ type }}" role="{{ type == 'error' ? 'alert' : 'status' }}" data-persist="{{ type == 'error' ? '1' : '0' }}">
  8.                 <i class="fas {{ type == 'error' ? 'fa-circle-exclamation' : (type == 'warning' ? 'fa-triangle-exclamation' : (type == 'success' ? 'fa-circle-check' : 'fa-circle-info')) }}"></i>
  9.                 <span>{{ message }}</span>
  10.                 <button type="button" aria-label="Fermer" onclick="this.parentNode.remove()">×</button>
  11.             </div>
  12.         {% endfor %}
  13.     {% endfor %}
  14. </div>
  15. <style>
  16. .caisse-toasts { position:fixed; top:78px; right:16px; z-index:3000; display:flex; flex-direction:column; gap:8px; max-width:min(420px, calc(100vw - 32px)); }
  17. .caisse-toast { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.15); font-size:14px; color:#1e293b; border-left:4px solid #1a56db; }
  18. .caisse-toast i { margin-top:2px; }
  19. .caisse-toast span { flex:1; }
  20. .caisse-toast button { border:0; background:none; font-size:18px; line-height:1; color:#94a3b8; cursor:pointer; }
  21. .caisse-toast-success { border-left-color:#059669; } .caisse-toast-success i { color:#059669; }
  22. .caisse-toast-error { border-left-color:#dc2626; } .caisse-toast-error i { color:#dc2626; }
  23. .caisse-toast-warning { border-left-color:#d97706; } .caisse-toast-warning i { color:#d97706; }
  24. .caisse-toast-info i { color:#1a56db; }
  25. </style>
  26. <script>
  27. setTimeout(function () {
  28.     document.querySelectorAll('#caisseToasts .caisse-toast[data-persist="0"]').forEach(function (t) { t.remove(); });
  29. }, 4000);
  30. </script>
  31. {% endif %}