From f132eacb83aeb7b0cc59ac3508d0d340374b1902 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 22 Mar 2024 09:15:33 +0100
Subject: [PATCH] first overlay working

---
 vue3/src/components/display/RecipeCard.vue | 35 +++++++++++++++-------
 vue3/src/vuetify.ts                        |  7 +++--
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/vue3/src/components/display/RecipeCard.vue b/vue3/src/components/display/RecipeCard.vue
index 067ac8411..3e6f4e40e 100644
--- a/vue3/src/components/display/RecipeCard.vue
+++ b/vue3/src/components/display/RecipeCard.vue
@@ -1,14 +1,28 @@
 <template>
     <template v-if="!loading">
         <v-card :to="`/recipe/${recipe.id}`" :style="{'height': height}">
+            <v-tooltip
+                class="align-center justify-center"
+                location="top center" origin="overlap"
+                no-click-animation
+                :open-on-hover="recipe.description != null && recipe.description != ''"
+                contained
+                opacity="2%"
+            >
+                <template v-slot:activator="{ props }">
+                    <v-img v-if="recipe.image != null" v-bind="props"
+                           cover
+                           height="60%"
+                           :src="recipe.image"
+                    ></v-img>
+                    <v-img v-else src="../../assets/recipe_no_image.svg" cover v-bind="props"
+                           height="60%"></v-img>
 
-            <v-img v-if="recipe.image != null"
-                   cover
-                   height="60%"
-                   :src="recipe.image"
-            ></v-img>
-            <v-img v-else src="../../assets/recipe_no_image.svg" cover
-                   height="60%"></v-img>
+                </template>
+                <div v-if="recipe.description != null && recipe.description != ''">
+                    {{recipe.description}}
+                </div>
+            </v-tooltip>
 
             <v-card-item>
                 <v-card-title>{{ recipe.name }}</v-card-title>
@@ -34,15 +48,16 @@
                     </div>
                 </v-row>
 
-                <div>{{ recipe.description }}</div>
             </v-card-text>
 
         </v-card>
     </template>
     <template v-else>
         <v-card :style="{'height': height}">
-            <v-img  src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
-            <v-card-title><v-skeleton-loader type="heading"></v-skeleton-loader></v-card-title>
+            <v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
+            <v-card-title>
+                <v-skeleton-loader type="heading"></v-skeleton-loader>
+            </v-card-title>
             <v-card-text>
                 <v-skeleton-loader type="subtitle"></v-skeleton-loader>
             </v-card-text>
diff --git a/vue3/src/vuetify.ts b/vue3/src/vuetify.ts
index 916179b29..e86d2ce0b 100644
--- a/vue3/src/vuetify.ts
+++ b/vue3/src/vuetify.ts
@@ -8,9 +8,10 @@ import {createVuetify} from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
     defaults: {
-        VCard: {
-            class: 'overflow-visible' // this is needed so that vue-multiselect options show above a card, vuetify uses overlay container to avoid this
-        }
+        // disabled as this leads to cards overflowing if not careful, manually set on cards containing a multiselect until proper solution is found
+        // VCard: {
+        //     class: 'overflow-visible' // this is needed so that vue-multiselect options show above a card, vuetify uses overlay container to avoid this
+        // }
     },
     theme: {
         defaultTheme: 'light',