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

Compare commits

base: bachir:ef760adb39ef3f839b9db70104cdcafee6d4131a
Branches Tags
bachir:master
bachir:prod
...
compare: bachir:03840a20ba840c94f3c749afe8e76309f551761b
Branches Tags
bachir:master
bachir:prod

2 Commits
ef760adb39 ... 03840a20ba

Author SHA1 Message Date
Valentin 03840a20ba animation toggle in etape list on mobile, correction display etape list 2024-11-25 23:19:34 +01:00
Valentin e346f103e1 largeur de la liste étapes 2024-11-25 22:02:41 +01:00
5 changed files with 55 additions and 37 deletions
Show Stats Expand all files Collapse all files

7
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -58,8 +58,6 @@ export const useContentStore = defineStore('content', {
} }
} }
} else { } else {
console.log("partenaires");
// pour les pages partenaires // pour les pages partenaires
rawContent = await REST.get('/rest/partenaires/'); rawContent = await REST.get('/rest/partenaires/');
contentType = type; contentType = type;
@ -228,7 +226,6 @@ export const useContentStore = defineStore('content', {
// est peut-être plus lisible que fetchFromRelationships // est peut-être plus lisible que fetchFromRelationships
} else if (this.contentType === 'partenaires') { } else if (this.contentType === 'partenaires') {
console.log(rawContent);
this.content.contentTitle = "Partenaires"; this.content.contentTitle = "Partenaires";
const partenairesArray = []; const partenairesArray = [];
for (let partenaire of rawContent.data) { for (let partenaire of rawContent.data) {
@ -285,7 +282,9 @@ export const useContentStore = defineStore('content', {
} }
} }
} }
// TODO :
// get the ordered view from here
// /jsonapi/views/etapes/block_1?views-argument%5B0%5D=all&views-argument%5B1%5D=all
const orderedEtapesList = document.querySelectorAll('#etapes-liste li'); const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
if (orderedEtapesList) { if (orderedEtapesList) {
for (let li of orderedEtapesList) { for (let li of orderedEtapesList) {

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

@ -15,8 +15,9 @@ export const useLayoutStore = defineStore('layout', {
}) })
this.isEtapeListRetracted = this.isDesktop ? false : true; this.isEtapeListRetracted = this.isDesktop ? false : true;
}, },
collapseEtapeListe(listeEtape) { collapseEtapeListe(listeEtape, animationToggle) {
listeEtape.classList.add('retracted'); listeEtape.classList.add('retracted');
animationToggle.classList.add('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.closest('.layout__region').classList.add('retracted'); listeEtape.closest('.layout__region').classList.add('retracted');
listeEtape.nextElementSibling.classList.add('retracted'); listeEtape.nextElementSibling.classList.add('retracted');
@ -24,10 +25,11 @@ export const useLayoutStore = defineStore('layout', {
}, 300); }, 300);
this.isEtapeListRetracted = true; this.isEtapeListRetracted = true;
}, },
expandEtapeListe(listeEtape) { expandEtapeListe(listeEtape, animationToggle) {
listeEtape.closest('.layout__region').classList.remove('retracted'); listeEtape.closest('.layout__region').classList.remove('retracted');
listeEtape.nextElementSibling.classList.remove('retracted'); listeEtape.nextElementSibling.classList.remove('retracted');
listeEtape.classList.remove('disapeared'); listeEtape.classList.remove('disapeared');
animationToggle.classList.remove('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.classList.remove('retracted'); listeEtape.classList.remove('retracted');
}, 300); }, 300);
@ -37,6 +39,8 @@ export const useLayoutStore = defineStore('layout', {
const menuTitle = document.querySelector('#menu-title'); const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuContainer.style.display = 'none';
menuBurger.addEventListener('click', (e) => { menuBurger.addEventListener('click', (e) => {
this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2); this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
}); });
@ -61,20 +65,18 @@ export const useLayoutStore = defineStore('layout', {
toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) { toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) {
setTimeout(() => { setTimeout(() => {
if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
menuContainer.classList.toggle('open'); setTimeout(() => {
menuTitle.classList.toggle('open'); menuContainer.classList.toggle('open');
menuBurger.classList.toggle('open'); menuTitle.classList.toggle('open');
menuH2.classList.toggle('open'); menuBurger.classList.toggle('open');
// console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen); menuH2.classList.toggle('open');
console.log(this.isHamburgerMenuOpen); if (this.isHamburgerMenuOpen) {
if (this.isHamburgerMenuOpen) { setTimeout(() => {
setTimeout(() => { menuContainer.style.display = 'none';
menuContainer.style.display = 'none'; }, 300);
}, 300); }
} this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
console.log('TOGGLE', this.isHamburgerMenuOpen); }, 50);
console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
}, 50); }, 50);
} }
}, },

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

@ -9,34 +9,36 @@ export function handleReactiveness() {
const listeEtape = document.querySelector('#etapes-liste'); const listeEtape = document.querySelector('#etapes-liste');
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore); const animationToggle = document.querySelector('#animation-toggle');
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) { if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
layoutStore.expandEtapeListe(listeEtape, layoutStore); layoutStore.expandEtapeListe(listeEtape, animationToggle);
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) { } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, layoutStore); layoutStore.collapseEtapeListe(listeEtape, animationToggle);
} }
}); });
listeToggleButton.addEventListener('click', () => { listeToggleButton.addEventListener('click', () => {
if (!layoutStore.isDesktop) { if (!layoutStore.isDesktop) {
if (!layoutStore.isEtapeListRetracted) { if (!layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, layoutStore); layoutStore.collapseEtapeListe(listeEtape, animationToggle);
} else { } else {
layoutStore.expandEtapeListe(listeEtape, layoutStore); layoutStore.expandEtapeListe(listeEtape, animationToggle);
} }
} }
}); });
})(); })();
} }
export function setMenuToggle() { export function setMenuToggle() {
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const menuBurger = document.querySelector('#hamburger'); const menuBurger = document.querySelector('#hamburger');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul'); const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
layoutStore.setUpHamburgerToggle(menuBurger, menuContainer); layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
} }
@ -48,8 +50,8 @@ export function setHamburgerWhenLogged(drupalSettings) {
const header = document.querySelector('.dialog-off-canvas-main-canvas'); const header = document.querySelector('.dialog-off-canvas-main-canvas');
const headerTop = header.getBoundingClientRect().top; const headerTop = header.getBoundingClientRect().top;
menuTitle.style.top = `${headerTop}px`; menuTitle.style.top = `${headerTop}px`;
menuBurger.style.top = `${headerTop}px`; menuBurger.style.top = `${headerTop}px`;
menuContainer.style.paddingTop = `${headerTop}px`; menuContainer.style.paddingTop = `${headerTop}px`;
} }
} }

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

@ -581,6 +581,9 @@ body{
opacity: 1; opacity: 1;
display: block; display: block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
@media screen and (min-width: $desktop-min-width) {
max-width: 30vw;
}
&.retracted { &.retracted {
opacity: 0; opacity: 0;
} }
@ -635,7 +638,7 @@ body{
font-family: 'Joost', sans-serif; font-family: 'Joost', sans-serif;
font-weight: lighter; font-weight: lighter;
font-size: $m-font-size-mobile; font-size: $m-font-size-mobile;
align-self: end; align-self: center;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop; font-size: $m-font-size-desktop;
} }
@ -1236,6 +1239,10 @@ body{
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
z-index: 5; z-index: 5;
} }
transition: opacity 0.3s ease-out;
&.hidden {
opacity: 0;
}
> div { > div {
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
@ -1244,11 +1251,10 @@ body{
z-index: 999; z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.4rem 1.2rem; padding: 0.1rem 1.2rem;
border-radius: 10rem; border-radius: 10rem;
background-color: white; background-color: white;
transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;
> div { > div {
margin-right: 1rem; margin-right: 1rem;
> p { > p {

15
web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig
View File

@ -20,12 +20,21 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{% if output|length == 5 {% if output|length == 5
and output|replace( and output|replace(
{'0':'', '1':'', '2':'', '3':'', '4':'', '5':'', '6':'', '7':'', '8':'', '9':''} {'0':'', '1':'', '2':'', '3':'', '4':'', '5':'', '6':'', '7':'', '8':'', '9':''}
) == '' ) == ''
%} %}
<p>{{- output|slice(0, 2) -}}</p> <p>{{- output|slice(0, 2) -}}</p>
{% else %} {% else %}
<p>{{- output -}}</p> {% set split_output = output|split('>') %}
<p>
{% if split_output|length == 7 %}
{{- output -}}
{% else %}
{{- split_output[0]|raw -}}>
{# non breaking hyphen #}
{{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}>
{% endif %}
</p>
{% endif %} {% endif %}