bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bouton togle présentation équipe

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-11-17 16:01:00 +01:00
parent 6c82eafd3d
commit a2b238504f
5 changed files with 174 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@@ -949,6 +949,42 @@ $(document).ready(function () {
////////////////// end class à view-rows-wrapper ////////////////
////////////// toggle page node projet //////////////////
document.addEventListener('DOMContentLoaded', function () {
const photo = document.querySelector('.field_field_equipe_photo');
const pres = document.querySelector('.field_field_equipe_presentation');
if (!pres) return;
// Création du bouton
const btn = document.createElement('button');
btn.className = 'btn-equipe-toggle';
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', false);
// Insertion du bouton juste après le bloc présentation
pres.insertAdjacentElement('afterend', btn);
// 3. Ajout de la ligne après le bouton
const separator = document.createElement('div');
separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator);
// Toggle
btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open');
if (photo) photo.classList.toggle('is-open');
btn.textContent = isOpen
? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
: "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', isOpen);
});
});
})(jQuery, window);

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

51
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -4306,6 +4306,7 @@ body {
margin-top: 1rem;
display: flex;
flex-direction: column;
/* Quand ouvert */
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats ::before {
content: "";
@@ -4328,14 +4329,13 @@ body {
padding-bottom: 0.5rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px;
border-bottom: solid black 1px;
column-count: 3; /* 3 colonnes */
column-gap: 1.5rem; /* espace entre les colonnes */
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet {
width: 25%;
break-inside: avoid; /* évite qu’un bloc soit coupé entre deux colonnes */
margin-bottom: 1rem; /* petit espace entre les blocs */
margin: 0;
margin-bottom: 1rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet h4 {
@@ -4359,6 +4359,45 @@ body {
font-family: "gilroy-light";
font-size: 0.6rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 1s ease, opacity 0.8s ease;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo.is-open,
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.is-open {
max-height: 1000px; /* assez grand pour contenir le contenu */
opacity: 1;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
justify-content: space-between;
align-items: center;
color: white;
text-transform: uppercase;
font-size: 0.5rem;
background-color: black;
padding-left: 0.5rem;
margin: auto;
display: flex;
margin-bottom: 1rem;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {
display: none;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
height: 25px;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-separator {
border-bottom: 1px solid black;
margin: 20px 0;
width: 100%;
}
.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet {
margin-top: 2rem;
width: 100%;

36
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -891,6 +891,42 @@ $(document).ready(function () {
////////////////// end class à view-rows-wrapper ////////////////
////////////// toggle page node projet //////////////////
document.addEventListener('DOMContentLoaded', function () {
const photo = document.querySelector('.field_field_equipe_photo');
const pres = document.querySelector('.field_field_equipe_presentation');
if (!pres) return;
// Création du bouton
const btn = document.createElement('button');
btn.className = 'btn-equipe-toggle';
btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', false);
// Insertion du bouton juste après le bloc présentation
pres.insertAdjacentElement('afterend', btn);
// 3. Ajout de la ligne après le bouton
const separator = document.createElement('div');
separator.className = 'equipe-separator';
btn.insertAdjacentElement('afterend', separator);
// Toggle
btn.addEventListener('click', function () {
const isOpen = pres.classList.toggle('is-open');
if (photo) photo.classList.toggle('is-open');
btn.textContent = isOpen
? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
: "EN SAVOIR PLUS SUR L'ÉQUIPE";
btn.setAttribute('aria-expanded', isOpen);
});
});
})(jQuery, window);

66
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss
View File

@@ -128,14 +128,12 @@
padding-bottom: 0.5rem;
}
.field_field_infos{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 400px;
border-bottom: solid black 1px;
column-count: 3; /* 3 colonnes */
column-gap: 1.5rem; /* espace entre les colonnes */
.infos-projet{
width: 25%;
break-inside: avoid; /* évite qu’un bloc soit coupé entre deux colonnes */
margin-bottom: 1rem; /* petit espace entre les blocs */
margin: 0;
margin-bottom: 1rem;
h4{
margin: 0;
@@ -156,10 +154,58 @@
height: 16rem;
}
}
.field_field_equipe_presentation p{
font-family: "gilroy-light";
font-size: 0.6rem;
.field_field_equipe_presentation {
p{
font-family: "gilroy-light";
font-size: 0.6rem;
}
}
.field_field_equipe_photo,
.field_field_equipe_presentation {
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 1s ease,
opacity 0.8s ease;
}
/* Quand ouvert */
.field_field_equipe_photo.is-open,
.field_field_equipe_presentation.is-open {
max-height: 1000px; /* assez grand pour contenir le contenu */
opacity: 1;
}
.btn-equipe-toggle{
justify-content: space-between;
align-items: center;
color: white;
text-transform: uppercase;
font-size: 0.5rem;
background-color: black;
padding-left: 0.5rem;
margin: auto;
display: flex;
svg{
display: none;
}
&::after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
// padding-bottom: 0.2rem;
height: 25px;
}
margin-bottom: 1rem;
}
.equipe-separator {
border-bottom: 1px solid black;
margin: 20px 0;
width: 100%;
}
.field_field_parties_projet{
margin-top: 2rem;