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

mobile carroussel actus

This commit is contained in:
ouidade 2024-07-08 12:08:14 +02:00
parent 39bef4b27a
commit 92ce397036
8 changed files with 228 additions and 76 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

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

@ -232,7 +232,7 @@ header {
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
/* Classes for scroll effect */
}
@media (max-width: 700px) {
@media (max-width: 500px) {
header {
height: 110px;
}
@ -345,6 +345,11 @@ header .header_nav_container {
transition: transform 0.3s ease-in-out;
z-index: -1;
}
@media (max-width: 500px) {
header .header_nav_container {
flex: 0 0 40%;
}
}
header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none;
}
@ -363,7 +368,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px;
}
}
@media (max-width: 500px) {
@media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem;
}
@ -373,11 +378,17 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
color: white;
font-size: 0.5rem;
}
@media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
font-size: 0.9rem;
}
}
@media (max-width: 500px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.6rem;
}
}
header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after {
@ -681,6 +692,7 @@ footer {
.slick-next {
position: absolute;
display: block;
z-index: 99;
height: 20px;
width: 20px;
line-height: 0px;
@ -921,18 +933,35 @@ footer {
background-size: contain;
background-position-x: -20%;
}
@media (max-width: 1090px) {
#home .config_pages--type--deroulement {
cursor: grab;
}
}
#home .timeline {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-bottom: 4rem;
}
@media (max-width: 1090px) {
#home .timeline {
padding-top: 18rem;
overflow: scroll;
}
}
#home .timeline .__timeline-arrows {
width: fit-content;
margin: auto;
position: relative;
top: -115px;
}
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows {
top: -211px;
display: none;
}
}
#home .timeline .__timeline-arrows button {
background-color: transparent;
border: none;
@ -966,10 +995,10 @@ footer {
content: "";
position: absolute;
top: 50%;
left: 101%;
left: 100%;
bottom: 0;
width: 12px;
height: 12px;
width: 17px;
height: 17px;
transform: translateY(-50%);
border-radius: 50%;
background: black;
@ -988,6 +1017,12 @@ footer {
flex-direction: row;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
padding-left: 0rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: fit-content;
@ -1002,12 +1037,23 @@ footer {
font-size: 2rem;
line-height: 0.3rem;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
font-size: 3rem;
line-height: 1.3rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 3rem;
display: inline-flex;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi {
font-size: 4rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after {
content: ".";
}
@ -1018,6 +1064,11 @@ footer {
position: relative;
top: -10px;
}
@media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
font-size: 1.2rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee .field_field_date_de_annee {
display: inline-flex;
align-items: center;
@ -1047,16 +1098,25 @@ footer {
border: solid rgb(7, 50, 194) 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: fit-content;
min-width: 50%;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.6rem;
}
@media (max-width: 700px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 1rem;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.5rem !important;
margin: 0;
}
@media (max-width: 700px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 1rem !important;
}
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
display: none;
}
@ -1094,6 +1154,11 @@ footer {
width: 500px !important;
padding: 1rem;
}
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row {
width: 296px !important;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
-moz-border-radius: 9px; /* pour Mozilla */
-khtml-border-radius: 9px; /* pour Safari et Chrome */
@ -1103,12 +1168,22 @@ footer {
height: 250px;
margin-bottom: 0.6rem;
}
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
height: 170px;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
width: 100%;
height: fit-content;
max-height: 250px;
object-fit: cover;
}
@media (max-width: 550px) {
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
max-height: 170px;
}
}
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite {
text-transform: uppercase;
color: red;
@ -1497,7 +1572,8 @@ footer {
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {
grid-row: 4;
grid-column: 1;
grid-column: 2;
margin: auto;
}
}
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
@ -1506,7 +1582,7 @@ footer {
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(3) {
grid-row: 9;
grid-row: 8;
grid-column: 1;
}
}
@ -1533,8 +1609,8 @@ footer {
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 5;
grid-column: 1;
grid-row: 4;
grid-column: 1/span 2;
width: 315px;
}
}
@ -1544,7 +1620,7 @@ footer {
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 9/span 9;
grid-row: 8;
grid-column: 1/span 2;
width: 315px;
}
@ -1568,7 +1644,7 @@ footer {
}
@media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 8;
grid-row: 9;
grid-column: 1/span 2;
}
}

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

@ -39,9 +39,9 @@
//////// header ////////////
document.addEventListener('DOMContentLoaded', function() {
const headerNavContainer = document.querySelector('.header_nav_container');
const headerLeftContainer = document.querySelector('header');
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
@ -80,31 +80,39 @@
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
window.addEventListener('scroll', function() {
handleScroll();
});
const headerLeftContainer = document.querySelector('header');
headerLeftContainer.addEventListener('mouseenter', function() {
slideIn(); // Slide out on mouse enter
});
headerLeftContainer.addEventListener('mouseleave', function() {
if (lastScrollTop <= threshold) {
slideOut(); // Slide in on mouse leave if not scrolled down
function handleTouchAndMouseEnter() {
if (isHidden) {
slideIn();
}
});
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
slideOut();
}
}
window.addEventListener('scroll', handleScroll);
// Mouse events for desktop
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
if (window.pageYOffset <= threshold) {
slideIn();
} else {
slideOut();
}
});
// /////////////////
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
@ -164,20 +172,31 @@ $( document ).ready(function() {
////////////////// Timeline ///////////////////////
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
function getVisibleSlides() {
if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens
} else if (window.innerWidth <= 900) {
return 2; // Show 2 slides on medium screens
} else {
return 3; // Show 3 slides on large screens
}
}
function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length;
const visibleSlides = 3; // Number of slides to show at a time
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0, Math.min(index, maxSlide));
currentSlide = Math.max(1, Math.min(index, maxSlide));
// Calculate the offset for the transform
const offset = currentSlide * -100 / visibleSlides;
const offset = currentSlide * -70 / visibleSlides;
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
// Enable/disable arrows based on the current slide
@ -185,7 +204,6 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
function prevSlide() {
showSlides(currentSlide - 1);
}
@ -198,18 +216,27 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Initialize the first view of the slides
showSlides(currentSlide);
// Check and replace empty day fields
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const dateElement = paragraph.querySelector('.date');
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText.length >= 3) {
monthField.textContent = monthText.slice(0, 3);
console.log(monthField)
}
}
});
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
});
@ -247,7 +274,7 @@ document.addEventListener('DOMContentLoaded', function() {
settings: {
slidesToShow: 1,
adaptiveHeight: true,
arrows: false,
arrows: true,
draggable: true,
centerMode: true,
}

13
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -330,14 +330,15 @@
grid-column: 3;
@media(max-width: 700px){
grid-row: 4;
grid-column: 1;
grid-column: 2;
margin: auto;
}
}
h5:nth-of-type(3){
grid-row: 1;
grid-column: 5;
@media(max-width: 700px){
grid-row: 9;
grid-row: 8;
grid-column: 1;
}
}
@ -360,8 +361,8 @@
grid-row: 3;
grid-column: inherit;
@media(max-width: 700px){
grid-row: 5;
grid-column: 1 ;
grid-row: 4;
grid-column: 1 /span 2 ;
width: 315px;
}
}
@ -369,7 +370,7 @@
grid-row: 1 /span 2;
grid-column: 5 /span 6;
@media(max-width: 700px){
grid-row: 9/span 9;
grid-row: 8 ;
grid-column: 1 /span 2;
width: 315px;
}
@ -389,7 +390,7 @@
grid-row: 3;
grid-column: 5;
@media(max-width: 700px){
grid-row: 8;
grid-row: 9;
grid-column: 1 /span 2;
}
}

9
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@ -32,6 +32,9 @@
}
.views-row{
width: 500px !important;
@media(max-width: 550px){
width: 296px !important;
}
padding: 1rem;
.node-type-actualite{
.field_field_images{
@ -42,11 +45,17 @@
background-color: red;
height: 250px;
margin-bottom: 0.6rem;
@media(max-width: 550px){
height: 170px;
}
img{
width: 100%;
height: fit-content;
max-height: 250px;
object-fit: cover;
@media(max-width: 550px){
max-height: 170px;
}
}
}
.field_field_type_d_actualite{

13
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -9,7 +9,7 @@ header{
position: fixed;
top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
@media(max-width: 700px){
@media(max-width: 500px){
height: $header-height-pad;
}
@ -106,7 +106,9 @@ header{
transform: translateX(0);
transition: transform 0.3s ease-in-out;
z-index: -1 ;
@media(max-width: 500px){
flex: 0 0 40%;
}
#block-quartiers-de-demain-entete{
h2{
display: none;
@ -125,7 +127,7 @@ header{
top: calc($header-height-pad / 4 );
}
li{
@media(max-width: 500px){
@media(max-width: 1090px){
padding-top: 0.3rem;
}
a{
@ -133,11 +135,16 @@ header{
text-transform: uppercase;
color: white;
font-size: 0.5rem;
@media(max-width:1090px){
font-size: 0.9rem;
}
@media(max-width: 500px){
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.6rem;
}
}
&:not(:last-of-type){
::after{

1
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@ -68,6 +68,7 @@ $slick-opacity-not-active: 0.25 !default;
.slick-next {
position: absolute;
display: block;
z-index: 99;
height: 20px;
width: 20px;
line-height: 0px;

41
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -10,6 +10,9 @@
background-repeat: no-repeat;
background-size: contain;
background-position-x: -20%;
@media(max-width:1090px){
cursor:grab;
}
}
.timeline {
@ -17,11 +20,19 @@
overflow: hidden;
padding-top: 10rem;
padding-bottom: 4rem;
@media(max-width:1090px){
padding-top: 18rem;
overflow: scroll;
}
.__timeline-arrows{
width: fit-content;
margin: auto;
position: relative;
top: -115px;
@media(max-width:1090px){
top: -211px;
display: none;
}
button{
background-color: transparent;
border: none;
@ -59,14 +70,15 @@
content: "";
position: absolute;
top: 50%;
left: 101%;
left: 100%;
bottom: 0;
width: 12px;
height: 12px;
width: 17px;
height: 17px;
transform: translateY(-50%);
border-radius: 50%;
background: black;
}
.paragraph--type--phase-deroulement{
position: absolute;
left: 65%;
@ -81,6 +93,10 @@
flex-direction: row;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
@media(max-width:550px){
padding-left: 0rem;
}
.date{
width: fit-content;
display: flex;
@ -92,12 +108,19 @@
.field_field_date_de_jour{
font-size: 2rem;
line-height: 0.3rem;
@media(max-width:550px){
font-size: 3rem;
line-height: 1.3rem;
}
}
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 3rem;
display: inline-flex;
@media(max-width:550px){
font-size: 4rem;
}
&::after{
content: '.';
}
@ -108,6 +131,9 @@
font-size: 0.6rem;
position: relative;
top: -10px;
@media(max-width:550px){
font-size: 1.2rem;
}
.field_field_date_de_annee{
display: inline-flex;
align-items: center;
@ -149,16 +175,21 @@
border: solid $blue_QDD 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: fit-content;
// width: fit-content;
min-width: 50%;
.field_field_titre{
font-size: 0.6rem;
@media(max-width:700px){
font-size: 1rem;
}
}
.field_field_description{
p{
font-size: 0.5rem !important;
margin: 0;
@media(max-width:700px){
font-size: 1rem !important;
}
}
.field--label-above{
display: none;