From b6f1de83ff7472aea446f462c1b9077819e32cbe Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 7 Nov 2025 16:19:58 +0100 Subject: [PATCH] /lesprojets pictos sur nodesites clean css --- .../dist/assets/css/bundle.css | 111 ++----------- .../src/assets/scss/pages/lesprojets.scss | 151 ++++-------------- 2 files changed, 45 insertions(+), 217 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 26a479f..006f485 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -4859,135 +4859,58 @@ main { font-size: 0.4rem; position: relative; } -#lesprojets .content_container .views-element-container .views-row .views-field-group.marseille::before { +#lesprojets .content_container .views-element-container .views-row .views-field-group::before { content: ""; position: absolute; top: -1rem; left: -1rem; width: 3rem; height: 3rem; - background-image: url("../img/pictos_sites/marseille.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; + opacity: 0; +} +#lesprojets .content_container .views-element-container .views-row .views-field-group.marseille::before { + background-image: url("../img/pictos_sites/marseille.svg"); + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.sedan::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/sedan.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.lodève::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/lodeve.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.colmar::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/colmar.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.manosque::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/manosque.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.pessac::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/pessac.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } -#lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essones::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/corbeil-essones.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; +#lesprojets .content_container .views-element-container .views-row .views-field-group.corbeil-essonnes::before { + background-image: url("../img/pictos_sites/corbeil-essonnes.svg"); + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.caen::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/caen.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.le-mans::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/le-mans.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group.coulommiers::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; background-image: url("../img/pictos_sites/coulommiers.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; + opacity: 1; } #lesprojets .content_container .views-element-container .views-row .views-field-group .views-field-title h2 { margin: 0; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss index 8be2658..94cd0f4 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss @@ -37,143 +37,48 @@ main{ padding-top: 2rem; margin-left: 2rem; margin-right: 2rem; - .views-field-group { + $sites-pictos: ( + marseille: "marseille.svg", + sedan: "sedan.svg", + lodève: "lodeve.svg", + colmar: "colmar.svg", + manosque: "manosque.svg", + pessac: "pessac.svg", + corbeil-essonnes: "corbeil-essonnes.svg", + caen: "caen.svg", + le-mans: "le-mans.svg", + coulommiers: "coulommiers.svg" + ); + + .views-field-group { width: 18%; margin-bottom: 2rem; font-size: 0.4rem; - position: relative; // important pour positionner le ::before - - &.marseille::before { + position: relative; + + &::before { content: ""; position: absolute; top: -1rem; left: -1rem; width: 3rem; height: 3rem; - background-image: url("../img/pictos_sites/marseille.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics + pointer-events: none; + opacity: 0; // par défaut caché } - &.sedan::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/sedan.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.lodève::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/lodeve.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - - &.colmar::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/colmar.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.manosque::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/manosque.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.pessac::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/pessac.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.corbeil-essones::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/corbeil-essones.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.caen::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/caen.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.le-mans::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/le-mans.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics - } - &.coulommiers::before { - content: ""; - position: absolute; - top: -1rem; - left: -1rem; - width: 3rem; - height: 3rem; - background-image: url("../img/pictos_sites/coulommiers.svg"); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - pointer-events: none; // si tu ne veux pas bloquer les clics + + // Pour chaque site, on applique juste le bon pictogramme + @each $name, $file in $sites-pictos { + &.#{$name}::before { + background-image: url("../img/pictos_sites/#{$file}"); + opacity: 1; + } } + + .views-field-title{ h2{ margin: 0;