fix: wrong close button on PoiCard in Notebook #340

teritorio · Jul 30, 2024 · 74b2f5e · 74b2f5e
1 parent 0052d61
commit 74b2f5e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/components/Home/Home.vue b/components/Home/Home.vue
@@ -639,6 +639,7 @@ function handlePoiCardClose() {
             && selectedFeature.properties.metadata
             && showPoi
         "
+        :can-close="device.smallScreen"
         :poi="selectedFeature"
         class="tw-grow-0"
         :explorer-mode-enabled="explorerModeEnabled"
@@ -668,6 +669,7 @@ function handlePoiCardClose() {
               && selectedFeature.properties.metadata
               && showPoi
           "
+          :can-close="device.smallScreen"
           :poi="selectedFeature"
           class="tw-grow-0 tw-text-left tw-h-full"
           :explorer-mode-enabled="explorerModeEnabled"

diff --git a/components/PoisCard/PoiCard.vue b/components/PoisCard/PoiCard.vue
@@ -18,6 +18,10 @@ export default defineNuxtComponent({
   },
 
   props: {
+    canClose: {
+      type: Boolean,
+      default: true,
+    },
     poi: {
       type: Object as PropType<ApiPoi>,
       required: true,
@@ -66,7 +70,7 @@ export default defineNuxtComponent({
     class="poiDescription tw-z-10 tw-flex tw-flex-col tw-w-full md:tw-max-w-xl tw-mx-0 tw-overflow-y-auto tw-shadow-md tw-pointer-events-auto md:tw-flex-row md:tw-w-auto md:tw-mx-auto md:tw-rounded-xl tw-bg-white"
   >
     <UIButton
-      v-show="device.smallScreen"
+      v-show="canClose"
       id="close-poi-card"
       :color="device.smallScreen ? '#ffffff' : '#000000'"
       :style="{ backgroundColor: device.smallScreen ? 'rgb(0 0 0 / 55%)' : 'transparent' }"

diff --git a/components/PoisCard/PoisDeck.vue b/components/PoisCard/PoisDeck.vue
@@ -23,6 +23,7 @@ defineEmits<{
       :is="isCardLight ? PoiCardLight : PoiCard"
       v-for="item in pois"
       :key="item.properties.metadata.id"
+      :can-close="false"
       :poi="item"
       class="tw-grow-1 poi-deck"
       :explorer-mode-enabled="explorerModeEnabled"