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

liste etape scrollable if window too small

This commit is contained in:
Valentin Le Moign 2025-01-15 01:39:56 +01:00
parent fc005904e2
commit 9049939b92
3 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@ -32,9 +32,42 @@ export const useLayoutStore = defineStore('layout', {
animationToggle.classList.remove('hidden');
setTimeout(() => {
listeEtape.classList.remove('retracted');
this.checkIfEtapeListeShouldScroll();
}, 300);
this.isEtapeListRetracted = false;
},
checkIfEtapeListeShouldScroll() {
const listeEtape = document.querySelector('#etapes-liste');
const column = document.querySelector('.layout__region--third');
const columnRect = column.getBoundingClientRect();
const listeEtapeContentRect = document.querySelector('#etapes-liste .item-list').getBoundingClientRect();
const headerRect = document.querySelector('.layout-container > header').getBoundingClientRect();
const animationToggleRect = document.querySelector('.animation-toggle-container').getBoundingClientRect();
const isIntersecting = headerRect.bottom >= (columnRect.height - listeEtapeContentRect.height) / 2;
if (isIntersecting) {
this.enableEtapeListeScroll(listeEtape, column, headerRect.height, animationToggleRect.top);
} else {
this.disableEtapeListeScroll(listeEtape, column);
}
},
enableEtapeListeScroll(listeEtape, column, headerHeight, animationToggleTop) {
listeEtape.classList.add('scrollable');
column.classList.add('liste-etapes-scrollable');
listeEtape.style.marginTop = `${headerHeight}px`;
listeEtape.style.maxHeight = `calc(100vh - (100vh - ${animationToggleTop}px) - ${headerHeight}px)`;
},
disableEtapeListeScroll(listeEtape, column) {
listeEtape.classList.remove('scrollable');
column.classList.remove('liste-etapes-scrollable');
listeEtape.style.marginTop = 'unset';
listeEtape.style.maxHeight = 'unset';
},
setUpHamburgerToggle(menuBurger, menuContainer) {
const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2');

5
web/themes/custom/caravane/assets/js/utils/layout-setup.js
View File

@ -32,6 +32,11 @@ export function handleReactiveness() {
});
})();
layoutStore.checkIfEtapeListeShouldScroll();
window.addEventListener('resize', () => {
layoutStore.checkIfEtapeListeShouldScroll();
});
}
export function setMenuToggle() {

26
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -567,6 +567,9 @@ body{
max-width: 25%;
// grid-column: 16 / span 1;
}
&.liste-etapes-scrollable {
align-items: start;
}
@media screen and (min-width: $desktop-min-width) {
background: linear-gradient(to right, transparent, #faf1eb);
grid-column: 11 / span 6;
@ -590,6 +593,20 @@ body{
&.disapeared {
display: none;
}
&.scrollable {
overflow-y: scroll;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 7%,
black 85%,
transparent 100%
);
ul {
// padding-top: 0.5rem;
padding-bottom: 1rem;
}
}
ul {
list-style: none;
> li {
@ -746,6 +763,13 @@ body{
transition: transform 0.3s ease-out;
}
}
.transparent-gradient {
position:absolute;
z-index:2;
right:0; bottom:0; left:0;
height:200px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}
}
> #content-modale {
padding-bottom: 20vh;
@ -1247,10 +1271,10 @@ body{
}
}
> #animation-toggle {
transition: opacity 0.3s ease-out;
@media screen and (min-width: $desktop-min-width) {
z-index: 5;
}
transition: opacity 0.3s ease-out;
&.hidden {
opacity: 0;
}