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";
}
#ressources .layout-content .content_container .views-element-container {
margin-left: 15%;
width: 70%;
margin-left: 20%;
width: 65%;
}
#ressources .layout-content .content_container .views-element-container .view {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#ressources .layout-content .content_container .views-element-container .view h3 {
#ressources .layout-content .content_container .views-element-container h3 {
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: "";
display: block;
border-bottom: solid 2px rgb(7, 50, 194);
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;
}
#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";
color: rgb(7, 50, 194);
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-right: 10%;
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;
}
#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%;
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";
color: rgb(7, 50, 194);
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;
}
#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;
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);
margin-right: 0.2rem;
padding: 1.3%;
@ -3905,16 +3913,16 @@ main {
font-size: 0.4rem;
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);
}
#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;
padding-left: 20px;
color: rgb(247, 0, 43);
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: "";
position: absolute;
left: 0;
@ -3926,42 +3934,48 @@ main {
background-size: contain;
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 .views-row .type-documentation .field_field_images {
#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-rows-ressources .views-row .type-documentation .field_field_images {
display: none;
}
#ressources .layout-content .content_container .views-element-container .view .views-row .type-podcast div {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource {
display: grid;
grid-template-columns: 1fr 1.2fr;
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 {
width: 150px;
height: auto;
flex-shrink: 0;
#ressources .layout-content .content_container .views-element-container .view-rows-ressources .views-row .type-podcast .content-ressource .field_field_images {
grid-column: 1;
grid-row: 1/span 5;
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%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
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 .views-row .type-podcast div .field_field_sous_titre,
#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-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 {
margin-top: 0;
}
#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%;
}
#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%;
}
#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%;
}

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////////////////////////
// Sélection des images et de leurs légendes dans la galerie
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 et de ses éléments
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);
const img = document.createElement('img');
lightbox.appendChild(img);
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);
// É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 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');
prevBtn.innerHTML = '❮';
lightbox.appendChild(prevBtn);
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn);
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn);
// 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;
// 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');
// 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';
}
// 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);
});
});
// É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') {
// Fermer le lightbox
closeBtn.addEventListener('click', () => {
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);
} else if (e.key === 'ArrowRight') {
});
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////////////////////////
@ -578,12 +578,9 @@ if (container) {
}
}
});
//////////////////// end wrapper views-row lessites /////////////////////////
//////////////////// start div infos site ////////////////////////
// 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);

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

@ -30,53 +30,57 @@
}
.views-element-container{
margin-left: 15%;
width: 70%;
// .group-content{
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
.view{
margin-left: 20%;
width: 65%;
h3{
&::before{
content:"";
display: block;
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;
flex-direction: row;
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{
width: 30%;
font-size: 0.5rem;
margin-bottom: 1rem;
h2{
font-family: "gilroy-semibold";
color: $blue_QDD;
@ -140,21 +144,26 @@
.type-podcast{
div{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
.content-ressource{
display: grid;
grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
.field_field_images{
width: 150px;
height: auto;
flex-shrink: 0;
grid-column: 1;
grid-row: 1 /span 5;
padding: 0 1rem 1rem 1rem;
img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9px;
}
}
.field_title, h2{
margin-top: 0;
}
.field_title,
.field_field_sous_titre,
.field_field_author,
@ -164,7 +173,8 @@
.field_field_site,
.field_field_documents,
.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>
{% endif %}
{# <div{{ content_attributes }}> #}
<div{{ content_attributes }}>
{{ content }}
{# </div> #}
</div>
</article>

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

@ -94,35 +94,10 @@
</footer>
{% endif %}
<div{{ content_attributes }}>
<div class="content-ressource"{{ content_attributes }}>
{{ content }}
</div>
</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>