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
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

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

@ -3938,6 +3938,21 @@ main {
#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 h3 .type-Kit-de-communication {
background-color: rgb(7, 50, 194);
}
#ressources .layout-content .content_container .views-element-container h3 .type-Kit-de-communication .field_name h2 {
margin: 0;
}
#ressources .layout-content .content_container .views-element-container h3 .type-Kit-de-communication .field_name h2 a {
color: white;
}
#ressources .layout-content .content_container .views-element-container h3:has(div.type-Kit-de-communication) {
margin-bottom: 0;
}
#ressources .layout-content .content_container .views-element-container h3:has(div.type-Kit-de-communication) .field_name {
padding-top: 1rem;
}
#ressources .layout-content .content_container .views-element-container button.voir-plus {
background-color: transparent;
color: rgb(7, 50, 194);
@ -3952,7 +3967,6 @@ main {
flex-wrap: wrap;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row {
width: 30%;
font-size: 0.5rem;
margin-bottom: 1rem;
}
@ -4034,13 +4048,62 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-podcast .content-ressource .field_field_liens {
grid-column: 2;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo .content-ressource {
margin: 1rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo .field_body {
opacity: 1 !important;
transform: none !important;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo .img {
width: 100%;
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-vidéo a img {
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 9px;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(7, 50, 194);
color: white;
padding: 1rem 3rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_title {
display: none;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_sous_titre {
text-align: center;
font-size: 0.9rem;
font-family: "gilroy-light";
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_body {
text-align: center;
font-size: 0.7rem;
font-family: "gilroy-light";
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens {
width: fit-content;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .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;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens a svg {
display: none;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row .type-kit-de-communication div.content-ressource .field_field_liens a::after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-podcast) {
width: 50%;
@ -4051,6 +4114,9 @@ main {
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-vidéo) {
width: 50%;
}
#ressources .layout-content .content_container .views-element-container .view-rows-wrapper .views-row:has(.type-Kit-de-communication) {
width: 100%;
}
#actualites {
background-color: #f6f7f3;

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%;
}
}
// }

2
web/themes/custom/quartiers_de_demain/templates/taxonomy-term.html.twig
View File

@ -27,7 +27,7 @@
#}
{%
set ressource_class = 'type-' ~ term.name()
set ressource_class = 'type-' ~ term.name()|replace({' ': '-'})
%}