fix: PoiCardLight images overlapping container #474

Author: wazolab

components/PoisCard/PoiCardLight.vue

@@ -4,83 +4,118 @@ import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 import UIPicture from '~/components/UI/UIPicture.vue'
 import type { ApiPoi } from '~/lib/apiPois'
 
-//
-// Props
-//
 const props = withDefaults(defineProps<{
   notebook?: boolean
   poi: ApiPoi
 }>(), {
   notebook: false,
 })
 
-//
-// Composables
-//
 const { featureName } = useFeature(toRef(() => props.poi), { type: 'popup' })
 
-//
-// Data
-//
 const colorFill = ref(props.poi.properties.display?.color_fill || 'black')
 const colorLine = ref(props.poi.properties.display?.color_line || 'black')
 const websiteDetails = ref(props.poi.properties.editorial && props.poi.properties.editorial['website:details'])
 </script>
 
 <template>
-  <div
-    :id="`PoiCardLight-${poi.properties.metadata.id}`"
-    class="tw-flex-col md:tw-flex-row tw-h-auto tw-shrink-0 tw-flex tw-items-start tw-gap-4 tw-justify-between tw-box-border tw-w-full tw-border-gray-300 tw-border-t tw-pt-4 first-of-type:tw-border-t-0"
-  >
+  <article :id="`PoiCardLight-${poi.properties.metadata.id}`">
     <div>
-      <div class="tw-flex tw-items-center tw-shrink-0 tw-mb-2">
-        <h3
-          class="tw-block tw-text-xl tw-font-semibold tw-leading-tight tw-flex tw-items-center tw-gap-2"
-          :style="`color:${colorLine}`"
-        >
-          <TeritorioIconBadge
-            v-if="props.poi.properties.display?.icon || poi.properties.display?.text"
-            :color-fill="colorFill"
-            :picto="props.poi.properties.display?.icon"
-            size="lg"
-            :image="undefined"
-            :text="poi.properties.display?.text"
-          />
+      <header>
+        <TeritorioIconBadge
+          v-if="props.poi.properties.display?.icon || poi.properties.display?.text"
+          :color-fill="colorFill"
+          :picto="props.poi.properties.display?.icon"
+          :image="undefined"
+          :text="poi.properties.display?.text"
+          size="lg"
+        />
+        <h3 class="tw-text-xl tw-font-semibold tw-leading-tight" :style="`color:${colorLine}`">
           {{ featureName }}
         </h3>
 
         <a
           v-if="Boolean(websiteDetails)"
-          class="tw-ml-6 md:tw-ml-8 tw-px-3 tw-py-1.5 tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors tw-rounded-md"
           :href="websiteDetails"
+          class="tw-text-xs tw-text-zinc-800 tw-bg-zinc-100 hover:tw-bg-zinc-200 focus:tw-bg-zinc-200 tw-transition tw-transition-colors"
           rel="noopener noreferrer"
           target="_blank"
         >
           {{ $t('poiCard.details') }}
         </a>
-      </div>
-      <Fields
-        :fields="
-          (poi.properties.editorial && poi.properties.editorial.popup_fields)
-            || []
-        "
-        :properties="poi.properties"
-        :details="websiteDetails"
-        :geom="poi.geometry"
-      />
+      </header>
+
+      <section>
+        <Fields
+          :fields="(poi.properties.editorial && poi.properties.editorial.popup_fields) || []"
+          :properties="poi.properties"
+          :details="websiteDetails"
+          :geom="poi.geometry"
+        />
+      </section>
     </div>
+
     <UIPicture
       v-if="poi.properties.image && poi.properties.image.length > 0"
-      class="tw-w-full tw-h-32 md:tw-w-32 md:tw-h-32 tw-z-10 tw-contents"
       :src="poi.properties.image[0]"
       :alt="$t('poiCard.thumbnail')"
       media-size="8rem"
     />
-  </div>
+  </article>
 </template>
 
 <style scoped>
-h3 {
-  margin-bottom: 0 !important;
+article {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+article:not(:last-of-type) {
+  border-bottom: 1px solid #d1d5db;
+  padding-bottom: 1rem;
+}
+
+article > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+header {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+header > a {
+  padding: 0.5rem;
+  border-radius: 4px;
+  margin-left: auto;
+  align-self: flex-start;
+}
+
+header > h3 {
+  margin: 0;
+}
+
+article > picture:deep(img) {
+  width: 100%;
+  max-height: 280px;
+  object-fit: scale-down;
+}
+
+@media (width >= 768px) {
+  article {
+    flex-direction: row;
+  }
+
+  article > div {
+    flex: 70%;
+  }
+
+  article > picture {
+    flex: 30%;
+  }
 }
 </style>

components/PoisCard/PoisDeck.vue

@@ -16,7 +16,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div v-if="isCardLight" class="tw-flex tw-justify-between tw-flex-wrap tw-gap-6">
+  <div v-if="isCardLight" class="pois-deck">
     <component
       :is="PoiCardLight"
       v-for="item in pois"
@@ -25,7 +25,7 @@ const emit = defineEmits<{
       class="tw-grow-1 poi-deck"
     />
   </div>
-  <div v-else class="tw-flex tw-justify-between tw-flex-wrap tw-gap-6">
+  <div v-else class="pois-deck">
     <component
       :is="PoiCard"
       v-for="item in pois"
@@ -39,3 +39,11 @@ const emit = defineEmits<{
     />
   </div>
 </template>
+
+<style lang="css" scoped>
+.pois-deck {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

components/UI/UIPicture.vue

@@ -100,7 +100,6 @@ export default defineComponent({
           // sizes: nSources.value[0].sizes,
           sizes: props.mediaSize, // Monkey path, replace: nSources.value[0].sizes,
           srcset: nSources.value[0].srcset,
-          style: 'tw-w-full',
         }),
       ])
   },