From 376e0af7a3ff41e6a443fb30774762997159e990 Mon Sep 17 00:00:00 2001 From: Valentin Date: Sat, 19 Oct 2024 03:49:16 +0200 Subject: [PATCH] modale responsive --- .../caravane/assets/js/stores/layout.js | 18 + .../caravane/assets/js/stores/mapState.js | 2 + .../assets/js/utils/handle-navigation.js | 4 + .../caravane/assets/js/utils/layout-setup.js | 29 +- .../caravane/assets/js/vuejs/Modale.vue | 7 + .../js/vuejs/components/ModaleHeader.vue | 16 +- .../components/parties/ModaleEntretien.vue | 48 +- .../custom/caravane/assets/scss/main.scss | 810 +++++++++++------- .../layout--threecol-25-50-25.html.twig | 56 ++ .../custom/caravane/templates/page.html.twig | 2 - 10 files changed, 610 insertions(+), 382 deletions(-) create mode 100644 web/themes/custom/caravane/templates/layout--threecol-25-50-25.html.twig diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index a8211b2..3b24f3e 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -14,5 +14,23 @@ export const useLayoutStore = defineStore('layout', { }) this.isEtapeListRetracted = this.isDesktop ? false : true; }, + collapseEtapeListe(listeEtape) { + listeEtape.classList.add('retracted'); + setTimeout(() => { + listeEtape.closest('.layout__region').classList.add('retracted'); + listeEtape.nextElementSibling.classList.add('retracted'); + listeEtape.classList.add('disapeared'); + }, 300); + this.isEtapeListRetracted = true; + }, + expandEtapeListe(listeEtape) { + listeEtape.closest('.layout__region').classList.remove('retracted'); + listeEtape.nextElementSibling.classList.remove('retracted'); + listeEtape.classList.remove('disapeared'); + setTimeout(() => { + listeEtape.classList.remove('retracted'); + }, 300); + this.isEtapeListRetracted = false; + }, }, }) \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/js/stores/mapState.js b/web/themes/custom/caravane/assets/js/stores/mapState.js index 201c581..b10701b 100644 --- a/web/themes/custom/caravane/assets/js/stores/mapState.js +++ b/web/themes/custom/caravane/assets/js/stores/mapState.js @@ -1,4 +1,5 @@ import { defineStore } from 'pinia'; +import { useLayoutStore } from './layout'; export const useMapStore = defineStore('mapState', { state: () => ({ @@ -12,6 +13,7 @@ export const useMapStore = defineStore('mapState', { }), actions: { zoomToPlace(lat, long) { + if (useLayoutStore().isDesktop) long = long - 0.03; this.map.flyTo([lat, long], this.maxZoom, { duration: this.duration }); this.currentZoom = this.maxZoom; }, diff --git a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js index f916074..835f142 100644 --- a/web/themes/custom/caravane/assets/js/utils/handle-navigation.js +++ b/web/themes/custom/caravane/assets/js/utils/handle-navigation.js @@ -1,4 +1,5 @@ import { setActiveNavItem } from "./set-active-nav-item"; +import { useLayoutStore } from '../stores/layout'; export async function initFirstLoadRouting(store, router, baseUrl, siteName) { const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin')); @@ -31,6 +32,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr document.title = store.pageTitle; } setActiveNavItem(store.contentType, href); + + const listeEtape = document.querySelector('#etapes-liste'); + if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape); } } } 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 8839b4f..d2d409e 100644 --- a/web/themes/custom/caravane/assets/js/utils/layout-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/layout-setup.js @@ -9,44 +9,27 @@ export function handleReactiveness() { const listeEtape = document.querySelector('#etapes-liste'); - if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore); + if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore); window.addEventListener('resize', () => { if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) { - expandEtapeListe(listeEtape, layoutStore); + layoutStore.expandEtapeListe(listeEtape, layoutStore); } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) { - collapseEtapeListe(listeEtape, layoutStore); + layoutStore.collapseEtapeListe(listeEtape, layoutStore); } }); listeToggleButton.addEventListener('click', () => { if (!layoutStore.isDesktop) { if (!layoutStore.isEtapeListRetracted) { - collapseEtapeListe(listeEtape, layoutStore); + layoutStore.collapseEtapeListe(listeEtape, layoutStore); } else { - expandEtapeListe(listeEtape, layoutStore); + layoutStore.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() { diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue index 9091250..0286ab9 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue @@ -52,6 +52,7 @@ import { computed, watch, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { useContentStore } from '../stores/content'; import { useMapStore } from '../stores/mapState'; +import { useLayoutStore } from '../stores/layout'; import ModaleHeader from './components/ModaleHeader.vue'; import ModaleFooter from './components/ModaleFooter.vue'; @@ -66,6 +67,12 @@ import ModaleVideos from './components/parties/ModaleVideos.vue'; const store = useContentStore(); const mapState = useMapStore(); +const layoutStore = useLayoutStore(); + +// pour importer le breakpoint +// const { minDesktopWidth } = storeToRefs(layoutStore); +// console.log(minDesktopWidth); + const { contentType, diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue index 74d4709..91f30f1 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue @@ -7,13 +7,15 @@

Étape n°{{content.etape_number}}

Du {{content.dates.start.d}} {{content.dates.start.m}} au {{ content.dates.end.d }} {{ content.dates.end.m }} {{ content.dates.end.y }}

-
-
-
-
-
-
-

{{content.contentTitle}} ({{ content.adresse.postal_code.slice(0, 2) }})

+
+
+
+
+
+
+
+

{{content.contentTitle}} ({{ content.adresse.postal_code.slice(0, 2) }})

+
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue index 9d44587..fe910be 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue @@ -29,57 +29,15 @@ const props = defineProps({ }); - \ 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 51cee4c..88c23f0 100644 --- a/web/themes/custom/caravane/assets/scss/main.scss +++ b/web/themes/custom/caravane/assets/scss/main.scss @@ -1,6 +1,7 @@ @import 'fonts.scss'; $desktop-min-width: 992px; +$tablet-min-width: 467px; $body-margin-x: 30px; $body-margin-y: 5px; @@ -9,10 +10,23 @@ $body-margin-bottom: 4vh; $modale-x-padding: 5vw; $modale-bottom-padding: 180px; -$sm-font-size: 0.8rem; -$m-font-size: 1.4rem; -$l-font-size: 1.8rem; -$xl-font-size: 2.4rem; +$modale-width-mobile: 80vw; +$modale-width-desktop: 50vw; + +$brand-pattern-height: 110px; + +$sm-font-size-mobile: 0.6rem; +$sm-font-size-desktop: 0.8rem; + +$m-font-size-mobile: 1.1rem; +$m-font-size-desktop: 1.4rem; + +$l-font-size-mobile: 1.3rem; +$l-font-size-desktop: 1.8rem; + +$xl-font-size-mobile: 1.6rem; +$xl-font-size-desktop: 2.4rem; + $main-color: #1a1918; $main-color-light: #635b58; @@ -36,7 +50,7 @@ body{ .layout-container { > header { z-index: 2; - position: relative; + position: fixed; > div { padding: $body-margin-y $body-margin-x 0 $body-margin-x; display: grid; @@ -112,9 +126,12 @@ body{ padding-left: $menu-margin; margin: 10px 0; color: white; - font-size: $l-font-size; + font-size: $l-font-size-mobile; font-family: 'Joost', sans-serif; font-weight: bold; + @media screen and (min-width: $desktop-min-width) { + font-size: $l-font-size-desktop; + } } } > #menu-title.open { @@ -130,10 +147,13 @@ body{ > h2 { z-index: 2; margin-block: 0; - font-size: $sm-font-size; + font-size: $sm-font-size-mobile; color: $main-color-light; font-weight: normal; margin-bottom: 5px; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } } > h2 { display: none; @@ -199,7 +219,9 @@ body{ opacity: 0; transition: top 0.3s ease-out, opacity 0.2s ease-out; z-index: 1; + font-size: $m-font-size-mobile; @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; width: $menu-desktop-width; } > li { @@ -244,7 +266,6 @@ body{ height: 100vh; > .layout-content { z-index: 1; - position: fixed; top: 0; width: 100%; height: 100%; @@ -268,7 +289,7 @@ body{ } } > .layout__region--second { - position: absolute; + position: fixed; z-index: 1; top: 0; width: 100vw; @@ -286,11 +307,14 @@ body{ display: flex; justify-content: center; align-items: center; - font-size: $m-font-size; + font-size: $m-font-size-mobile; font-family: 'marianne', sans-serif; font-weight: lighter; width: 4vh; height: 4vh; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } } > a:first-of-type { border-top-left-radius: 2vh; @@ -359,7 +383,7 @@ body{ grid-column: 1 / span 1; grid-row: 1 / span 1; font-family: 'Joost', sans-serif; - font-size: $m-font-size; + font-size: $m-font-size-mobile; /* display: flex; flex-direction: column; justify-content: center; @@ -369,6 +393,9 @@ body{ padding-left: 20px; padding-right: 20px; text-wrap: wrap; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } > a { display: inline-block; text-align: center; @@ -386,9 +413,12 @@ body{ text-align: center; padding: 10px 0; > time { - font-size: $sm-font-size; + font-size: $sm-font-size-mobile; font-family: 'Marianne', sans-serif; font-weight: lighter; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } } } > div:nth-of-type(3) { @@ -440,7 +470,7 @@ body{ grid-column: 1 / span 1; grid-row: 1 / span 1; font-family: 'Joost', sans-serif; - font-size: $m-font-size; + font-size: $m-font-size-mobile; display: flex; flex-direction: column; justify-content: center; @@ -449,6 +479,9 @@ body{ padding-left: 20px; padding-right: 20px; text-wrap: wrap; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } > a { font-weight: bold; text-decoration: none; @@ -462,9 +495,12 @@ body{ text-align: center; padding: 10px 0; > time { - font-size: $sm-font-size; + font-size: $sm-font-size-mobile; font-family: 'Marianne', sans-serif; font-weight: lighter; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } } } > a { @@ -496,11 +532,12 @@ body{ }*/ } > .layout__region--third { - padding-right: $body-margin-x; height: 100%; + padding-right: $body-margin-x; grid-column: 4 / span 13; - position: relative; - z-index: 2; + position: fixed; + top: 0; + z-index: 4; display: flex; background: linear-gradient(to right, #faf1ebaa, #faf1eb); align-items: center; @@ -523,10 +560,14 @@ body{ width: 100%; overflow: hidden; opacity: 1; - transition: opacity 0.3s ease-out; + display: block; + transition: all 0.3s ease-out; &.retracted { opacity: 0; } + &.disapeared { + display: none; + } ul { list-style: none; > li { @@ -559,9 +600,12 @@ body{ color: $main-color; font-family: 'Joost', sans-serif; font-weight: bold; - font-size: $m-font-size; + font-size: $m-font-size-mobile; display: inline-block; text-align: right; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } } } > .views-field-field-adresse-postal-code { @@ -570,8 +614,11 @@ body{ color: $main-color; font-family: 'Joost', sans-serif; font-weight: lighter; - font-size: $m-font-size; + font-size: $m-font-size-mobile; align-self: end; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } > span { > p::before { content: '('; @@ -585,11 +632,14 @@ body{ > .views-field-field-dates { grid-column: 1 / span 2; grid-row: 2 / span 1; - font-size: $sm-font-size; + font-size: $sm-font-size-mobile; font-family: 'Marianne', sans-serif; font-weight: lighter; text-align: right; margin-top: 7px; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } } > .views-field-field-couleur { display: none; @@ -655,7 +705,10 @@ body{ border-radius: 1.3rem; margin: 0; margin-bottom: 0.2rem; - font-size: $sm-font-size; + font-size: $sm-font-size-mobile; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } } > div { width: 20px; @@ -667,7 +720,436 @@ body{ transition: transform 0.3s ease-out; } } - } + } + > #content-modale { + > div:not(.image-viewer-wrapper, .image-modale) { + padding-bottom: 5vh; + > .content-wrapper { + left: calc(100vw - $modale-width-mobile - $modale-x-padding * 3.5); + width: calc($modale-width-mobile); + top: 15vh; + z-index: 2; + position: relative; + background-color: white; + //padding-bottom: $modale-bottom-padding; + @media screen and (min-width: $desktop-min-width) { + width: $modale-width-desktop; + } + img { + width: 100%; + height: auto; + object-fit: cover; + } + > div { + width: 100%; + overflow: hidden; + } + > header { + margin-bottom: 2rem; + display: grid; + grid-template-rows: auto auto auto auto; + > .cover { + grid-row: 1 / span 1; + max-height: 60vh; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + z-index: 0; + } + > .cartouche { + grid-row: 4 / span 1; + position: relative; + padding: 1rem 1.5rem; + z-index: 2; + top: 0; + background-color: $brand-color; + z-index: 1; + @media screen and (min-width: $desktop-min-width) { + top: 2rem; + position: absolute; + } + > p { + margin-block-start: 0; + margin-block-end: 0; + } + > p:last-of-type { + font-weight: bold; + } + } + > .locality-wrapper { + position: relative; + > .locality { + position: absolute; + bottom: 0; + > .top-triangle { + display: block; + width: calc($modale-width-mobile - $modale-x-padding * 3); + margin-left: $modale-x-padding * 1.5; + height: 100px; + display: flex; + clip-path: polygon(-1% 100%, 50% 0, 101% 100%); + background-color: white; + margin-bottom: -1px; + @media screen and (min-width: $tablet-min-width) { + width: calc($modale-width-mobile - $modale-x-padding * 6); + margin-left: $modale-x-padding * 3; + + } + @media screen and (min-width: $desktop-min-width) { + width: calc($modale-width-desktop - $modale-x-padding * 4); + margin-left: $modale-x-padding * 2; + } + } + > .locality-title { + display: block; + box-sizing: border-box; + width: calc($modale-width-mobile - $modale-x-padding * 3); + top: 99px; + margin-left: $modale-x-padding * 1.5; + min-height: 115px; + background-color: white; + padding: 1rem 2rem; + display: flex; + align-items: center; + text-align: center; + @media screen and (min-width: $tablet-min-width) { + width: calc($modale-width-mobile - $modale-x-padding * 6); + margin-left: $modale-x-padding * 3; + } + @media screen and (min-width: $desktop-min-width) { + width: calc($modale-width-desktop - $modale-x-padding * 4); + margin-left: $modale-x-padding * 2; + } + > h1 { + width: 100%; + text-align: center; + display: block; + font-size: $xl-font-size-mobile; + margin-block-start: 0; + margin-block-end: 0; + font-family: 'Joost', sans-serif; + text-align: center; + @media screen and (min-width: $desktop-min-width) { + font-size: $xl-font-size-desktop; + } + > em { + font-style: normal; + font-weight: lighter; + } + } + } + } + .brand-pattern { + grid-row: 3 / span 1; + display: block; + width: 100%; + height: $brand-pattern-height; + > .pattern { + display: block; + width: 100%; + height: 100%; + background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png); + background-size: 300px; + background-size: repeat; + } + } + + } + } + > main { + width: 100%; + padding: 0 $modale-x-padding; + box-sizing: border-box; + > .partie { + width: 100%; + display: inline-block; + > .sensible-map { + margin: 0; + width: calc(100% + $modale-x-padding); + margin-left: calc(($modale-x-padding / 2) * -1); + margin-top: calc($modale-x-padding / 2); + .vh--message { + font-size: $sm-font-size-mobile; + top: 1rem; + left: 1rem; + bottom: unset; + background-color: rgba(255, 255, 255, 0.6); + color: $main-color-light; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } + } + > figcaption { + margin-left: calc($modale-x-padding / 2); + } + } + > .partie-title, + > .chiffres-cles, + > .entretien { + > h3 { + position: relative; + display: inline-block; + > p { + display: inline; + font-size: $l-font-size-mobile; + font-family: 'Joost', sans-serif; + margin: 0; + z-index: 1; + position: relative; + padding: 0 0.5rem; + @media screen and (min-width: $desktop-min-width) { + font-size: $l-font-size-desktop; + } + } + } + .personne { + display: flex; + flex-direction: column; + align-items: center; + margin: 2rem 0; + width: 100%; + @media screen and (min-width: $desktop-min-width) { + flex-direction: row; + } + &:first-of-type { + margin-top: 1rem; + } + > figure { + width: 6rem; + height: 6rem; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 3rem; + > img { + object-fit: cover; + width: 100%; + height: 100%; + } + } + > .description { + width: 100%; + margin-top: 1rem; + @media screen and (min-width: $desktop-min-width) { + width: calc(100% - 6rem); + margin-top: 0; + } + > p { + margin: 0; + padding-left: 2rem; + } + } + } + .questions-reponses { + margin-top: 3rem; + > div { + > .question { + font-weight: bold; + position: relative; + padding-left: 1.8rem; + margin-top: 2rem; + margin-bottom: 1rem; + &::before { + position: absolute; + content: ""; + display: block; + height: 100%; + width: 0.8rem; + left: 0; + margin-right: 1rem; + } + } + } + } + } + > .chiffres-cles { + > div { + display: grid; + gap: 2rem; + grid-template-columns: 1fr 1fr; + align-content: flex-start; + margin: 2rem 0; + @media screen and (min-width: $desktop-min-width) { + grid-template-columns: 1fr 1fr 1fr; + } + > div { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + > .chiffre { + padding-left: 1rem; + font-size: $xl-font-size-mobile; + font-weight: bold; + font-family: 'Joost', sans-serif; + margin: 0; + @media screen and (min-width: $desktop-min-width) { + font-size: $xl-font-size-desktop; + } + > p { + margin: 0; + } + } + > .chiffre-caption { + padding-left: 1rem; + font-size: $sm-font-size-mobile; + margin: 0; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } + } + } + } + } + > .diaporama { + width: calc(100% + 2 * #{$modale-x-padding}); + margin-top: 5rem; + margin-bottom: 3rem; + margin-left: -$modale-x-padding; + figure { + margin: 0 calc(#{$modale-x-padding} / 2); + > img { + width: 100%; + } + > figcaption { + padding-bottom: 2rem; + } + } + } + > .videos iframe { + margin: 2rem 0; + } + } + .caption { + font-size: $sm-font-size-mobile; + color: $main-color-light; + margin-top: 0.2rem; + margin-bottom: 1.8rem; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } + } + } + > footer { + .pattern-bottom { + mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); + height: $modale-bottom-padding; + position: absolute; + bottom: 0; + } + .related-etape-links { + position: absolute; + //bottom: calc(($modale-bottom-padding / 2) * -1); + width: 100%; + box-sizing: border-box; + padding: 0 calc($modale-x-padding / 2); + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr; + @media screen and (min-width: $desktop-min-width) { + grid-template-columns: 1fr 1fr; + margin-top: 2.5rem; + } + > .card { + width: 80%; + display: flex; + align-items: center; + cursor: pointer; + transition: transform 0.3s ease-out; + justify-self: center; + &:hover { + transform: scale(1.05); + } + &.previous { + grid-column: 1 / span 1; + @media screen and (min-width: $desktop-min-width) { + justify-self: flex-start; + } + } + &:last-of-type { + margin-bottom: 2rem; + } + &.next { + //margin-top: 2rem; + grid-column: 1 / span 2; + @media screen and (min-width: $desktop-min-width) { + grid-column: 2 / span 1; + margin-top: 0; + justify-self: flex-end; + } + } + > .icon { + z-index: 2; + width: 10px; + height: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + > div { + display: block; + width: 20px; + height: 10px; + &:first-of-type, &:last-of-type { + height: 8px; + clip-path: polygon(0 0, 100% 0, 50% 100%); + } + &:first-of-type { + transform: rotate(180deg); + } + } + } + > .card-content { + z-index: 1; + background-color: white; + display: flex; + width: 100%; + > .infos { + width: 60%; + text-align: center; + > .titre { + padding: 1rem 0.5rem; + font-weight: bold; + font-family: 'Joost', sans-serif; + font-size: $m-font-size-mobile; + @media screen and (min-width: $desktop-min-width) { + font-size: $m-font-size-desktop; + } + > span { + font-weight: lighter; + } + } + > .date { + font-size: $sm-font-size-mobile; + font-family: 'Marianne', sans-serif; + font-weight: lighter; + padding-bottom: 1rem; + @media screen and (min-width: $desktop-min-width) { + font-size: $sm-font-size-desktop; + } + } + } + > .vignette { + width: 40%; + position: relative; + > img { + top: 0; + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + } + } + } + } + } + } } > .user-login-form { height: 90vh; @@ -681,288 +1163,6 @@ body{ } } } - > #content-modale { - > div:not(.image-viewer-wrapper, .image-modale) { - padding-bottom: 40vh; - > .content-wrapper { - left: 25vw; - width: 50vw; - top: 15vh; - z-index: 2; - position: relative; - background-color: white; - padding-bottom: $modale-bottom-padding; - img { - width: 100%; - height: auto; - object-fit: cover; - } - > div { - width: 100%; - overflow: hidden; - } - > header { - margin-bottom: 2rem; - > .cover { - max-height: 60vh; - display: flex; - justify-content: center; - overflow: hidden; - position: relative; - z-index: 0; - } - > .cartouche { - position: absolute; - top: 2rem; - padding: 1rem 1.5rem; - background-color: $brand-color; - z-index: 1; - > p { - margin-block-start: 0; - margin-block-end: 0; - } - > p:last-of-type { - font-weight: bold; - } - } - > .locality { - position: relative; - z-index: 1; - width: 50%; - margin-left: 25%; - margin-top: -245px; - > .top-triangle { - display: block; - width: 100%; - height: 100px; - display: flex; - clip-path: polygon(-1% 100%, 50% 0, 101% 100%); - background-color: white; - margin-bottom: -1px; - } - > .locality-title { - min-height: 115px; - display: block; - background-color: white; - padding: 1rem 2rem; - display: flex; - align-items: center; - > h1 { - width: 100%; - font-size: $xl-font-size; - margin-block-start: 0; - margin-block-end: 0; - font-family: 'Joost', sans-serif; - text-align: center; - > em { - font-style: normal; - font-weight: lighter; - } - } - } - } - } - > main { - width: 100%; - padding: 0 $modale-x-padding; - box-sizing: border-box; - > .partie { - width: 100%; - display: inline-block; - > .sensible-map { - margin: 0; - width: calc(100% + $modale-x-padding); - margin-left: calc(($modale-x-padding / 2) * -1); - margin-top: calc($modale-x-padding / 2); - .vh--message { - font-size: $sm-font-size; - top: 1rem; - left: 1rem; - bottom: unset; - background-color: rgba(255, 255, 255, 0.6); - color: $main-color-light; - } - > figcaption { - margin-left: calc($modale-x-padding / 2); - } - } - > .partie-title, - > .chiffres-cles, - > .entretien { - > h3 { - position: relative; - display: inline-block; - > p { - display: inline; - font-size: $l-font-size; - font-family: 'Joost', sans-serif; - margin: 0; - z-index: 1; - position: relative; - padding: 0 0.5rem; - } - } - } - > .chiffres-cles { - > div { - display: grid; - gap: 2rem; - grid-template-columns: 1fr 1fr 1fr; - align-content: flex-start; - margin: 2rem 0; - > div { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - > .chiffre { - padding-left: 1rem; - font-size: $xl-font-size; - font-weight: bold; - font-family: 'Joost', sans-serif; - margin: 0; - > p { - margin: 0; - } - } - > .chiffre-caption { - padding-left: 1rem; - font-size: $sm-font-size; - margin: 0; - } - } - } - } - > .diaporama { - width: calc(100% + 2 * #{$modale-x-padding}); - margin-top: 5rem; - margin-bottom: 3rem; - margin-left: -$modale-x-padding; - figure { - margin: 0 calc(#{$modale-x-padding} / 2); - > img { - width: 100%; - } - > figcaption { - padding-bottom: 2rem; - } - } - } - > .videos iframe { - margin: 2rem 0; - } - } - .caption { - font-size: $sm-font-size; - color: $main-color-light; - margin-top: 0.2rem; - margin-bottom: 1.8rem; - } - } - .brand-pattern { - display: block; - width: 100%; - height: 120px; - > .pattern { - display: block; - width: 100%; - height: 100%; - background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png); - background-size: 300px; - background-size: repeat; - } - } - > footer { - .pattern-bottom { - mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); - height: $modale-bottom-padding; - position: absolute; - bottom: 0; - } - .related-etape-links { - position: absolute; - bottom: calc(($modale-bottom-padding / 2) * -1); - width: 100%; - box-sizing: border-box; - padding: 0 calc($modale-x-padding / 2); - display: grid; - grid-template-columns: 1fr 1fr; - > .card { - width: 80%; - display: flex; - align-items: center; - cursor: pointer; - transition: transform 0.3s ease-out; - &:hover { - transform: scale(1.05); - } - &.next { - grid-column: 2 / span 1; - justify-self: flex-end; - } - > .icon { - z-index: 2; - width: 10px; - height: 30px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - > div { - display: block; - width: 20px; - height: 10px; - &:first-of-type, &:last-of-type { - height: 8px; - clip-path: polygon(0 0, 100% 0, 50% 100%); - } - &:first-of-type { - transform: rotate(180deg); - } - } - } - > .card-content { - z-index: 1; - background-color: white; - display: flex; - width: 100%; - > .infos { - width: 60%; - text-align: center; - > .titre { - padding: 1rem 0.5rem; - font-weight: bold; - font-family: 'Joost', sans-serif; - font-size: $m-font-size; - > span { - font-weight: lighter; - } - } - > .date { - font-size: $sm-font-size; - font-family: 'Marianne', sans-serif; - font-weight: lighter; - padding-bottom: 1rem; - } - } - > .vignette { - width: 40%; - position: relative; - > img { - top: 0; - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - } - } - } - } - } - } - } - } - } } } } \ No newline at end of file diff --git a/web/themes/custom/caravane/templates/layout--threecol-25-50-25.html.twig b/web/themes/custom/caravane/templates/layout--threecol-25-50-25.html.twig new file mode 100644 index 0000000..456bb52 --- /dev/null +++ b/web/themes/custom/caravane/templates/layout--threecol-25-50-25.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Default theme implementation for a three column layout. + * + * This template provides a three column 25%-50%-25% display layout, with + * additional areas for the top and the bottom. + * + * Available variables: + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content for this layout. + * - attributes: HTML attributes for the layout
. + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'layout', + 'layout--threecol-25-50-25', + ] +%} +{% if content %} + + {% if content.top %} +
+ {{ content.top }} +
+ {% endif %} + + {% if content.first %} +
+ {{ content.first }} +
+ {% endif %} + + {% if content.second %} +
+ {{ content.second }} +
+ {% endif %} + + {% if content.third %} +
+ {{ content.third }} +
+ {% endif %} + + {% if content.bottom %} +
+ {{ content.bottom }} +
+ {% endif %} +
+
+{% endif %} diff --git a/web/themes/custom/caravane/templates/page.html.twig b/web/themes/custom/caravane/templates/page.html.twig index 25b2ed3..3d7136d 100644 --- a/web/themes/custom/caravane/templates/page.html.twig +++ b/web/themes/custom/caravane/templates/page.html.twig @@ -78,8 +78,6 @@ {{ page.sidebar_second }} {% endif %} - -
{% if page.footer %}