Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 03:55:22 +02:00
Code Issues Releases Activity

fix: recipe page warnings (#5609)

Browse source
This commit is contained in:
Kuchenpirat 2025-06-30 17:10:39 +02:00 • committed by GitHub
parent 47eb1ebbb1
commit 6540bfacfe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 94 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

185
frontend/components/Domain/Recipe/RecipeCard.vue
View file

@ -1,101 +1,104 @@
<template> <template>
<!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
<v-lazy> <v-lazy>
<v-hover <div>
v-slot="{ isHovering, props }" <v-hover
:open-delay="50" v-slot="{ isHovering, props }"
> :open-delay="50"
<v-card
v-bind="props"
:class="{ 'on-hover': isHovering }"
:style="{ cursor }"
:elevation="isHovering ? 12 : 2"
:to="recipeRoute"
:min-height="imageHeight + 75"
@click.self="$emit('click')"
> >
<RecipeCardImage <v-card
:icon-size="imageHeight" v-bind="props"
:height="imageHeight" :class="{ 'on-hover': isHovering }"
:slug="slug" :style="{ cursor }"
:recipe-id="recipeId" :elevation="isHovering ? 12 : 2"
size="small" :to="recipeRoute"
:image-version="image" :min-height="imageHeight + 75"
@click.self="$emit('click')"
> >
<v-expand-transition v-if="description"> <RecipeCardImage
<div :icon-size="imageHeight"
v-if="isHovering" :height="imageHeight"
class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal" :slug="slug"
style="height: 100%" :recipe-id="recipeId"
> size="small"
<v-card-text class="v-card--text-show white--text"> :image-version="image"
<div class="descriptionWrapper">
<SafeMarkdown :source="description" />
</div>
</v-card-text>
</div>
</v-expand-transition>
</RecipeCardImage>
<v-card-title class="mb-n3 px-4">
<div class="headerClass">
{{ name }}
</div>
</v-card-title>
<slot name="actions">
<v-card-actions
v-if="showRecipeContent"
class="px-1"
> >
<RecipeFavoriteBadge <v-expand-transition v-if="description">
v-if="isOwnGroup" <div
class="absolute" v-if="isHovering"
:recipe-id="recipeId" class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
show-always style="height: 100%"
/> >
<div v-else class="px-1" /> <!-- Empty div to keep the layout consistent --> <v-card-text class="v-card--text-show white--text">
<div class="descriptionWrapper">
<SafeMarkdown :source="description" />
</div>
</v-card-text>
</div>
</v-expand-transition>
</RecipeCardImage>
<v-card-title class="mb-n3 px-4">
<div class="headerClass">
{{ name }}
</div>
</v-card-title>
<RecipeRating <slot name="actions">
class="ml-n2" <v-card-actions
:value="rating" v-if="showRecipeContent"
:recipe-id="recipeId" class="px-1"
:slug="slug" >
small <RecipeFavoriteBadge
/> v-if="isOwnGroup"
<v-spacer /> class="absolute"
<RecipeChips :recipe-id="recipeId"
:truncate="true" show-always
:items="tags" />
:title="false" <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
:limit="2"
small
url-prefix="tags"
v-bind="$attrs"
/>
<!-- If we're not logged-in, no items display, so we hide this menu --> <RecipeRating
<RecipeContextMenu class="ml-n2"
v-if="isOwnGroup" :value="rating"
color="grey-darken-2" :recipe-id="recipeId"
:slug="slug" :slug="slug"
:name="name" small
:recipe-id="recipeId" />
:use-items="{ <v-spacer />
delete: false, <RecipeChips
edit: false, :truncate="true"
download: true, :items="tags"
mealplanner: true, :title="false"
shoppingList: true, :limit="2"
print: false, small
printPreferences: false, url-prefix="tags"
share: true, v-bind="$attrs"
}" />
@delete="$emit('delete', slug)"
/> <!-- If we're not logged-in, no items display, so we hide this menu -->
</v-card-actions> <RecipeContextMenu
</slot> v-if="isOwnGroup"
<slot /> color="grey-darken-2"
</v-card> :slug="slug"
</v-hover> :name="name"
:recipe-id="recipeId"
:use-items="{
delete: false,
edit: false,
download: true,
mealplanner: true,
shoppingList: true,
print: false,
printPreferences: false,
share: true,
}"
@delete="$emit('delete', slug)"
/>
</v-card-actions>
</slot>
<slot />
</v-card>
</v-hover>
</div>
</v-lazy> </v-lazy>
</template> </template>