- Creazione "AbitareGliIblei"

- Mappa Interattiva con i markers

src/components/CMyCardService/CMyCardService.scss

@@ -153,4 +153,28 @@ $graytext: #555;
 .container_butt{
   display: flex;
   justify-content: space-between;
-}
+}
+
+.expand-fade-enter-active, .expand-fade-leave-active {
+  transition: height 0.3s ease, opacity 0.3s ease; /* Aggiunge transizioni per height e opacity */
+}
+
+.expand-fade-enter, .expand-fade-leave-to {
+  height: 0; /* Imposta l'altezza a 0 per l'uscita */
+  opacity: 0; /* Rende invisibile durante l'uscita */
+}
+
+.height-transition {
+  transition: height 0.3s ease-in-out;
+}
+
+.well-positioned-dialog {
+  width: 50vw; /* Imposta la larghezza al 50% della vista */
+  height: auto; /* Puoi regolare l'altezza come preferisci */
+  margin-left: auto; /* Allinea il dialogo a destra */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
+}
+
+.riempi {
+  width: 100%;
+}

src/components/CMyCardService/CMyCardService.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted, PropType, ref, watch, nextTick } from 'vue'
 
 import { CMyFieldDb } from '@/components/CMyFieldDb'
 import { CTitleBanner } from '@/components/CTitleBanner'
@@ -58,6 +58,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    showAnteprima: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   setup(props) {
 
@@ -143,6 +148,17 @@ export default defineComponent({
     const idnotif = computed(() => $route.query.idnotif ? $route.query.idnotif.toString() : '')
     const arrbookings = computed(() => calendarStore.findAllBookedByIdEvent(myrec.value._id))
 
+    const isSmall = ref(props.showAnteprima);
+
+    const cardRef = ref(<any>null)
+    const smallHeight = ref('30vh')
+    const largeHeight = ref('100vh')
+
+    const cardStyle = computed(() => ({
+      height: isSmall.value ? smallHeight.value : largeHeight.value,
+      transition: 'height 0.3s ease-in-out'
+    }))
+
     const filtercustom: any = computed(() => {
 
       let queryreact = {}
@@ -201,8 +217,18 @@ export default defineComponent({
       load()
     })
 
-    function mounted() {
+    async function mounted() {
       load()
+      await nextTick()
+        
+    }
+
+    function updateCard() {
+      if (cardRef.value) {
+        largeHeight.value = !isSmall.value ? `${cardRef.value.clientHeight}px` : largeHeight.value
+        if (isSmall.value)
+          smallHeight.value = `${cardRef.value.clientHeight}px`
+      }
     }
 
     function getlinkpage() {
@@ -610,9 +636,20 @@ export default defineComponent({
       tools.openUrl(tools.getLinkBotTelegram('', ''))
     }
 
+    const expandDialog = () => {
+      isSmall.value = false; // Cambia lo stato a 'non piccolo'
+    };
+
+    function toggleShowScheda() {
+      // updateCard()
+      isSmall.value = !isSmall.value
+    
+    }
+
     onMounted(mounted)
 
     return {
+      expandDialog,
       profile,
       tools,
       costanti,
@@ -659,6 +696,11 @@ export default defineComponent({
       extraparams,
       condividi,
       getTipodiAttivita,
+      isSmall,
+      cardStyle,
+      cardRef,
+      smallHeight,
+      toggleShowScheda,
     }
   }
 })