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

debut css /actualites

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-03-14 11:13:32 +01:00
parent 9a73e1cbaa
commit f5b4092e98
7 changed files with 328 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -372,36 +372,24 @@ document.addEventListener('DOMContentLoaded', function() {
//////////// start slideshow home //////////////////////////
$(document).ready(function(){
let actuview = $('.content-actus .view .view-rows-wrapper')
if (actuview) {
actuview.slick({
slidesToShow: 3,
// slidesToScroll: 1,
dots: false,
arrows: true,
// centerMode: true,
adaptiveHeight: false,
autoplay: false,
// autoplaySpeed: 1500,
// infinite: true,
// centerPadding: '100px',
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
// slidesToScroll: 1,
adaptiveHeight: false,
arrows: true,
draggable: true,
// centerMode: true,
// centerPadding: '100px',
autoplay: false,
// autoplaySpeed: 2000,
}
}]
});
@@ -414,9 +402,6 @@ $(document).ready(function(){
});
$(document).ready(function () {
let diapohome = $('.config_pages--type--diaporama-home .diaporama');
@@ -448,9 +433,41 @@ $(document).ready(function () {
}
});
//////////// end slideshow home //////////////////////////
//////////// start slideshow /actualites //////////////////////////
$(document).ready(function(){
let actuview2 = $('.content-wrapper-actu .field_field_images .actu-diaporama')
if (actuview2) {
actuview2.slick({
slidesToShow: 1,
dots: false,
arrows: true,
adaptiveHeight: true,
autoplay: false,
responsive: [
{
breakpoint: 810,
settings: {
slidesToShow: 1,
adaptiveHeight: true,
arrows: true,
draggable: true,
autoplay: false,
}
}]
});
console.log('salut slick actualites');
}
// $('.slick-carousel').slick({
// lazyLoad: 'progressive', // Option 'ondemand' ou 'progressive'
// });
});
//////////// end slideshow /actualites //////////////////////////
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images et de leurs légendes dans la galerie
@@ -779,6 +796,44 @@ $(document).ready(function () {
/////////////////// start voir plus... actualite dans /actualites ////////////////////
$(document).ready(function () {
if ($("#actualites").length > 0) {
$(".node-type-actualite").each(function () {
let article = $(this);
// Sélection des éléments à afficher/masquer
let body = article.find(".field_body");
let links = article.find(".field_field_liens");
// Masquer les éléments au chargement
body.hide();
links.hide();
// Créer le bouton flèche
let toggleButton = $("<button>")
.addClass("toggle-actualite")
.html("&#9660;") // Flèche vers le bas
.insertAfter(article); // Insérer après l'article
// Action au clic sur la flèche
toggleButton.on("click", function () {
if (body.is(":visible")) {
body.slideUp();
links.slideUp();
$(this).html("&#9660;"); // Changer en flèche vers le bas
} else {
body.slideDown();
links.slideDown();
$(this).html("&#9650;"); // Changer en flèche vers le haut
}
});
});
}
});
/////////////////// end voir plus... actualite dans /actualites ////////////////////
})(jQuery, window);

98
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualites.scss
View File

@@ -13,7 +13,7 @@
#block-quartiers-de-demain-titredepage{
margin-top: 3rem;
margin-left: 15%;
margin-bottom: 1rem;
margin-bottom: 4rem;
width: 70%;
@media(max-width: 810px){
margin-top: 14rem;
@@ -42,29 +42,70 @@
.views-row{
width: 100%;
font-size: 0.5rem;
margin-bottom: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
display: flex;
flex-direction: row;
align-items: center;
border-bottom: solid black 0.5px;
.node-type-actualite{
width: 100%;
padding-bottom: 7rem;
div{
width: 85%;
// padding-bottom: 2rem;
.content-wrapper-actu{
display: grid;
// grid-template-columns: 1fr 1.2fr;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(5 1fr);
.field_field_images{
grid-column: 1;
grid-column: 1;
grid-row: 1 /span 5;
img{
width: 100%;
height: auto;
}
blockquote.image-field-caption{
margin-left: 0;
margin-top: 0;
p{
margin-top: 0;
font-size: 0.4rem;
width: 250px;
.actu-diaporama{
// height: 150px;
// width: 100%;
display: flex;
flex-direction: row;
align-items: center !important;
margin:auto;
.slick-list{
margin: auto;
padding-top: 0 !important;
.cadre-img-zoom{
width: 250px;
height: auto;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
blockquote.image-field-caption{
margin-left: 0;
margin-top: 0;
p{
margin-top: 0;
font-size: 0.4rem;
}
}
}
}
button{
margin: auto;
transform: none;
top: 20%;
height: 0;
width: 0;
}
button.slick-next{
right: 0% ;
padding: 0;
}
button.slick-prev{
left: 0%;
padding: 0;
}
}
}
.field_field_type_d_actualite,
@@ -121,13 +162,17 @@
}
.field_title{
order: 5;
a{
color: $blue_QDD;
font-size: 1.2rem;
}
}
.field_body {
order: 6;
padding-bottom: 2rem;
opacity: 1 !important;
transform:none !important;
p{
font-size: 0.8rem;
}
@@ -167,7 +212,22 @@
}
}
.toggle-actualite {
display: block;
width: 40px;
height: 40px;
margin: 10px auto;
border: none;
background-color: transparent;
font-size: 24px;
cursor: pointer;
transition: transform 0.3s ease;
}
.toggle-actualite:hover {
transform: scale(1.2);
}
}

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

@@ -30,7 +30,7 @@
}
.views-element-container{
margin-left: 20%;
margin-left: 15%;
width: 65%;
h3{
&::before{