bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clear-input recherche

Browse Source
This commit is contained in:
ouidade
2025-06-05 14:31:27 +02:00
parent 69ecedae66
commit 2f21024995
5 changed files with 99 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/dist/assets/bundle.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/eql/dist/assets/css/bundle.css
Vendored
+21 -4
View File
@@ -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
+32
View File
@@ -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
+32 -4
View File
@@ -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
+13 -2
View File
@@ -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>