diff --git a/web/themes/custom/caravane/assets/js/main.js b/web/themes/custom/caravane/assets/js/main.js
index eaa3815..6cf9003 100644
--- a/web/themes/custom/caravane/assets/js/main.js
+++ b/web/themes/custom/caravane/assets/js/main.js
@@ -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);
diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js
new file mode 100644
index 0000000..a8211b2
--- /dev/null
+++ b/web/themes/custom/caravane/assets/js/stores/layout.js
@@ -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;
+ },
+ },
+})
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/js/utils/layout-setup.js b/web/themes/custom/caravane/assets/js/utils/layout-setup.js
index 33a5b58..8839b4f 100644
--- a/web/themes/custom/caravane/assets/js/utils/layout-setup.js
+++ b/web/themes/custom/caravane/assets/js/utils/layout-setup.js
@@ -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');
diff --git a/web/themes/custom/caravane/assets/pictograms/chevron-down.svg b/web/themes/custom/caravane/assets/pictograms/chevron-down.svg
new file mode 100644
index 0000000..81215ea
--- /dev/null
+++ b/web/themes/custom/caravane/assets/pictograms/chevron-down.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index 255f22e..51cee4c 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -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;
@@ -474,20 +494,39 @@ 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 {
diff --git a/web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig b/web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig
index 8fc2272..9eecdcc 100644
--- a/web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig
+++ b/web/themes/custom/caravane/templates/block--views-block--etapes-block-1.html.twig
@@ -38,3 +38,7 @@
{{ content }}
{% endblock %}
+
\ No newline at end of file