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

Compare commits

base: bachir:421187c12876e66315d09596138e87930c66d9d5
Branches Tags
bachir:master
bachir:prod
bachir:stage
..
compare: bachir:fc005904e2a845cd662a49222acc8657fde9a8fa
Branches Tags
bachir:master
bachir:prod
bachir:stage

No commits in common. "421187c12876e66315d09596138e87930c66d9d5" and "fc005904e2a845cd662a49222acc8657fde9a8fa" have entirely different histories.
421187c128 ... fc005904e2

3 changed files with 2 additions and 64 deletions
Show Stats Expand all files Collapse all files

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

@ -32,42 +32,9 @@ 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,11 +32,6 @@ export function handleReactiveness() {
});
})();
layoutStore.checkIfEtapeListeShouldScroll();
window.addEventListener('resize', () => {
layoutStore.checkIfEtapeListeShouldScroll();
});
}
export function setMenuToggle() {

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

@ -53,7 +53,7 @@ body{
.layout-container {
> header {
z-index: 2;
position: fixed;
position: relative;
> div {
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
display: grid;
@ -567,9 +567,6 @@ 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;
@ -593,20 +590,6 @@ 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 {
@ -763,13 +746,6 @@ 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;
@ -1271,10 +1247,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;
}