mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

first overlay working

Browse Source
This commit is contained in:
vabene1111
2024-03-22 09:15:33 +01:00
committed by smilerz
parent 49a437b103
commit 394d7d73ed
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
vue3/src/components/display/RecipeCard.vue
View File

@@ -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>

7
vue3/src/vuetify.ts
View File

@@ -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',