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

actualites js et css

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-25 16:14:02 +01:00
parent 886e31588c
commit b8e851e6f5
4 changed files with 104 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -3345,29 +3345,26 @@ body {
#page-node .content_container .node-type-actualite div .field_body p {
font-size: 0.8rem;
}
#page-node .content_container .node-type-actualite div .field_field_liens {
order: 3;
width: fit-content;
#page-node .content_container .node-type-actualite div .field_field_site {
margin-left: 0.5rem;
}
#page-node .content_container .node-type-actualite div .field_field_liens a {
display: flex;
flex-direction: row;
padding-left: 0.5rem;
#page-node .content_container .node-type-actualite div .field_field_site a {
color: red;
font-size: 0.6rem;
font-weight: 600;
display: inline-flex;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.6rem;
padding-left: 0.1rem;
}
#page-node .content_container .node-type-actualite div .field_field_liens a svg {
display: none;
}
#page-node .content_container .node-type-actualite div .field_field_liens a::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
#page-node .content_container .node-type-actualite div .field_field_site a::before {
content: "";
display: inline-block;
width: 10px; /* Ajuste la largeur */
height: 17px; /* Ajuste la hauteur */
background-image: url("../img/map_pointer.svg");
background-size: contain;
background-repeat: no-repeat;
padding-right: 0.5rem;
}
#page-node .content_container .node-type-actualite div .field_field_images {
order: 5;
@ -3412,11 +3409,38 @@ body {
flex-direction: row;
margin-left: 1rem;
padding-right: 1rem;
justify-content: space-between;
}
#page-node .content_container .node-type-actualite .infos-actu .field_field_date::before {
content: url("../img/date-actu.svg");
padding-right: 0.4rem;
}
#page-node .content_container .node-type-actualite .infos-actu .field_field_liens {
order: 3;
margin-left: 1rem;
width: fit-content;
display: block !important;
}
#page-node .content_container .node-type-actualite .infos-actu .field_field_liens a {
display: flex;
flex-direction: row;
padding-left: 0.5rem;
display: inline-flex;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.6rem;
}
#page-node .content_container .node-type-actualite .infos-actu .field_field_liens a svg {
display: none;
}
#page-node .content_container .node-type-actualite .infos-actu .field_field_liens a::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#page-node .content_container .toggle-actualite {
visibility: hidden;
}

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

@ -567,115 +567,6 @@ document.addEventListener('keydown', (e) => {
}
});
// // 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 = '&#10095;';
// // 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';
// }
// // É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';
// });
// // 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);
// });
// // 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);
// }
// }
// });
//////////////// end lightbox galerie image page site////////////////////////
@ -762,13 +653,16 @@ $(document).ready(function () {
let article = $(this);
let dateField = article.find(".field_field_date");
let typeField = article.find(".field_field_type_d_actualite");
let siteField = article.find(".field_field_site");
// Vérifier si les deux éléments existent
if (dateField.length > 0 || typeField.length > 0) {
// Vérifier si l'encapsulation n'existe pas déjà
if (article.find(".infos-actu").length === 0) {
// Créer un conteneur et y insérer les éléments
let infosActu = $("<div>").addClass("infos-actu").append(dateField, typeField);
let infosActu = $("<div>").addClass("infos-actu").append(dateField, typeField, siteField);
// Ajouter ce conteneur après les champs existants
article.append(infosActu);

84
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss
View File

@ -49,39 +49,32 @@
font-size: 0.8rem;
}
}
.field_field_liens{
order: 3;
// padding-bottom: 2rem;
// padding-top: 2rem;
width: fit-content;
a{
display: flex;
flex-direction: row;
padding-left: 0.5rem;
.field_field_site{
// margin-top: 0.2rem;
margin-left: 0.5rem;
a{
color: red;
font-size: 0.6rem;
font-weight: 600;
display: inline-flex;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.6rem;
svg{
display: none;
// margin-left: 1rem;
padding-left: 0.1rem;
&::before{
content: "";
display: inline-block;
width: 10px; /* Ajuste la largeur */
height: 17px; /* Ajuste la hauteur */
background-image: url("../img/map_pointer.svg");
background-size: contain;
background-repeat: no-repeat;
// margin-right: 0.4rem;
padding-right: 0.5rem;
}
&::after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
}
// a:not(.ext){
// display: none;
// }
}
.field_field_images{
order: 5;
@ -109,6 +102,8 @@
border-bottom: solid red 1px;
padding: 1rem 0rem;
margin-bottom: 1rem;
// justify-content: space-around;
.field_field_type_d_actualite a{
text-transform: uppercase;
color: red;
@ -128,11 +123,44 @@
flex-direction: row;
margin-left: 1rem;
padding-right: 1rem;
justify-content: space-between;
&::before{
content: url('../img/date-actu.svg');
padding-right: 0.4rem;
}
}
.field_field_liens{
order: 3;
// padding-bottom: 2rem;
// padding-top: 2rem;
margin-left: 1rem;
width: fit-content;
display: block !important;
a{
display: flex;
flex-direction: row;
padding-left: 0.5rem;
display: inline-flex;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.6rem;
svg{
display: none;
}
&::after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
}
}
}