clear-input recherche

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5592,6 +5592,7 @@ svg.ext {
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form .form-item-combine .input-wrapper {
   display: inline-flex;
+  position: relative;
   font-size: 0.8rem;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form .form-item-combine .input-wrapper::after {
@@ -5602,6 +5603,25 @@ svg.ext {
   text-align: start !important;
   max-width: 100% !important;
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form .form-item-combine:not(.form-item-field-date-de-parution-value) .search-with-clear .clear-input {
+  position: absolute;
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: white;
+  border: none;
+  padding: 0.5rem;
+  margin: 0;
+  cursor: pointer;
+  color: #888;
+  display: none; /* masqué par défaut */
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form .form-item-combine:not(.form-item-field-date-de-parution-value) .search-with-clear .clear-input:hover {
+  color: #000;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form .form-item-field-date-de-parution-value .clear-input {
+  display: none;
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form select {
   font-size: 0.8rem;
 }
@@ -5632,9 +5652,8 @@ svg.ext {
   width: 100%;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .border {
-  width: 60%;
+  width: 80%;
   border-top: solid 1px rgba(0, 0, 0, 0.3);
-  left: -2rem;
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide.type-publications-issues-du-programme-eqld {
   order: 1;
@@ -5652,8 +5671,6 @@ svg.ext {
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide.type-les-projets-en-images {
   order: 3;
-  width: 80%;
-  border-top: solid 1px rgba(0, 0, 0, 0.3);
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content .view-type-slide.type-presse {
   order: 5;

web/themes/custom/eql/scripts/main.js

@@ -316,3 +316,35 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 });
 ////////////////// end boutons media ////////////////
+
+
+
+////////////// start croix clear input recherche ////////////
+document.addEventListener("DOMContentLoaded", function () {
+  const input = document.getElementById("edit-combine");
+  const clearBtn = document.querySelector('.form-item-combine .clear-input');
+  const form = document.querySelector("form.views-exposed-form");
+
+  if (input && clearBtn && form) {
+    // Affiche la croix si contenu présent
+    input.addEventListener('input', () => {
+      clearBtn.style.display = input.value ? 'block' : 'none';
+    });
+
+    // Efface et soumet le formulaire
+    clearBtn.addEventListener('click', () => {
+      input.value = '';
+      clearBtn.style.display = 'none';
+      input.focus();
+      form.submit(); // déclenche la recherche sans rechargement manuel
+    });
+
+    // Affiche la croix au chargement si une valeur est déjà présente
+    if (input.value) {
+      clearBtn.style.display = 'block';
+    }
+  }
+});
+
+
+////////////// end croix clear input recherche ////////////

web/themes/custom/eql/scss/pages/ressources.scss

@@ -359,6 +359,7 @@
                                                 label{display: none;}
                                                 .input-wrapper{
                                                     display: inline-flex;
+                                                    position: relative;
                                                     font-size: 0.8rem;
                                                     &::after{
                                                         content: url("../images/pictos/loupe.svg");
@@ -369,6 +370,33 @@
                                                         max-width: 100% !important;
                                                     }
                                                 }
+                                                
+                                                  
+                                                  
+                                            }
+                                            .form-item-combine:not(.form-item-field-date-de-parution-value)
+                                            .search-with-clear{
+                                                .clear-input {
+                                                    position: absolute;
+                                                    right: -4px;
+                                                    top: 50%;
+                                                    transform: translateY(-50%);
+                                                    background: white;
+                                                    border: none;
+                                                    padding: 0.5rem;
+                                                    margin: 0;
+                                                    cursor: pointer;
+                                                    color: #888;
+                                                    display: none; /* masqué par défaut */
+                                                  }
+                                                  
+                                                  .clear-input:hover {
+                                                    color: #000;
+                                                  }
+                                            }
+
+                                            .form-item-field-date-de-parution-value .clear-input{
+                                                display: none;
                                             }
                                             select{
                                                 font-size: 0.8rem;
@@ -401,9 +429,9 @@
                                         flex-wrap: wrap;
                                         width: 100%;
                                         .border{
-                                            width: 60%;
+                                            width: 80%;
                                             border-top: solid 1px rgba(0, 0, 0, 0.3);
-                                            left: -2rem;
+                                            
                                         }
                                         .view-type-slide:not(:first-of-type) {
                                             // width: 80%;
@@ -424,8 +452,8 @@
                                         .view-type-slide.type-paroles-de-laureats{order: 2;}
                                         .view-type-slide.type-les-projets-en-images{
                                             order: 3;
-                                            width: 80%;
-                                            border-top: solid 1px rgba(0, 0, 0, 0.3);
+                                            // width: 80%;
+                                            // border-top: solid 1px rgba(0, 0, 0, 0.3);
                                         }
                                         .view-type-slide.type-presse{
                                             order: 5;

web/themes/custom/eql/templates/partials/input--textfield.html.twig

@@ -12,6 +12,17 @@
  * @ingroup themeable
  */
 #}
-<div class="input-wrapper">
-<input{{ attributes }} />{{ children }}
+
+
+<div class="input-wrapper search-with-clear">
+  <input{{ attributes }} />{{ children }}
+  {% if attributes.id == 'edit-combine' %}
+    <button type="button" class="clear-input" aria-label="Effacer la recherche">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+    </svg>
+    </button>
+  {% endif %}
 </div>