From 2beb6ca3426fdc937ef12238f90c8c671e63ab28 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 23 May 2025 13:49:57 +0200 Subject: [PATCH] css filtre, js type ressources --- web/themes/custom/eql/dist/assets/bundle.js | 2 +- .../custom/eql/dist/assets/css/bundle.css | 28 +++++++-- .../eql/dist/assets/images/pictos/loupe.svg | 61 +++++++++++++++++++ web/themes/custom/eql/scripts/main.js | 22 ++++--- .../custom/eql/scss/pages/ressources.scss | 24 +++++++- .../custom/eql/scss/partials/_filtres.scss | 7 ++- .../custom/eql/templates/select.html.twig | 3 +- 7 files changed, 128 insertions(+), 19 deletions(-) create mode 100644 web/themes/custom/eql/dist/assets/images/pictos/loupe.svg diff --git a/web/themes/custom/eql/dist/assets/bundle.js b/web/themes/custom/eql/dist/assets/bundle.js index 604b4c5..faf01a4 100644 --- a/web/themes/custom/eql/dist/assets/bundle.js +++ b/web/themes/custom/eql/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("/**\n * @file\n * External links js file.\n */\n\n (function ($, Drupal, d \*************************/ /***/ (function() { -eval("jQuery(function ($) {\n console.log('salut');\n\n // MENU BURGER\n const burger = document.getElementById(\"block-burger\");\n const burgertitle = document.getElementById(\"block-burger-menu\");\n if (burger && burgertitle) {\n burgertitle.addEventListener(\"click\", function () {\n burger.classList.toggle('opened');\n });\n }\n\n // FAQ — réponses\n const answers = document.getElementsByClassName(\"field--name-field-reponse\");\n const fichiers = document.getElementsByClassName(\"field--name-field-fichiers\");\n const liens = document.getElementsByClassName(\"field--name-field-liens\");\n const ressources = document.getElementsByClassName(\"field--name-field-ress\");\n const questions = document.getElementsByClassName(\"field--name-field-question\");\n\n for (let i = 0; i < questions.length; i++) {\n const q = questions[i];\n q.addEventListener(\"click\", function () {\n // Réponses\n Array.from(answers).forEach(a => a.classList.remove(\"opened\"));\n const r = this.parentNode.querySelector(\".field--name-field-reponse\");\n if (r) r.classList.add(\"opened\");\n\n // Fichiers\n Array.from(fichiers).forEach(f => f.classList.remove(\"opened\"));\n const f = this.parentNode.querySelector(\".field--name-field-fichiers\");\n if (f) f.classList.add(\"opened\");\n\n // Liens\n Array.from(liens).forEach(l => l.classList.remove(\"opened\"));\n const l = this.parentNode.querySelector(\".field--name-field-liens\");\n if (l) l.classList.add(\"opened\");\n\n // Ressources\n Array.from(ressources).forEach(r => r.classList.remove(\"opened\"));\n const res = this.parentNode.querySelector(\".field--name-field-ress\");\n if (res) res.classList.add(\"opened\");\n });\n }\n\n // SLIDESHOW INIT\n $('.path-frontpage .view-actus-blocks-pages .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 1,\n dots: true,\n arrows: true,\n centerMode: true,\n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n\n $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({\n dots: true,\n arrows: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n\n $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({\n slidesToShow: 1,\n dots: true,\n arrows: false,\n draggable: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n \n\n \n \n ///// fusion views-type-slide de class identique ////////////\n\n const seen = new Set();\n \n $('.view-type-slide').each(function () {\n const $slide = $(this);\n const classes = $slide.attr('class').split(/\\s+/);\n const typeClass = classes.find(cls => cls.startsWith('type-'));\n \n if (typeClass) {\n if (seen.has(typeClass)) {\n // Trouver le premier slide avec cette classe\n const $target = $('.view-type-slide.' + typeClass).first();\n \n // Déplacer les rows de la slide actuelle vers la première\n $slide.find('.views-row').appendTo($target.find('.views-row-wrapper'));\n \n // Supprimer la slide en double\n $slide.remove();\n } else {\n seen.add(typeClass);\n }\n }\n });\n\n $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 3,\n dots: false,\n arrows: true,\n infinite: false,\n centerMode: false,\n draggable: true,\n\n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 3,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n\n // Classes media → .wrapper-ressource\n $(\".wrapper-ressource\").each(function () {\n const media = $(this).find(\".field--name-field-type-de-media\").text().trim();\n const className = media\n .toLowerCase()\n .normalize(\"NFD\").replace(/[\\u0300-\\u036f]/g, \"\")\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/(^-|-$)/g, '');\n $(this).addClass('type-media-' + className);\n });\n console.log(\"classses media\");\n\n\n\n // Ouvrir les liens externes dans un nouvel onglet\n document.querySelectorAll('a[href^=\"http\"]').forEach(link => {\n if (!link.href.includes(location.hostname)) {\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n }\n });\n\n // Scroll automatique au filtre\n if (document.body.classList.contains(\"path-projets\")) {\n const form = document.querySelector(\".views-exposed-form\");\n if (form) form.setAttribute(\"action\", form.action.split(\"#\")[0] + \"#filtres\");\n\n if (window.location.hash === \"#filtres\") {\n const target = document.getElementById(\"filtres\");\n if (target) {\n const offset = 300;\n const top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n window.scrollTo({ top: top, behavior: \"smooth\" });\n }\n }\n\n // MASQUER TYPE DE RESSOURCE DOUBLON\n $(\".view-type-slide\").each(function () {\n const h3Content = $(this).find(\"h3\").text().trim();\n $(this).find(\".field--name-field-type-de-ressource\").each(function () {\n if ($(this).text().trim() === h3Content) {\n $(this).hide();\n }\n });\n });\n }\n});\n\n\n//# sourceURL=webpack://dev.eql.fr/./scripts/main.js?"); +eval("jQuery(function ($) {\n console.log('salut');\n\n // MENU BURGER\n const burger = document.getElementById(\"block-burger\");\n const burgertitle = document.getElementById(\"block-burger-menu\");\n if (burger && burgertitle) {\n burgertitle.addEventListener(\"click\", function () {\n burger.classList.toggle('opened');\n });\n }\n\n // FAQ — réponses\n const answers = document.getElementsByClassName(\"field--name-field-reponse\");\n const fichiers = document.getElementsByClassName(\"field--name-field-fichiers\");\n const liens = document.getElementsByClassName(\"field--name-field-liens\");\n const ressources = document.getElementsByClassName(\"field--name-field-ress\");\n const questions = document.getElementsByClassName(\"field--name-field-question\");\n\n for (let i = 0; i < questions.length; i++) {\n const q = questions[i];\n q.addEventListener(\"click\", function () {\n // Réponses\n Array.from(answers).forEach(a => a.classList.remove(\"opened\"));\n const r = this.parentNode.querySelector(\".field--name-field-reponse\");\n if (r) r.classList.add(\"opened\");\n\n // Fichiers\n Array.from(fichiers).forEach(f => f.classList.remove(\"opened\"));\n const f = this.parentNode.querySelector(\".field--name-field-fichiers\");\n if (f) f.classList.add(\"opened\");\n\n // Liens\n Array.from(liens).forEach(l => l.classList.remove(\"opened\"));\n const l = this.parentNode.querySelector(\".field--name-field-liens\");\n if (l) l.classList.add(\"opened\");\n\n // Ressources\n Array.from(ressources).forEach(r => r.classList.remove(\"opened\"));\n const res = this.parentNode.querySelector(\".field--name-field-ress\");\n if (res) res.classList.add(\"opened\");\n });\n }\n\n // SLIDESHOW INIT\n $('.path-frontpage .view-actus-blocks-pages .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 1,\n dots: true,\n arrows: true,\n centerMode: true,\n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n\n $('.page-node-type-actualite .block-entity-fieldnodefield-images .field--type-image').slick({\n dots: true,\n arrows: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n\n $('.page-node-type-projet .block-entity-fieldnodefield-photo .field--type-image').slick({\n slidesToShow: 1,\n dots: true,\n arrows: false,\n draggable: true,\n adaptiveHeight: true,\n responsive: [{\n breakpoint: 800,\n settings: { adaptiveHeight: true }\n }]\n });\n \n\n \n \n ///// fusion views-type-slide de class identique ////////////\n\n const seen = new Set();\n \n $('.view-type-slide').each(function () {\n const $slide = $(this);\n const classes = $slide.attr('class').split(/\\s+/);\n const typeClass = classes.find(cls => cls.startsWith('type-'));\n \n if (typeClass) {\n if (seen.has(typeClass)) {\n // Trouver le premier slide avec cette classe\n const $target = $('.view-type-slide.' + typeClass).first();\n \n // Déplacer les rows de la slide actuelle vers la première\n $slide.find('.views-row').appendTo($target.find('.views-row-wrapper'));\n \n // Supprimer la slide en double\n $slide.remove();\n } else {\n seen.add(typeClass);\n }\n }\n });\n\n $('.path-ressources .view:not(.view-partenaires) .view-content .view-type-slide .views-row-wrapper').slick({\n slidesToShow: 3,\n dots: false,\n arrows: true,\n infinite: false,\n centerMode: false,\n draggable: true,\n\n responsive: [{\n breakpoint: 810,\n settings: {\n slidesToShow: 3,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n\n // Classes media → .wrapper-ressource\n $(\".wrapper-ressource\").each(function () {\n const media = $(this).find(\".field--name-field-type-de-media\").text().trim();\n const className = media\n .toLowerCase()\n .normalize(\"NFD\").replace(/[\\u0300-\\u036f]/g, \"\")\n .replace(/[^a-z0-9]+/g, '-')\n .replace(/(^-|-$)/g, '');\n $(this).addClass('type-media-' + className);\n });\n console.log(\"classses media\");\n\n // MASQUER TYPE DE RESSOURCE DOUBLON\n if (document.body.classList.contains(\"path-ressources\")) {\n $(\".view-type-slide\").each(function () {\n const h3Content = $(this).find(\"h3\").text().trim();\n console.log(h3Content);\n $(this).find(\".field--name-field-type-de-ressource .field__item a\").each(function () {\n if ($(this).text().trim() === h3Content) {\n $(this).hide();\n }\n });\n });\n\n }\n\n // Ouvrir les liens externes dans un nouvel onglet\n document.querySelectorAll('a[href^=\"http\"]').forEach(link => {\n if (!link.href.includes(location.hostname)) {\n link.setAttribute('target', '_blank');\n link.setAttribute('rel', 'noopener noreferrer');\n }\n });\n\n // Scroll automatique au filtre\n if (document.body.classList.contains(\"path-projets\")) {\n const form = document.querySelector(\".views-exposed-form\");\n if (form) form.setAttribute(\"action\", form.action.split(\"#\")[0] + \"#filtres\");\n\n if (window.location.hash === \"#filtres\") {\n const target = document.getElementById(\"filtres\");\n if (target) {\n const offset = 300;\n const top = target.getBoundingClientRect().top + window.pageYOffset - offset;\n window.scrollTo({ top: top, behavior: \"smooth\" });\n }\n }\n\n\n }\n});\n\n\n//# sourceURL=webpack://dev.eql.fr/./scripts/main.js?"); /***/ }) diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index b866f59..2b8466a 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -5372,7 +5372,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 { display: grid; - grid-template-columns: 30% 75%; + grid-template-columns: 25% 80%; gap: 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-filters { @@ -5384,7 +5384,7 @@ svg.ext { margin-bottom: 5rem; padding: 1rem; padding-left: 2rem; - padding-right: 3rem; + padding-right: 1.5rem; z-index: 1; transform: translateY(-100px); margin-bottom: -100px; @@ -5514,6 +5514,25 @@ svg.ext { padding-bottom: 1rem; } } +.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 { + border-top: none; + border-left: none; + border-right: 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 .form-item-combine label { + 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 .form-item-combine input { + 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 input::after { + content: url("../images/pictos/loupe.svg"); + display: inline-block; +} +.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 ::placeholder { + 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-content { transition: opacity 0.3s ease; display: flex; @@ -6245,15 +6264,16 @@ html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite d } } #views-exposed-form-base-de-donnees-block-1 .js-form-item { - flex-direction: column !important; margin-right: 0 !important; } #views-exposed-form-base-de-donnees-block-1 .js-form-item input, #views-exposed-form-base-de-donnees-block-1 .js-form-item select { width: 100%; + text-align: end; } #views-exposed-form-base-de-donnees-block-1 .js-form-item label { - padding-right: 0 !important; + padding-right: 0.5rem !important; + flex: 2 0 auto !important; } #views-exposed-form-base-de-donnees-block-1, diff --git a/web/themes/custom/eql/dist/assets/images/pictos/loupe.svg b/web/themes/custom/eql/dist/assets/images/pictos/loupe.svg new file mode 100644 index 0000000..c05bb07 --- /dev/null +++ b/web/themes/custom/eql/dist/assets/images/pictos/loupe.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 319a5a1..70ac91d 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -141,7 +141,19 @@ jQuery(function ($) { }); console.log("classses media"); + // MASQUER TYPE DE RESSOURCE DOUBLON + if (document.body.classList.contains("path-ressources")) { + $(".view-type-slide").each(function () { + const h3Content = $(this).find("h3").text().trim(); + console.log(h3Content); + $(this).find(".field--name-field-type-de-ressource .field__item a").each(function () { + if ($(this).text().trim() === h3Content) { + $(this).hide(); + } + }); + }); + } // Ouvrir les liens externes dans un nouvel onglet document.querySelectorAll('a[href^="http"]').forEach(link => { @@ -165,14 +177,6 @@ jQuery(function ($) { } } - // MASQUER TYPE DE RESSOURCE DOUBLON - $(".view-type-slide").each(function () { - const h3Content = $(this).find("h3").text().trim(); - $(this).find(".field--name-field-type-de-ressource").each(function () { - if ($(this).text().trim() === h3Content) { - $(this).hide(); - } - }); - }); + } }); diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss index a16a16f..e58f95a 100644 --- a/web/themes/custom/eql/scss/pages/ressources.scss +++ b/web/themes/custom/eql/scss/pages/ressources.scss @@ -122,7 +122,7 @@ } .view-base-de-donnees{ display: grid; - grid-template-columns: 30% 75%; + grid-template-columns: 25% 80%; gap: 2rem; .view-filters{ position: sticky; @@ -133,7 +133,7 @@ margin-bottom: 5rem; padding: 1rem; padding-left: 2rem; - padding-right: 3rem; + padding-right: 1.5rem; z-index: 1; transform: translateY(-100px); margin-bottom: -100px; @@ -275,6 +275,26 @@ padding-bottom: 1rem; } } + .form-item-combine{ + border-top: none; + border-left: none; + border-right: none; + label{display: none;} + input{ + text-align: start !important; + max-width: 100% !important; + &::after{ + content: url("../images/pictos/loupe.svg"); + display: inline-block; + } + } + } + select{ + ::placeholder{ + display: none; + } + } + } diff --git a/web/themes/custom/eql/scss/partials/_filtres.scss b/web/themes/custom/eql/scss/partials/_filtres.scss index ffbc56e..6c9b580 100644 --- a/web/themes/custom/eql/scss/partials/_filtres.scss +++ b/web/themes/custom/eql/scss/partials/_filtres.scss @@ -11,14 +11,17 @@ justify-content: center; } .js-form-item{ - flex-direction: column !important; + // flex-direction: column !important; margin-right: 0 !important; input, select{ width: 100%; + text-align: end; + } label{ - padding-right: 0 !important; + padding-right: 0.5rem !important; + flex: 2 0 auto !important; } } diff --git a/web/themes/custom/eql/templates/select.html.twig b/web/themes/custom/eql/templates/select.html.twig index 58626da..ec99fa3 100644 --- a/web/themes/custom/eql/templates/select.html.twig +++ b/web/themes/custom/eql/templates/select.html.twig @@ -26,4 +26,5 @@ {% endif %} {% endfor %} -{% endapply %} \ No newline at end of file +{% endapply %} +