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

vm css

This commit is contained in:
ouidade 2024-07-12 20:09:17 +02:00
parent d314a77612
commit 2bd90ffdac
7 changed files with 51 additions and 136 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

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

@ -1067,7 +1067,7 @@ footer {
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline { #home .timeline {
padding-top: 18rem; padding-top: 14rem;
overflow: scroll; overflow: scroll;
} }
} }
@ -1081,7 +1081,6 @@ footer {
@media (max-width: 1090px) { @media (max-width: 1090px) {
#home .timeline .__timeline-arrows { #home .timeline .__timeline-arrows {
top: -211px; top: -211px;
display: none;
} }
} }
#home .timeline .__timeline-arrows button { #home .timeline .__timeline-arrows button {
@ -1091,6 +1090,11 @@ footer {
#home .timeline .__timeline-arrows button:hover { #home .timeline .__timeline-arrows button:hover {
opacity: 0.5; opacity: 0.5;
} }
@media (max-width: 1090px) {
#home .timeline .__timeline-arrows button svg {
padding: 0.5rem;
}
}
#home .timeline .__timeline-content { #home .timeline .__timeline-content {
width: 100vw; width: 100vw;
padding-top: 7rem; padding-top: 7rem;
@ -1141,6 +1145,7 @@ footer {
@media (max-width: 550px) { @media (max-width: 550px) {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement {
padding-left: 0rem; padding-left: 0rem;
width: 240px;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
@ -1385,6 +1390,11 @@ footer {
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
transform: scale(2); transform: scale(2);
} }
@media (max-width: 820px) {
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
transform: scale(1);
}
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
animation-delay: 0.2s; animation-delay: 0.2s;
animation-name: blink; animation-name: blink;
@ -2008,7 +2018,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
} }
@media (max-width: 700px) { @media (max-width: 700px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(1) {
width: 260px; width: 230px;
top: 50px; top: 50px;
position: relative; position: relative;
} }
@ -2025,8 +2035,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(2) {
grid-row: 4; grid-row: 4;
grid-column: 1/span 2; grid-column: 1/span 2;
width: 260px; width: 230px;
padding-left: 1rem; padding-left: 1rem;
top: -10px;
} }
} }
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
@ -2041,7 +2052,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto svg:nth-of-type(3) {
grid-row: 8; grid-row: 8;
grid-column: 1/span 2; grid-column: 1/span 2;
width: 260px; width: 230px;
top: -50px; top: -50px;
left: 0rem; left: 0rem;
padding-left: 1rem; padding-left: 1rem;
@ -2084,30 +2095,22 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s; animation-delay: 3s;
} }
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 {
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 8s; animation-delay: 7s;
} }
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { #home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s; animation-delay: 10s;
} }
@keyframes fillAnimation1 { @keyframes fillAnimation {
from {
stroke-dashoffset: 0; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */
}
}
@keyframes fillAnimation2 {
from { from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
} }

93
web/themes/custom/quartiers_de_demain/src/assets/js/header.js
View File

@ -1,93 +0,0 @@
//////// header ////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header');
// Vérifier si la page a été rechargée ou si c'est une navigation interne
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
// Vérifier si nous sommes sur la page cible
const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
if (!isFirstLoad || !isTargetPath) {
header.classList.add('header--collapsed-already');
} else {
// Sinon, appliquer la transition après un délai
setTimeout(() => {
header.classList.add('header--collapsed');
}, 1000); // Attendre 1 seconde avant de réduire la taille du header
}
// Gestion du scroll pour afficher/masquer le header nav
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;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > threshold && !isHidden) {
slideOut();
} else if (scrollTop <= threshold && isHidden) {
slideIn();
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
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();
}
});

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

@ -312,7 +312,13 @@
// Calculate the offset for the transform // Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides; const offset = currentSlide * -70 / visibleSlides;
const offsetmobile = currentSlide * -130 / visibleSlides;
if (window.innerWidth <= 600){
document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;
} else {
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`; document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
}
// Enable/disable arrows based on the current slide // Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0; document.getElementById('arrowPrev').disabled = currentSlide === 0;

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

@ -502,7 +502,7 @@
grid-column: 1 /span 2; grid-column: 1 /span 2;
padding: 1rem; padding: 1rem;
@media(max-width: 700px){ @media(max-width: 700px){
width: 260px; width: 230px;
top: 50px; top: 50px;
position: relative; position: relative;
} }
@ -518,8 +518,9 @@
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 4; grid-row: 4;
grid-column: 1 /span 2 ; grid-column: 1 /span 2 ;
width: 260px; width: 230px;
padding-left: 1rem; padding-left: 1rem;
top: -10px;
} }
@ -535,7 +536,7 @@
@media(max-width: 700px){ @media(max-width: 700px){
grid-row: 8 ; grid-row: 8 ;
grid-column: 1 /span 2; grid-column: 1 /span 2;
width: 260px; width: 230px;
top: -50px; top: -50px;
left: 0rem; left: 0rem;
padding-left: 1rem; padding-left: 1rem;
@ -578,33 +579,25 @@
#paragraph-id--7 .colone-picto svg #pillier-1-path365{ #paragraph-id--7 .colone-picto svg #pillier-1-path365{
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s; animation-delay: 3s;
} }
#paragraph-id--7 .colone-picto svg #pillier-2-path367{ #paragraph-id--7 .colone-picto svg #pillier-2-path367{
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 8s; animation-delay: 7s;
} }
#paragraph-id--7 .colone-picto svg #pillier-3-path369{ #paragraph-id--7 .colone-picto svg #pillier-3-path369{
stroke-dasharray: 0; /* Longueur totale du chemin */ stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ animation: fillAnimation 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s; animation-delay: 10s;
} }
@keyframes fillAnimation1 { @keyframes fillAnimation {
from {
stroke-dashoffset: 0; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */
}
}
@keyframes fillAnimation2 {
from { from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
} }

3
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss
View File

@ -5,6 +5,9 @@ header{
&.animated{ &.animated{
transform: scale(2); transform: scale(2);
@media(max-width:820px) {
transform: scale(1);
}
.blink-blue { .blink-blue {
// animation: blink 3s 3; // animation: blink 3s 3;
animation-delay: 0.2s; animation-delay: 0.2s;

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

@ -29,7 +29,7 @@
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 8rem; padding-bottom: 8rem;
@media(max-width:1090px){ @media(max-width:1090px){
padding-top: 18rem; padding-top: 14rem;
overflow: scroll; overflow: scroll;
} }
.__timeline-arrows{ .__timeline-arrows{
@ -40,7 +40,7 @@
padding-bottom: 2rem; padding-bottom: 2rem;
@media(max-width:1090px){ @media(max-width:1090px){
top: -211px; top: -211px;
display: none; // display: none;
} }
button{ button{
background-color: transparent; background-color: transparent;
@ -48,10 +48,12 @@
&:hover{ &:hover{
opacity: 0.5; opacity: 0.5;
} }
// svg{ @media(max-width:1090px){
// padding: 0.5rem; svg{
padding: 0.5rem;
// } }
}
} }
} }
.__timeline-content{ .__timeline-content{
@ -105,6 +107,7 @@
padding-right: 2rem; padding-right: 2rem;
@media(max-width:550px){ @media(max-width:550px){
padding-left: 0rem; padding-left: 0rem;
width:240px;
} }
.date{ .date{
width: fit-content; width: fit-content;