correction popup étape map

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleCarteSensible.vue

@@ -6,16 +6,34 @@
         :zoom-amount="2.5"
         alt="Carte sensible du territoire"
         hover-message="Survolez pour zoomer dans la carte"
+        @regular-loaded="setVerticalImages()"
         />
         <figcaption class="caption">{{ partie.carteSensible.alt }}</figcaption>
     </figure>
 </template>
 
 <script setup>
+import { nextTick, onMounted } from 'vue';
 import { VueImageZoomer } from 'vue-image-zoomer';
 import 'vue-image-zoomer/dist/style.css';
 
 const props = defineProps({
     partie: Object
 });
+
+function setVerticalImages() {
+    const zoomer = document.querySelector('.sensible-map');
+    setTimeout(() => {
+        if (zoomer.offsetWidth / zoomer.offsetHeight < 1) {
+            zoomer.style.padding = '0 7vw';
+            const caption = zoomer.querySelector('figcaption');
+            caption.style.marginLeft = 0;
+        }
+    }, 100);
+}
+
+onMounted(() => {
+    const zoomer = document.querySelector('.sensible-map');
+    // console.log('mounted');
+});
 </script>

web/themes/custom/caravane/assets/scss/main.scss

@@ -386,33 +386,33 @@ body{
                   border: none;
                   width: 100%;
                   > div {
-                    max-height: 15vh;
                     overflow: hidden;
                     display: grid;
-                    grid-template-columns: minmax(10px, 12.5vw) 12.5vw;
+                    grid-template-columns: 1fr 1fr;
                     grid-template-rows: 1.5fr 0.5fr;
                     transform: translateY(-60%);
                     background-color: white;
                     opacity: 0;
                     transition: opacity 0.3s ease-out;
                     > div:first-of-type {
+                      line-height: 1.2;
                       grid-column: 1 / span 1;
                       grid-row: 1 / span 1;
                       font-family: 'Joost', sans-serif;
                       font-size: $m-font-size-mobile;
-/*                       display: flex;
+                      display: flex;
-                      flex-direction: column;
-                      justify-content: center;
-                      align-items: center;
- */
                       padding-top: 10px;
                       padding-left: 20px;
                       padding-right: 20px;
                       text-wrap: wrap;
+                      width: 100%;
+                      box-sizing: border-box;
                       @media screen and (min-width: $desktop-min-width) {
                         font-size: $m-font-size-desktop;
                       }
                       > a {
+                        width: 100%;
+                        align-self: center;
                         display: inline-block;
                         text-align: center;
                         font-weight: bold;
@@ -427,7 +427,9 @@ body{
                       grid-column: 1 / span 1;
                       grid-row: 2 / span 1;
                       text-align: center;
-                      padding: 10px 0;
+                      padding: 10px 0 20px 0;
+                      width: 100%;
+                      box-sizing: border-box;
                       > time {
                         font-size: $sm-font-size-mobile;
                         font-family: 'Marianne', sans-serif;
@@ -440,24 +442,20 @@ body{
                     > div:nth-of-type(3) {
                       width: 100%;
                       height: 100%;
-                      display: block;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
                       padding: 0;
                       grid-column: 2 / span 1;
                       grid-row: 1 / span 2;
                       overflow: hidden;
-                      > a {
+                      > img {
-                        display: block;
-                        width: 100%;
-                        height: 100%;
                         padding: 0;
-                        > img {
+                        height: auto;
-                          padding: 0;
+                        width: 100%;
-                          height: 100%;
+                        object-fit: cover;
-                          width: auto;
+                        margin: 0;
-                          object-fit: cover;
+                        display: block;
-                          margin: 0;
-                          display: block;
-                        }
                       }
                     }
                   }
@@ -933,6 +931,7 @@ body{
                       width: 100%;
                       display: inline-block;
                       > .sensible-map {
+                        box-sizing: border-box;
                         margin: 0;
                         width: calc(100% + $modale-x-padding);
                         margin-left: calc(($modale-x-padding / 2) * -1);

web/themes/custom/caravane/templates/views-view-field--block-2--popup-map.html.twig

@@ -32,7 +32,7 @@
                     </div>
                 {% endif %} 
             {% else %}
-                {% if content != '' %}
+                {% if content|render|striptags|trim is not empty or content|render matches '/<img/' %}
                     <div class="separated-content">{{ content|trim }}</div>
                 {% endif %} 
             {% endif %}