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

menu mobile

This commit is contained in:
Valentin 2024-10-18 18:44:03 +02:00
parent d5c5d81841
commit baa26f3c49
6 changed files with 168 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/themes/custom/caravane/assets/js/main.js
View File

@ -1,6 +1,6 @@
import { initVueContentModale } from './utils/vue-setup';
import { processClickableElements } from './utils/process-clickable-elements';
import { setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
import { initFirstLoadRouting, handleClickableElements } from './utils/handle-navigation';
import { setupMapStore } from './utils/map-setup';
@ -17,6 +17,7 @@ import '../scss/main.scss'
const siteName = document.querySelector('#site_name').innerText;
const { store, mapStore, router, route } = initVueContentModale();
handleReactiveness();
setMenuToggle();
setHamburgerWhenLogged(drupalSettings);

18
web/themes/custom/caravane/assets/js/stores/layout.js Normal file
View File

@ -0,0 +1,18 @@
import { defineStore } from 'pinia';
export const useLayoutStore = defineStore('layout', {
state: () => ({
minDesktopWidth: 992,
isDesktop: Boolean,
isEtapeListRetracted: Boolean,
}),
actions: {
setupResizeListenner () {
this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
window.addEventListener('resize', () => {
this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
})
this.isEtapeListRetracted = this.isDesktop ? false : true;
},
},
})

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

@ -1,3 +1,54 @@
import { useLayoutStore } from '../stores/layout';
export function handleReactiveness() {
const layoutStore = useLayoutStore();
layoutStore.setupResizeListenner();
(function setupEtapeListeCollapse() {
const listeToggleButton = document.querySelector('#retractable-message');
const listeEtape = document.querySelector('#etapes-liste');
if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
window.addEventListener('resize', () => {
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
expandEtapeListe(listeEtape, layoutStore);
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
collapseEtapeListe(listeEtape, layoutStore);
}
});
listeToggleButton.addEventListener('click', () => {
if (!layoutStore.isDesktop) {
if (!layoutStore.isEtapeListRetracted) {
collapseEtapeListe(listeEtape, layoutStore);
} else {
expandEtapeListe(listeEtape, layoutStore);
}
}
});
})();
function collapseEtapeListe(listeEtape, layoutStore) {
listeEtape.classList.add('retracted');
setTimeout(() => {
listeEtape.closest('.layout__region').classList.add('retracted');
listeEtape.nextElementSibling.classList.add('retracted');
}, 300);
layoutStore.isEtapeListRetracted = true;
}
function expandEtapeListe(listeEtape, layoutStore) {
listeEtape.closest('.layout__region').classList.remove('retracted');
listeEtape.nextElementSibling.classList.remove('retracted');
setTimeout(() => {
listeEtape.classList.remove('retracted');
}, 300);
layoutStore.isEtapeListRetracted = false;
}
}
export function setMenuToggle() {
const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');

1
web/themes/custom/caravane/assets/pictograms/chevron-down.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-305 200-586l95-94 185 185 186-185 95 94-281 281Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 178 B

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

@ -1,5 +1,7 @@
@import 'fonts.scss';
$desktop-min-width: 992px;
$body-margin-x: 30px;
$body-margin-y: 5px;
$body-margin-bottom: 4vh;
@ -17,9 +19,11 @@ $main-color-light: #635b58;
$light-color: #faf1eb;
$brand-color: #80c8bf;
$menu-width: 15vw;
$menu-mobile-width: 60vw;
$menu-desktop-width: 20vw;
$menu-margin: 2rem;
body{
font-family: 'Marianne', sans-serif;
color: $main-color;
@ -38,29 +42,39 @@ body{
display: grid;
grid-template-columns: repeat(16, 1fr);
> #block-caravane-logorepublique {
grid-column: 1 / span 1;
grid-column: 7 / span 3;
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 1 / span 1;
}
> div > div > a > img {
width: 100%;
height: auto;
}
}
> #block-caravane-logoepau {
grid-column: 2 / span 2;
grid-column: 10 / span 6;
display: flex;
align-items: center;
padding-right: 2.5rem;
@media screen and (min-width: $desktop-min-width) {
grid-column: 2 / span 2;
}
> div > div > a > img {
width: 100%;
height: auto;
}
}
> #block-caravane-logocaravane {
grid-column: 8 / span 2;
grid-column: 1 / span 5;
grid-row: 1;
padding-top: 0.5rem;
display: flex;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
grid-column: 8 / span 2;
}
> div > div > a > img {
width: 100%;
height: auto;
@ -79,7 +93,7 @@ body{
z-index: 2;
background-color: $brand-color;
position: fixed;
width: $menu-width;
width: $menu-mobile-width;
right: 0;
top: 0;
padding-top: 2.8vh;
@ -91,6 +105,9 @@ body{
transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
opacity: 0;
align-items: center;
@media screen and (min-width: $desktop-min-width) {
width: $menu-desktop-width;
}
> p {
padding-left: $menu-margin;
margin: 10px 0;
@ -173,7 +190,7 @@ body{
list-style-type: none;
background-color: white;
position: fixed;
width: $menu-width;
width: $menu-mobile-width;
right: $body-margin-x;
padding: 0;
padding-top: 1.5rem;
@ -182,6 +199,9 @@ body{
opacity: 0;
transition: top 0.3s ease-out, opacity 0.2s ease-out;
z-index: 1;
@media screen and (min-width: $desktop-min-width) {
width: $menu-desktop-width;
}
> li {
padding-left: $menu-margin;
margin: 15px 0;
@ -478,16 +498,35 @@ body{
> .layout__region--third {
padding-right: $body-margin-x;
height: 100%;
grid-column: 11 / span 6;
grid-column: 4 / span 13;
position: relative;
z-index: 2;
background: linear-gradient(to right, transparent, #faf1eb);
display: flex;
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
align-items: center;
justify-content: flex-end;
pointer-events: none;
> div {
max-width: 100%;
transition: all 0.3s ease-out;
justify-self: end;
&.retracted {
max-width: 25%;
grid-column: 16 / span 1;
}
@media screen and (min-width: $desktop-min-width) {
background: linear-gradient(to right, transparent, #faf1eb);
grid-column: 11 / span 6;
}
> div #etapes-liste {
pointer-events: auto;
padding-right: 2rem;
width: 100%;
overflow: hidden;
opacity: 1;
transition: opacity 0.3s ease-out;
&.retracted {
opacity: 0;
}
ul {
list-style: none;
> li {
@ -564,7 +603,6 @@ body{
justify-content: center;
align-items: center;
> div {
background-color: red;
display: block;
width: 20px;
height: 10px;
@ -586,6 +624,49 @@ body{
}
}
}
#retractable-message {
cursor: pointer;
pointer-events: auto;
color: $light-color;
position: fixed;
top: 50%;
text-wrap: nowrap;
right: 70vw;
display: flex;
flex-direction: column;
align-items: center;
transform: rotate(90deg) scale(1);
transition: all 0.3s ease-out;
&:hover {
transform: rotate(90deg) scale(1.05);
}
&.retracted {
right: -3vw;
> div {
transform: rotate(0deg);
}
}
@media screen and (min-width: $desktop-min-width) {
display: none;
}
> p {
background-color: $main-color;
padding: 0.5rem 1rem;
border-radius: 1.3rem;
margin: 0;
margin-bottom: 0.2rem;
font-size: $sm-font-size;
}
> div {
width: 20px;
height: 20px;
background-color: $main-color;
mask: url('/themes/custom/caravane/assets/pictograms/chevron-down.svg') no-repeat center;
mask-size: contain;
transform: rotate(180deg);
transition: transform 0.3s ease-out;
}
}
}
}
> .user-login-form {

4
web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig
View File

@ -38,3 +38,7 @@
{{ content }}
{% endblock %}
</div>
<div id="retractable-message">
<p>Liste des arrêts</p>
<div></div>
</div>