Messages flash : on les affiche par-dessus la page et ils disparaissent au...

Messages flash : on les affiche par-dessus la page et ils disparaissent au bout de quelques secondes

public/assets/css/app.css

@@ -604,4 +604,23 @@ audio::-webkit-media-controls-mute-button {
     padding: 15px;
     border-radius: 15px;
     box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.63);
+}
+
+#flashes {
+    display: none;
+    width: fit-content;
+    min-width: 33%;
+    position: absolute;
+    top: 90px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    z-index: 150;
+}
+#flashes .alert {
+    padding-left: 40px;
+    padding-right: 40px;
+    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.63);
 }
\ No newline at end of file

public/assets/js/app.js

@@ -54,6 +54,7 @@ $(function() {
     function initializeForm() {
         initializeFieldsSelect2();
         initializeOverlayOnClick();
+        initializeFlashes();
         // initializeToggleFields();
         // initializeClickableRows();
         // initializePopover();
@@ -529,4 +530,15 @@ function initializeAjaxReload() {
             }
         });
     })
+}
+
+function initializeFlashes() {
+    // show si content puis hide
+    $flashes = $('#flashes');
+    if ($flashes.find('.alert').length) {
+        $flashes.show();
+        window.setTimeout(function () {
+            $flashes.fadeOut(1000);
+        }, 4000);
+    }
 }
\ No newline at end of file

templates/_flashMessages.html.twig

 {% if app.session.started %}
     {% for type, flashes in app.session.flashbag.all %}
         {% for message in flashes %}
-            <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
+            <div class="alert alert-{{ type }}" role="alert">
                 {{ message|trans|raw }}
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
         {% endfor %}
     {% endfor %}

templates/base.html.twig

@@ -40,10 +40,8 @@
 
 {#        {% for flashMessage in app.flashes('notice') %} <div class="alert alert-notice"> {{ flashMessage }} </div> {% endfor %}#}
 
-        <div id="flashes" class="row mx-lg-5 mx-sm-3 text-center">
-            <div class="col-md-12">
-                {% include "_flashMessages.html.twig" %}
-            </div>
+        <div id="flashes">
+            {% include "_flashMessages.html.twig" %}
         </div>
     {% endblock flash_messages %}
 

templates/flashes.html.twig

@@ -3,9 +3,8 @@
         {% if app.session.started %}
             {% for type, flashes in app.session.flashbag.all %}
                 {% for message in flashes %}
-                    <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
+                    <div class="alert alert-{{ type }}" role="alert">
                         {{ message|trans|raw }}
-                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                     </div>
                 {% endfor %}
             {% endfor %}

templates/reloadFlashes.html.twig

+<script id="refreshedFlashes" type="text/template">
+    {% include 'flashes.html.twig' %}
+</script>
+
+<script type="text/javascript">
+    $('#flashes').html($('#refreshedFlashes').html());
+    $('#refreshedFlashes').remove();
+    initializeFlashes();
+</script>
\ No newline at end of file