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

css kit communication /ressources

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-03-17 15:13:28 +01:00
parent f000a5832b
commit 275cd5bbf6
5 changed files with 164 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -753,32 +753,36 @@ $(document).ready(function () {
/////////////////// start voir plus... ressources ////////////////////
$(document).ready(function () {
// Vérifier si on est sur la page avec l'ID #ressources
if ($("#ressources").length > 0) {
// Vérifier si on est sur la page avec l'ID #ressources
if ($("#ressources").length > 0) {
$(".view-rows-wrapper").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
let visibleCount = 4; // Nombre d'éléments visibles au départ (par défaut)
// 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") {
visibleCount = 2; // Pour Podcast et Vidéo
}
if (typeClass === "type-Vidéo") {
visibleCount = 2; // Pour Podcast et Vidéo
// Ajuster le nombre d'éléments visibles en fonction du type
if (typeClass === "type-podcast" || typeClass.toLowerCase() === "type-vidéo") {
visibleCount = 2; // Pour Podcast et Vidéo
} else if (typeClass === "type-kit-de-communication") {
visibleCount = 1; // Pour Kit de Communication
}
// Ajouter un bouton dynamiquement après chaque `.view-rows-wrapper`
// Si le nombre total d'éléments est inférieur ou égal à la limite, ne pas ajouter le bouton
if (items.length <= visibleCount) {
return; // Sortir de la boucle
}
// Ajouter le bouton dynamiquement après chaque `.view-rows-wrapper`
let button = $("<button>")
.addClass("voir-plus")
.text("Voir plus de " + typeName)
.insertAfter(container);
// Cacher tous les éléments sauf les 4 premiers
// Cacher tous les éléments sauf ceux définis par `visibleCount`
items.hide().slice(0, visibleCount).show();
// Action sur le bouton
@@ -797,9 +801,10 @@ $(document).ready(function () {
}
});
});
}
}
});
/////////////////// end voir plus... ressources ////////////////////

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

@@ -61,8 +61,24 @@
}
}
}
.type-Kit-de-communication{
background-color: $blue_QDD;
.field_name h2 {
margin: 0;
a{
color: white;
}
}
}
}
h3:has(div.type-Kit-de-communication){
margin-bottom: 0;
.field_name{
padding-top: 1rem;
}
}
button.voir-plus{
background-color: transparent;
color: $blue_QDD;
@@ -78,7 +94,7 @@
.views-row{
width: 30%;
// width: 30%;
font-size: 0.5rem;
margin-bottom: 1rem;
h2{
@@ -181,16 +197,69 @@
}
.type-vidéo{
.content-ressource{
margin: 1rem;
}
.field_body{
opacity: 1 !important;
transform: none !important;
}
.img{
width: 100%;
a img{
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 9px;
}
}
.type-kit-de-communication{
div.content-ressource{
display: flex;
flex-direction: column;
align-items: center;
background-color: $blue_QDD;
color: white;
padding: 1rem 3rem;
.field_title{
display: none;
}
.field_field_sous_titre{
text-align: center;
font-size: 0.9rem;
font-family: 'gilroy-light';
}
.field_body{
text-align: center;
font-size: 0.7rem;
font-family: 'gilroy-light';
}
.field_field_liens{
width: fit-content;
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;
}
}
}
}
}
}
.views-row:has(.type-podcast){
width: 50%;
@@ -201,10 +270,13 @@
.views-row:has(.type-vidéo){
width: 50%;
}
.views-row:has(.type-Kit-de-communication){
width: 100%;
}
}
// }