Compare commits
2 Commits
578b3d2e17
...
aec8acb16f
| Author | SHA1 | Date | |
|---|---|---|---|
| aec8acb16f | |||
| 9dedde9ff1 |
File diff suppressed because one or more lines are too long
@ -609,6 +609,7 @@ header .header:hover + .header_nav_container {
|
||||
|
||||
footer {
|
||||
z-index: 100;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -814,34 +815,72 @@ footer {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 {
|
||||
background-color: white;
|
||||
padding: 0.3rem 1rem 1rem 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: "gilroy-medium";
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2::after,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 h2::after {
|
||||
content: " :";
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 label {
|
||||
text-transform: lowercase;
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: solid black 0.5px;
|
||||
padding-top: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2 {
|
||||
text-transform: uppercase;
|
||||
font-family: "gilroy-medium";
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 h2::after {
|
||||
content: " :";
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 label {
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select label,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select label {
|
||||
width: 50%;
|
||||
text-transform: lowercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: "gilroy-light";
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-select select,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-select select {
|
||||
background-color: white;
|
||||
border: none;
|
||||
width: 50%;
|
||||
font-size: 0.6rem;
|
||||
font-family: "gilroy-light";
|
||||
font-family: "gilroy-medium";
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-select#edit-field-mots-clefs-target-id--2 {
|
||||
max-width: 100%;
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .js-form-type-textfield label,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .js-form-type-textfield label {
|
||||
text-transform: lowercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: "gilroy-light";
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeressourcespage-1 .form-actions input,
|
||||
.layout-sidebar-first #block-quartiers-de-demain-formulaireexposeactuspage-1 .form-actions input {
|
||||
background-color: white;
|
||||
border: solid black 0.5px;
|
||||
width: 45%;
|
||||
padding: 0.3rem 0.2rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
|
||||
#logo-animated-container {
|
||||
@ -1456,6 +1495,15 @@ footer {
|
||||
width: fit-content;
|
||||
padding-left: 0.5rem;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem !important;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
#home .__container-deroulement .config_pages--type--deroulement .field_field_calendrier .file--application-pdf {
|
||||
@ -1963,21 +2011,28 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
#lightbox .prev,
|
||||
#lightbox .next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.prev {
|
||||
left: 30px;
|
||||
#lightbox .prev img,
|
||||
#lightbox .next img {
|
||||
width: 40px; /* adapte si besoin */
|
||||
height: 40px;
|
||||
pointer-events: none; /* évite que l'image bloque le clic */
|
||||
}
|
||||
|
||||
.next {
|
||||
right: 30px;
|
||||
#lightbox .prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#lightbox .next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/*pages*/
|
||||
@ -3886,6 +3941,7 @@ main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 2rem;
|
||||
}
|
||||
#ressources .layout-content .content_container #block-quartiers-de-demain-titredepage {
|
||||
margin-top: 3rem;
|
||||
|
||||
BIN
web/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg
vendored
Normal file
BIN
web/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg
vendored
Normal file
Binary file not shown.
41
web/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg
vendored
Normal file
41
web/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="90.490662"
|
||||
height="90.491997"
|
||||
viewBox="0 0 90.490662 90.491995"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath393">
|
||||
<path
|
||||
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||
transform="translate(-918.03445,-2163.9844)"
|
||||
id="path393" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="g1"
|
||||
transform="translate(-1178.8006,-9024.7622)">
|
||||
<g
|
||||
id="g696">
|
||||
<path
|
||||
id="path392"
|
||||
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
|
||||
style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
|
||||
clip-path="url(#clipPath393)" />
|
||||
<path
|
||||
id="path394"
|
||||
d="M 0,0 -9.997,-8.944 0,-17.887"
|
||||
style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="90.490662"
|
||||
height="90.491997"
|
||||
viewBox="0 0 90.490662 90.491995"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath393">
|
||||
<path
|
||||
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||
transform="translate(-918.03445,-2163.9844)"
|
||||
id="path393" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="g1"
|
||||
transform="translate(-1178.8006,-9024.7622)">
|
||||
<g
|
||||
id="g696">
|
||||
<path
|
||||
id="path392"
|
||||
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
|
||||
style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
|
||||
clip-path="url(#clipPath393)" />
|
||||
<path
|
||||
id="path394"
|
||||
d="M 0,0 -9.997,-8.944 0,-17.887"
|
||||
style="fill:none;stroke:#ffffff;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -474,101 +474,207 @@ $(document).ready(function(){
|
||||
|
||||
|
||||
//////////////// start lightbox galerie image page site////////////////////////
|
||||
// Sélection des images à ouvrir dans la lightbox
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
let currentIndex;
|
||||
|
||||
// Sélection des images et de leurs légendes dans la galerie
|
||||
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
let currentIndex;
|
||||
// Création de la lightbox
|
||||
const lightbox = document.createElement('div');
|
||||
lightbox.id = 'lightbox';
|
||||
lightbox.classList.add('lightbox');
|
||||
document.body.appendChild(lightbox);
|
||||
|
||||
// Création de la lightbox et de ses éléments
|
||||
const lightbox = document.createElement('div');
|
||||
lightbox.id = 'lightbox';
|
||||
lightbox.classList.add('lightbox');
|
||||
document.body.appendChild(lightbox);
|
||||
// Image affichée dans la lightbox
|
||||
const img = document.createElement('img');
|
||||
img.classList.add('lightbox-content');
|
||||
lightbox.appendChild(img);
|
||||
|
||||
const img = document.createElement('img');
|
||||
lightbox.appendChild(img);
|
||||
// Légende
|
||||
const caption = document.createElement('p');
|
||||
caption.classList.add('caption');
|
||||
lightbox.appendChild(caption);
|
||||
|
||||
// Élément pour afficher la légende
|
||||
const caption = document.createElement('p');
|
||||
caption.classList.add('caption');
|
||||
lightbox.appendChild(caption);
|
||||
// Bouton de fermeture
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.classList.add('close');
|
||||
closeBtn.innerHTML = '×';
|
||||
lightbox.appendChild(closeBtn);
|
||||
|
||||
const closeBtn = document.createElement('span');
|
||||
closeBtn.classList.add('close');
|
||||
closeBtn.innerHTML = '×';
|
||||
lightbox.appendChild(closeBtn);
|
||||
// Bouton précédent avec image
|
||||
const prevBtn = document.createElement('a');
|
||||
prevBtn.classList.add('prev');
|
||||
const prevImg = document.createElement('img');
|
||||
prevImg.src = "/themes/custom/quartiers_de_demain/dist/assets/img/prev-blanc.svg"; // 🔁 adapte ce chemin
|
||||
prevImg.alt = 'Précédent';
|
||||
prevBtn.appendChild(prevImg);
|
||||
lightbox.appendChild(prevBtn);
|
||||
|
||||
const prevBtn = document.createElement('a');
|
||||
prevBtn.classList.add('prev');
|
||||
prevBtn.innerHTML = '❮';
|
||||
lightbox.appendChild(prevBtn);
|
||||
// Bouton suivant avec image
|
||||
const nextBtn = document.createElement('a');
|
||||
nextBtn.classList.add('next');
|
||||
const nextImg = document.createElement('img');
|
||||
nextImg.src = '/themes/custom/quartiers_de_demain/dist/assets/img/next-blanc.svg'; // 🔁 adapte ce chemin
|
||||
nextImg.alt = 'Suivant';
|
||||
nextBtn.appendChild(nextImg);
|
||||
lightbox.appendChild(nextBtn);
|
||||
|
||||
const nextBtn = document.createElement('a');
|
||||
nextBtn.classList.add('next');
|
||||
nextBtn.innerHTML = '❯';
|
||||
lightbox.appendChild(nextBtn);
|
||||
// Fonction d'affichage
|
||||
function showImage(index) {
|
||||
if (index < 0) index = images.length - 1;
|
||||
if (index >= images.length) index = 0;
|
||||
currentIndex = index;
|
||||
|
||||
// Fonction pour afficher l'image et la légende à l'index donné
|
||||
function showImage(index) {
|
||||
if (index < 0) index = images.length - 1;
|
||||
if (index >= images.length) index = 0;
|
||||
currentIndex = index;
|
||||
img.src = images[currentIndex].getAttribute('src');
|
||||
|
||||
// Mettre à jour l'image
|
||||
img.src = images[currentIndex].getAttribute('src');
|
||||
const captionText = images[currentIndex]
|
||||
.closest('.cadre-img-zoom')
|
||||
?.nextElementSibling?.querySelector('.image-field-caption p')
|
||||
?.textContent || '';
|
||||
|
||||
// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
|
||||
const captionText = images[currentIndex]
|
||||
.closest('.cadre-img-zoom')
|
||||
.nextElementSibling.querySelector('.image-field-caption p')
|
||||
.textContent;
|
||||
caption.textContent = captionText;
|
||||
lightbox.style.display = 'flex';
|
||||
}
|
||||
|
||||
// Clic sur une image
|
||||
images.forEach((image, index) => {
|
||||
image.addEventListener('click', () => {
|
||||
showImage(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Navigation & fermeture
|
||||
closeBtn.addEventListener('click', () => lightbox.style.display = 'none');
|
||||
prevBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
showImage(currentIndex - 1);
|
||||
});
|
||||
nextBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
showImage(currentIndex + 1);
|
||||
});
|
||||
|
||||
// Clic en dehors de l'image pour fermer
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
if (e.target === lightbox) lightbox.style.display = 'none';
|
||||
});
|
||||
|
||||
// Clavier
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (lightbox.style.display === 'flex') {
|
||||
if (e.key === 'Escape') lightbox.style.display = 'none';
|
||||
else if (e.key === 'ArrowLeft') showImage(currentIndex - 1);
|
||||
else if (e.key === 'ArrowRight') showImage(currentIndex + 1);
|
||||
}
|
||||
});
|
||||
|
||||
// // Sélection des images et de leurs légendes dans la galerie
|
||||
// let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
|
||||
// let currentIndex;
|
||||
|
||||
// // Création de la lightbox et de ses éléments
|
||||
// const lightbox = document.createElement('div');
|
||||
// lightbox.id = 'lightbox';
|
||||
// lightbox.classList.add('lightbox');
|
||||
// document.body.appendChild(lightbox);
|
||||
|
||||
// const img = document.createElement('img');
|
||||
// lightbox.appendChild(img);
|
||||
|
||||
// // Élément pour afficher la légende
|
||||
// const caption = document.createElement('p');
|
||||
// caption.classList.add('caption');
|
||||
// lightbox.appendChild(caption);
|
||||
|
||||
// const closeBtn = document.createElement('span');
|
||||
// closeBtn.classList.add('close');
|
||||
// closeBtn.innerHTML = '×';
|
||||
// lightbox.appendChild(closeBtn);
|
||||
|
||||
// // const prevBtn = document.createElement('a');
|
||||
// // prevBtn.classList.add('prev');
|
||||
// // prevBtn.innerHTML = '❮';
|
||||
// // lightbox.appendChild(prevBtn);
|
||||
// const prevBtn = document.createElement('a');
|
||||
// prevBtn.classList.add('prev');
|
||||
// const prevImg = document.createElement('img');
|
||||
// prevImg.src = '/img/arrow-left.svg'; // <-- adapte le chemin à ton projet
|
||||
// prevImg.alt = 'Précédent';
|
||||
// prevBtn.appendChild(prevImg);
|
||||
|
||||
|
||||
// // const nextBtn = document.createElement('a');
|
||||
// // nextBtn.classList.add('next');
|
||||
// // nextBtn.innerHTML = '❯';
|
||||
// // lightbox.appendChild(nextBtn);
|
||||
// const nextBtn = document.createElement('a');
|
||||
// nextBtn.classList.add('next');
|
||||
// const nextImg = document.createElement('img');
|
||||
// nextImg.src = '/img/arrow-right.svg'; // <-- adapte ici aussi
|
||||
// nextImg.alt = 'Suivant';
|
||||
// nextBtn.appendChild(nextImg);
|
||||
|
||||
|
||||
// // Fonction pour afficher l'image et la légende à l'index donné
|
||||
// function showImage(index) {
|
||||
// if (index < 0) index = images.length - 1;
|
||||
// if (index >= images.length) index = 0;
|
||||
// currentIndex = index;
|
||||
|
||||
// // Mettre à jour l'image
|
||||
// img.src = images[currentIndex].getAttribute('src');
|
||||
|
||||
// // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
|
||||
// const captionText = images[currentIndex]
|
||||
// .closest('.cadre-img-zoom')
|
||||
// .nextElementSibling.querySelector('.image-field-caption p')
|
||||
// .textContent;
|
||||
|
||||
caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
|
||||
lightbox.style.display = 'flex';
|
||||
}
|
||||
// caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
|
||||
// lightbox.style.display = 'flex';
|
||||
// }
|
||||
|
||||
// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
|
||||
images.forEach((image, index) => {
|
||||
image.addEventListener('click', () => {
|
||||
showImage(index);
|
||||
});
|
||||
});
|
||||
// // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
|
||||
// images.forEach((image, index) => {
|
||||
// image.addEventListener('click', () => {
|
||||
// showImage(index);
|
||||
// });
|
||||
// });
|
||||
|
||||
// Fermer le lightbox
|
||||
closeBtn.addEventListener('click', () => {
|
||||
lightbox.style.display = 'none';
|
||||
});
|
||||
// // Fermer le lightbox
|
||||
// closeBtn.addEventListener('click', () => {
|
||||
// lightbox.style.display = 'none';
|
||||
// });
|
||||
|
||||
// Navigation pour images précédente et suivante
|
||||
prevBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
showImage(currentIndex - 1);
|
||||
});
|
||||
// // Navigation pour images précédente et suivante
|
||||
// prevBtn.addEventListener('click', (e) => {
|
||||
// e.stopPropagation();
|
||||
// showImage(currentIndex - 1);
|
||||
// });
|
||||
|
||||
nextBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
showImage(currentIndex + 1);
|
||||
});
|
||||
// nextBtn.addEventListener('click', (e) => {
|
||||
// e.stopPropagation();
|
||||
// showImage(currentIndex + 1);
|
||||
// });
|
||||
|
||||
// Fermer le lightbox en cliquant en dehors de l'image
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
if (e.target === lightbox) {
|
||||
lightbox.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// // Fermer le lightbox en cliquant en dehors de l'image
|
||||
// lightbox.addEventListener('click', (e) => {
|
||||
// if (e.target === lightbox) {
|
||||
// lightbox.style.display = 'none';
|
||||
// }
|
||||
// });
|
||||
|
||||
// Ajout des contrôles clavier (Échap, flèches gauche/droite)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (lightbox.style.display === 'flex') {
|
||||
if (e.key === 'Escape') {
|
||||
lightbox.style.display = 'none';
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
showImage(currentIndex - 1);
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
showImage(currentIndex + 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
// // Ajout des contrôles clavier (Échap, flèches gauche/droite)
|
||||
// document.addEventListener('keydown', (e) => {
|
||||
// if (lightbox.style.display === 'flex') {
|
||||
// if (e.key === 'Escape') {
|
||||
// lightbox.style.display = 'none';
|
||||
// } else if (e.key === 'ArrowLeft') {
|
||||
// showImage(currentIndex - 1);
|
||||
// } else if (e.key === 'ArrowRight') {
|
||||
// showImage(currentIndex + 1);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
//////////////// end lightbox galerie image page site////////////////////////
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 2rem;
|
||||
|
||||
#block-quartiers-de-demain-titredepage{
|
||||
margin-top: 3rem;
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
.layout-sidebar-first{
|
||||
width: 20%;
|
||||
// display: flex;
|
||||
position: fixed;
|
||||
// left: 3%;
|
||||
top: $header-height-big;
|
||||
// z-index: 98;
|
||||
margin: 1rem 2rem;
|
||||
background-color: transparent;
|
||||
|
||||
@media(max-width:891px){
|
||||
margin-left: 5%;
|
||||
margin-top: 9rem;
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
width: 80%;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
|
||||
#block-quartiers-de-demain-formulaireexposeactuspage-1{
|
||||
h2{
|
||||
text-transform: uppercase;
|
||||
font-family: "gilroy-medium";
|
||||
font-size: 0.7rem;
|
||||
&::after{
|
||||
content: ' :';
|
||||
}
|
||||
}
|
||||
label{
|
||||
text-transform: lowercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'gilroy-light';
|
||||
}
|
||||
.form-select #edit-field-type-d-actualite-target-id--2{
|
||||
}
|
||||
|
||||
input #edit-submit-actus--2{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-formulaireexposeressourcespage-1{
|
||||
h2{
|
||||
text-transform: uppercase;
|
||||
font-family: "gilroy-medium";
|
||||
font-size: 0.7rem;
|
||||
&::after{
|
||||
content: ' :';
|
||||
}
|
||||
}
|
||||
label{
|
||||
text-transform: lowercase;
|
||||
font-size: 0.6rem;
|
||||
font-family: 'gilroy-light';
|
||||
}
|
||||
|
||||
.form-select#edit-field-mots-clefs-target-id--2{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
.layout-sidebar-first{
|
||||
width: 20%;
|
||||
// display: flex;
|
||||
position: fixed;
|
||||
// left: 3%;
|
||||
top: $header-height-big;
|
||||
// z-index: 98;
|
||||
margin: 1rem 2rem;
|
||||
background-color: transparent;
|
||||
|
||||
@media(max-width:891px){
|
||||
margin-left: 5%;
|
||||
margin-top: 9rem;
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
width: 80%;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
|
||||
// #block-quartiers-de-demain-formulaireexposeactuspage-1{
|
||||
// h2{
|
||||
// text-transform: uppercase;
|
||||
// font-family: "gilroy-medium";
|
||||
// font-size: 0.7rem;
|
||||
// &::after{
|
||||
// content: ' :';
|
||||
// }
|
||||
// }
|
||||
// label{
|
||||
// text-transform: lowercase;
|
||||
// font-size: 0.7rem;
|
||||
// font-family: 'gilroy-light';
|
||||
// }
|
||||
// }
|
||||
|
||||
#block-quartiers-de-demain-formulaireexposeressourcespage-1,
|
||||
#block-quartiers-de-demain-formulaireexposeactuspage-1{
|
||||
background-color: white;
|
||||
padding: 0.3rem 1rem 1rem 1rem;
|
||||
width: 100%;
|
||||
h2{
|
||||
text-transform: uppercase;
|
||||
font-family: "gilroy-medium";
|
||||
font-size: 0.7rem;
|
||||
&::after{
|
||||
content: ' :';
|
||||
}
|
||||
}
|
||||
.js-form-type-select{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: solid black 0.5px ;
|
||||
padding-top: 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'gilroy-light';
|
||||
label{
|
||||
width: 50%;
|
||||
text-transform: lowercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'gilroy-light';
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
select{
|
||||
background-color: white;
|
||||
border: none;
|
||||
width: 50%;
|
||||
font-size: 0.6rem;
|
||||
font-family: 'gilroy-medium';
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
.js-form-type-textfield{
|
||||
label{
|
||||
|
||||
text-transform: lowercase;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'gilroy-light';
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
.form-actions{
|
||||
padding-top:1rem ;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
input{
|
||||
background-color: white;
|
||||
border: solid black 0.5px;
|
||||
width: 45%;
|
||||
padding: 0.3rem 0.2rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: 'gilroy-light';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
footer{
|
||||
z-index: 100;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.footer{
|
||||
display: flex;
|
||||
|
||||
@ -50,20 +50,43 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: white;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
// .prev, .next {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// color: white;
|
||||
// font-size: 30px;
|
||||
// cursor: pointer;
|
||||
// user-select: none;
|
||||
// }
|
||||
|
||||
.prev {
|
||||
left: 30px;
|
||||
}
|
||||
// .prev {
|
||||
// left: 30px;
|
||||
// }
|
||||
|
||||
.next {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
// .next {
|
||||
// right: 30px;
|
||||
// }
|
||||
|
||||
#lightbox .prev,
|
||||
#lightbox .next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#lightbox .prev img,
|
||||
#lightbox .next img {
|
||||
width: 40px; /* adapte si besoin */
|
||||
height: 40px;
|
||||
pointer-events: none; /* évite que l'image bloque le clic */
|
||||
}
|
||||
|
||||
#lightbox .prev {
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#lightbox .next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
@ -237,9 +237,16 @@
|
||||
.file--application-pdf{
|
||||
width: fit-content;
|
||||
padding-left: 0.5rem;
|
||||
// padding-bottom: 0.2rem;
|
||||
// padding-top: 0.2rem;
|
||||
background: black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 40%;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem !important;
|
||||
color: white;
|
||||
background: black;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.6rem;
|
||||
@media (max-width:810px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
@import "partials/lightbox";
|
||||
|
||||
|
||||
|
||||
// @import "partials/slick_custom";
|
||||
|
||||
|
||||
|
||||
@ -77,30 +77,8 @@
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span class="close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-img">
|
||||
<a class="prev" id="prev">
|
||||
<svg />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g
|
||||
id="g1"
|
||||
transform="translate(-1178.8005,-9024.7618)">
|
||||
<g
|
||||
id="g696">
|
||||
<path
|
||||
id="path392"
|
||||
d="m 0,0 c -18.507,0 -33.509,15.003 -33.509,33.51 0,18.506 15.002,33.509 33.509,33.509 18.507,0 33.509,-15.003 33.509,-33.509 C 33.509,15.003 18.507,0 0,0 Z"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1224.0459,9114.6875)"
|
||||
clip-path="url(#clipPath393)" />
|
||||
<path
|
||||
id="path394"
|
||||
d="M 0,0 -9.997,-8.944 0,-17.887"
|
||||
style="fill:none;stroke:#000000;stroke-width:0.85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,1228.3967,9058.0833)" />
|
||||
</g>
|
||||
</g>
|
||||
</svg></a>
|
||||
<a class="next" id="next">❯</a>
|
||||
<a class="prev" id="prev"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/prev.svg" alt="Précédent"></a>
|
||||
<a class="next" id="next"><img src="/themes/custom/quartiers_de_demain/dist/assets/img/next.svg" alt="Suivant"></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user