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

js et css pages ressources

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-13 11:52:43 +01:00
parent c5f23ffca8
commit 3212219618
7 changed files with 326 additions and 209 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

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

@ -3846,57 +3846,65 @@ main {
font-family: "gilroy-medium"; font-family: "gilroy-medium";
} }
#ressources .layout-content .content_container .views-element-container { #ressources .layout-content .content_container .views-element-container {
margin-left: 15%; margin-left: 20%;
width: 70%; width: 65%;
} }
#ressources .layout-content .content_container .views-element-container .view { #ressources .layout-content .content_container .views-element-container h3 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#ressources .layout-content .content_container .views-element-container .view h3 {
text-align: center; text-align: center;
flex: 0 0 100%;
} }
#ressources .layout-content .content_container .views-element-container .view h3::before { #ressources .layout-content .content_container .views-element-container h3::before {
content: ""; content: "";
display: block; display: block;
border-bottom: solid 2px rgb(7, 50, 194); border-bottom: solid 2px rgb(7, 50, 194);
margin: auto; margin: auto;
} }
#ressources .layout-content .content_container .views-element-container .view h3 div .field_name h2 { #ressources .layout-content .content_container .views-element-container h3 div .field_name h2 {
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
#ressources .layout-content .content_container .views-element-container .view h3 div .field_name h2 a { #ressources .layout-content .content_container .views-element-container h3 div .field_name h2 a {
font-family: "gilroy-light"; font-family: "gilroy-light";
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 1.2rem; font-size: 1.2rem;
} }
#ressources .layout-content .content_container .views-element-container .view h3 div .field_description { #ressources .layout-content .content_container .views-element-container h3 div .field_description {
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
font-family: "gilroy-light"; font-family: "gilroy-light";
} }
#ressources .layout-content .content_container .views-element-container .view h3 div .field_description p { #ressources .layout-content .content_container .views-element-container h3 div .field_description p {
margin-top: 0.6rem; margin-top: 0.6rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row { #ressources .layout-content .content_container .views-element-container button.voir-plus {
background-color: transparent;
color: rgb(7, 50, 194);
border: solid rgb(7, 50, 194) 0.5px;
padding: 0.3rem;
display: flex;
margin: auto;
}
#ressources .layout-content .content_container .views-element-container .view-rows-ressources {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row {
width: 30%; width: 30%;
font-size: 0.5rem; font-size: 0.5rem;
margin-bottom: 1rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row h2 { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row h2 {
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 0.6rem; font-size: 0.6rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row p { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row p {
font-size: 0.5rem; font-size: 0.5rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div {
display: flex; display: flex;
flex-direction: row !important; flex-direction: row !important;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div div { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div div {
border: solid 1px rgb(7, 50, 194); border: solid 1px rgb(7, 50, 194);
margin-right: 0.2rem; margin-right: 0.2rem;
padding: 1.3%; padding: 1.3%;
@ -3905,16 +3913,16 @@ main {
font-size: 0.4rem; font-size: 0.4rem;
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_mots_clefs div div a { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_mots_clefs div div a {
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_site div a { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_site div a {
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
color: rgb(247, 0, 43); color: rgb(247, 0, 43);
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .field_field_site div a:before { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .field_field_site div a:before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
@ -3926,42 +3934,48 @@ main {
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .type-documentation .field_body, #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-documentation .field_body,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-documentation .field_field_images { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-documentation .field_field_images {
display: none; display: none;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource {
display: flex; display: grid;
align-items: flex-start; grid-template-columns: 1fr 1.2fr;
flex-wrap: wrap; grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_images { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_images {
width: 150px; grid-column: 1;
height: auto; grid-row: 1/span 5;
flex-shrink: 0; padding: 0 1rem 1rem 1rem;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_images img { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_images img {
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 9px; border-radius: 9px;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_title, #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_title, #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource h2 {
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_sous_titre, margin-top: 0;
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_author,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_date_ressource,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_body,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_mots_clefs,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_site,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_documents,
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div .field_field_liens {
flex: 1 1 50%;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row:has(.type-podcast) { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_title,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_sous_titre,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_author,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_date_ressource,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_body,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_mots_clefs,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_site,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_documents,
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_liens {
grid-column: 2;
}
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-podcast) {
width: 50%; width: 50%;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row:has(.type-documentation) { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-documentation) {
width: 25%; width: 25%;
} }
#ressources .layout-content .content_container .views-element-container .view .views-row:has(.type-vidéo) { #ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row:has(.type-vidéo) {
width: 50%; width: 50%;
} }

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

@ -453,100 +453,100 @@ $(document).ready(function () {
//////////////// start lightbox galerie image page site//////////////////////// //////////////// start lightbox galerie image page site////////////////////////
// Sélection des images et de leurs légendes dans la galerie // Sélection des images et de leurs légendes dans la galerie
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger'); let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let currentIndex; let currentIndex;
// Création de la lightbox et de ses éléments // Création de la lightbox et de ses éléments
const lightbox = document.createElement('div'); const lightbox = document.createElement('div');
lightbox.id = 'lightbox'; lightbox.id = 'lightbox';
lightbox.classList.add('lightbox'); lightbox.classList.add('lightbox');
document.body.appendChild(lightbox); document.body.appendChild(lightbox);
const img = document.createElement('img'); const img = document.createElement('img');
lightbox.appendChild(img); lightbox.appendChild(img);
// Élément pour afficher la légende // Élément pour afficher la légende
const caption = document.createElement('p'); const caption = document.createElement('p');
caption.classList.add('caption'); caption.classList.add('caption');
lightbox.appendChild(caption); lightbox.appendChild(caption);
const closeBtn = document.createElement('span'); const closeBtn = document.createElement('span');
closeBtn.classList.add('close'); closeBtn.classList.add('close');
closeBtn.innerHTML = '×'; closeBtn.innerHTML = '×';
lightbox.appendChild(closeBtn); lightbox.appendChild(closeBtn);
const prevBtn = document.createElement('a'); const prevBtn = document.createElement('a');
prevBtn.classList.add('prev'); prevBtn.classList.add('prev');
prevBtn.innerHTML = '❮'; prevBtn.innerHTML = '❮';
lightbox.appendChild(prevBtn); lightbox.appendChild(prevBtn);
const nextBtn = document.createElement('a'); const nextBtn = document.createElement('a');
nextBtn.classList.add('next'); nextBtn.classList.add('next');
nextBtn.innerHTML = '❯'; nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn); lightbox.appendChild(nextBtn);
// Fonction pour afficher l'image et la légende à l'index donné // Fonction pour afficher l'image et la légende à l'index donné
function showImage(index) { function showImage(index) {
if (index < 0) index = images.length - 1; if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0; if (index >= images.length) index = 0;
currentIndex = index; currentIndex = index;
// Mettre à jour l'image // Mettre à jour l'image
img.src = images[currentIndex].getAttribute('src'); img.src = images[currentIndex].getAttribute('src');
// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image) // Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
const captionText = images[currentIndex] const captionText = images[currentIndex]
.closest('.cadre-img-zoom') .closest('.cadre-img-zoom')
.nextElementSibling.querySelector('.image-field-caption p') .nextElementSibling.querySelector('.image-field-caption p')
.textContent; .textContent;
caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
lightbox.style.display = 'flex'; lightbox.style.display = 'flex';
} }
// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende // Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
images.forEach((image, index) => { images.forEach((image, index) => {
image.addEventListener('click', () => { image.addEventListener('click', () => {
showImage(index); showImage(index);
}); });
}); });
// Fermer le lightbox // Fermer le lightbox
closeBtn.addEventListener('click', () => { 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'; lightbox.style.display = 'none';
} else if (e.key === 'ArrowLeft') { });
// Navigation pour images précédente et suivante
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1); showImage(currentIndex - 1);
} else if (e.key === 'ArrowRight') { });
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1); 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//////////////////////// //////////////// end lightbox galerie image page site////////////////////////
@ -578,12 +578,9 @@ if (container) {
} }
} }
}); });
//////////////////// end wrapper views-row lessites ///////////////////////// //////////////////// end wrapper views-row lessites /////////////////////////
//////////////////// start div infos site //////////////////////// //////////////////// start div infos site ////////////////////////
// Vérifie si la page a la classe 'node-type-site' dans le <body> // Vérifie si la page a la classe 'node-type-site' dans le <body>
@ -685,6 +682,72 @@ window.addEventListener("resize", moveLanguageSwitcher);
}); });
/////////////// start class à view-rows-ressources ////////
$(document).ready(function () {
$(".view-rows-ressources").each(function () {
let h3Container = $(this).prev("h3").find("div[class^='type-']");
let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
if (classToAdd) {
$(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-ressources
}
});
});
////////////////// end class à view-rows-ressources ////////////////
/////////////////// start voir plus... ressources ////////////////////
$(document).ready(function () {
$(".view-rows-ressources").each(function () {
let container = $(this); // Cible uniquement cette section
let items = container.find(".views-row"); // Les éléments à afficher progressivement
let visibleCount = 4; // Nombre d'éléments visibles au départ
// Récupérer la classe `type-XXX`
let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
if (typeClass === "type-podcast" || typeClass === "type-video") {
visibleCount = 2; // Pour Podcast et Vidéo
}
// Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
let button = $("<button>")
.addClass("voir-plus")
.text("Voir plus de " + typeName)
.insertAfter(container);
// Cacher tous les éléments sauf les 4 premiers
items.hide().slice(0, visibleCount).show();
// Action sur le bouton
button.on("click", function () {
let hiddenItems = container.find(".views-row:hidden").slice(0, 4); // Prochains éléments à afficher
if ($(this).text().includes("Voir plus")) {
hiddenItems.slideDown(); // Afficher avec un effet de glissement
if (container.find(".views-row:hidden").length === 0) {
$(this).text("Voir moins de " + typeName); // Changer le texte du bouton si tout est affiché
}
} else {
container.find(".views-row").slice(visibleCount).slideUp(); // Replier les éléments
$(this).text("Voir plus de " + typeName); // Revenir à l'état initial
}
});
});
});
/////////////////// end voir plus... ressources ////////////////////
})(jQuery, window); })(jQuery, window);

113
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/ressources.scss
View File

@ -30,53 +30,57 @@
} }
.views-element-container{ .views-element-container{
margin-left: 15%; margin-left: 20%;
width: 70%; width: 65%;
// .group-content{ h3{
// display: flex; &::before{
// flex-direction: row; content:"";
// flex-wrap: wrap; display: block;
.view{ border-bottom: solid 2px $blue_QDD;
// width: 80% ;
margin: auto;
}
text-align: center;
div{
.field_name{
h2{
margin-bottom: 0.6rem;
a{
font-family: "gilroy-light";
color: $blue_QDD;
font-size: 1.2rem;
}
}
}
.field_description{
margin-left: 10%;
margin-right: 10%;
font-family: "gilroy-light";
p{
margin-top: 0.6rem;
}
}
}
}
button.voir-plus{
background-color: transparent;
color: $blue_QDD;
border: solid $blue_QDD 0.5px;
padding: 0.3rem;
display: flex;
margin: auto;
}
.view-rows-ressources{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
h3{
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
// width: 80% ;
margin: auto;
}
text-align: center;
// width: 100%;
flex: 0 0 100%;
div{
.field_name{
h2{
margin-bottom: 0.6rem;
a{
font-family: "gilroy-light";
color: $blue_QDD;
font-size: 1.2rem;
}
}
}
.field_description{
margin-left: 10%;
margin-right: 10%;
font-family: "gilroy-light";
p{
margin-top: 0.6rem;
}
}
}
}
.views-row{ .views-row{
width: 30%; width: 30%;
font-size: 0.5rem; font-size: 0.5rem;
margin-bottom: 1rem;
h2{ h2{
font-family: "gilroy-semibold"; font-family: "gilroy-semibold";
color: $blue_QDD; color: $blue_QDD;
@ -140,21 +144,26 @@
.type-podcast{ .type-podcast{
div{ .content-ressource{
display: flex; display: grid;
align-items: flex-start; grid-template-columns: 1fr 1.2fr;
flex-wrap: wrap; grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
.field_field_images{ .field_field_images{
width: 150px; grid-column: 1;
height: auto; grid-row: 1 /span 5;
flex-shrink: 0; padding: 0 1rem 1rem 1rem;
img{ img{
width: 100%; width: 100%;
height: auto; height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9px; border-radius: 9px;
} }
} }
.field_title, h2{
margin-top: 0;
}
.field_title, .field_title,
.field_field_sous_titre, .field_field_sous_titre,
.field_field_author, .field_field_author,
@ -164,7 +173,8 @@
.field_field_site, .field_field_site,
.field_field_documents, .field_field_documents,
.field_field_liens{ .field_field_liens{
flex: 1 1 50%; grid-column: 2;
} }
} }
@ -183,7 +193,8 @@
} }
} }
// } // }

4
web/themes/custom/quartiers_de_demain/templates/node--actualite--teaser.html.twig
View File

@ -88,8 +88,8 @@
</footer> </footer>
{% endif %} {% endif %}
{# <div{{ content_attributes }}> #} <div{{ content_attributes }}>
{{ content }} {{ content }}
{# </div> #} </div>
</article> </article>

27
web/themes/custom/quartiers_de_demain/templates/node--ressource--teaser.html.twig
View File

@ -94,35 +94,10 @@
</footer> </footer>
{% endif %} {% endif %}
<div{{ content_attributes }}> <div class="content-ressource"{{ content_attributes }}>
{{ content }} {{ content }}
</div> </div>
</article> </article>
<article{{ attributes.addClass(ressource_class) }}>
{{ title_prefix }}
{% if label and not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<footer>
{{ author_picture }}
<div{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
</footer>
{% endif %}
<div{{ content_attributes }}>
{{ content }}
</div>
</article>

54
web/themes/custom/quartiers_de_demain/templates/views-view-unformatted.html.twig Normal file
View File

@ -0,0 +1,54 @@
{#
/**
* @file
* Default theme implementation to display a view of unformatted rows.
*
* Available variables:
* - title: The title of this group of rows. May be empty.
* - rows: A list of the view's row items.
* - attributes: The row's HTML attributes.
* - content: The row's content.
* - view: The view object.
* - default_row_class: A flag indicating whether default classes should be
* used on rows.
*
* @see template_preprocess_views_view_unformatted()
*
* @ingroup themeable
*/
#}
{#
{% if title %}
{%
set view_ressource_class = [
'view-rows-ressources',
title ? 'type-' ~ title.field_name.term.name(),
]
%}
{% endif %} #}
{%
set view_ressource_class = [
'view-rows-ressources',
]
%}
{% if title %}
<h3>{{ title }} </h3>
{% endif %}
<div {{ attributes.addClass(view_ressource_class) }}>
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'views-row',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
{{- row.content -}}
</div>
{% endfor %}
</div>