From 5106413b4d6d5d2bd567df447611baec5f038ab7 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Fri, 11 Oct 2024 15:29:41 +0200
Subject: [PATCH] =?UTF-8?q?correction=20photos=20verticales=20diapo=20+=20?=
 =?UTF-8?q?d=C3=A9grad=C3=A9=20liste=20arr=C3=AAts=20agrandi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../caravane/assets/js/vuejs/components/ImageModale.vue     | 5 +++--
 .../assets/js/vuejs/components/parties/ModaleDiaporama.vue  | 6 ++++++
 web/themes/custom/caravane/assets/scss/main.scss            | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue b/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
index 85dddfb..7fb04ab 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue
@@ -28,7 +28,7 @@
               `]"
             >
               <swiper-slide v-for="media in swiperContent">
-                <figure>
+                <figure class="popup-figure">
                   <img :src="media.src" :alt="media.alt" class="popup-img">
                   <figcaption>{{ media.alt }}</figcaption>
                 </figure>
@@ -138,8 +138,9 @@ const close = () => {
             margin-top: 3%;
             max-width: 60%;
             height: 80%;
+            max-height: 80vh;
             img {
-              height: -webkit-fill-available;
+              height: -webkit-fill-available !important;
               max-width: 100%;
               margin-bottom: -5px;
               object-fit: cover;
diff --git a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
index afbc972..116fc39 100644
--- a/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
+++ b/web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue
@@ -82,7 +82,13 @@ onMounted(() => {
   --swiper-navigation-size: 1.5rem;
 }
 
+swiper-slide figure:not(.popup-figure) {
+  max-height: 40vh;
+  padding-bottom: 3rem;
+}
+
 swiper-slide img:not(.popup-img) { /* cf main.scss */
+  max-height: 35vh;
   cursor: pointer;
   transition: transform 0.3s ease-out;
   &:hover {
diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss
index 2d77ad3..fc42382 100644
--- a/web/themes/custom/caravane/assets/scss/main.scss
+++ b/web/themes/custom/caravane/assets/scss/main.scss
@@ -470,7 +470,7 @@ body{
             > .layout__region--third {
               padding-right: $body-margin-x;
               height: 100%;
-              grid-column: 13 / span 4;
+              grid-column: 11 / span 6;
               position: relative;
               z-index: 2;
               background: linear-gradient(to right, transparent, #faf1eb);