Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Tweak recipe card height to be consistent (#4150)

Browse Source 
Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson 2024-09-11 17:59:15 -05:00 committed by GitHub
parent dda6f297d8
commit f6cf58334f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 84 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/components/Domain/Recipe/RecipeCardMobile.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div :style="`height: ${height}`">
<v-expand-transition> <v-expand-transition>
<v-card <v-card
:ripple="false" :ripple="false"
@ -11,7 +12,7 @@
<v-img v-if="vertical" class="rounded-sm"> <v-img v-if="vertical" class="rounded-sm">
<RecipeCardImage <RecipeCardImage
:icon-size="100" :icon-size="100"
:height="150" :height="height"
:slug="slug" :slug="slug"
:recipe-id="recipeId" :recipe-id="recipeId"
small small
@ -20,10 +21,10 @@
</v-img> </v-img>
<v-list-item three-line :class="vertical ? 'px-2' : 'px-0'"> <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
<slot v-if="!vertical" name="avatar"> <slot v-if="!vertical" name="avatar">
<v-list-item-avatar tile width="125" height="avatarSize" class="v-mobile-img rounded-sm my-0"> <v-list-item-avatar tile :height="height" width="125" class="v-mobile-img rounded-sm my-0">
<RecipeCardImage <RecipeCardImage
:icon-size="100" :icon-size="100"
:height="avatarSize" :height="height"
:slug="slug" :slug="slug"
:recipe-id="recipeId" :recipe-id="recipeId"
:image-version="image" :image-version="image"
@ -32,11 +33,11 @@
</v-list-item-avatar> </v-list-item-avatar>
</slot> </slot>
<v-list-item-content class="py-0"> <v-list-item-content class="py-0">
<v-list-item-title class="mt-3 mb-1">{{ name }} </v-list-item-title> <v-list-item-title class="mt-1 mb-1 text-top">{{ name }}</v-list-item-title>
<v-list-item-subtitle> <v-list-item-subtitle class="ma-0 text-top">
<SafeMarkdown :source="description" /> <SafeMarkdown :source="description" />
</v-list-item-subtitle> </v-list-item-subtitle>
<div class="d-flex flex-wrap justify-start"> <div class="d-flex flex-wrap justify-start ma-0">
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" /> <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
</div> </div>
<div class="d-flex flex-wrap justify-end align-center"> <div class="d-flex flex-wrap justify-end align-center">
@ -78,6 +79,7 @@
<slot /> <slot />
</v-card> </v-card>
</v-expand-transition> </v-expand-transition>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -135,9 +137,13 @@ export default defineComponent({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
avatarSize: { height: {
type: [Number, String], type: [Number, String],
default: 125, default: 150,
},
imageHeight: {
type: [Number, String],
default: "fill-height",
}, },
}, },
setup(props) { setup(props) {

1
frontend/components/Domain/Recipe/RecipeCardSection.vue
View File

@ -104,7 +104,6 @@
:image="recipe.image" :image="recipe.image"
:tags="recipe.tags" :tags="recipe.tags"
:recipe-id="recipe.id" :recipe-id="recipe.id"
avatar-size="fill-height"
/> />
</v-lazy> </v-lazy>
</v-col> </v-col>