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

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

@ -1,83 +1,85 @@
<template> <template>
<v-expand-transition> <div :style="`height: ${height}`">
<v-card <v-expand-transition>
:ripple="false" <v-card
:class="isFlat ? 'mx-auto flat' : 'mx-auto'" :ripple="false"
:style="{ cursor }" :class="isFlat ? 'mx-auto flat' : 'mx-auto'"
hover :style="{ cursor }"
:to="$listeners.selected ? undefined : recipeRoute" hover
@click="$emit('selected')" :to="$listeners.selected ? undefined : recipeRoute"
> @click="$emit('selected')"
<v-img v-if="vertical" class="rounded-sm"> >
<RecipeCardImage <v-img v-if="vertical" class="rounded-sm">
:icon-size="100" <RecipeCardImage
:height="150" :icon-size="100"
:slug="slug" :height="height"
:recipe-id="recipeId" :slug="slug"
small :recipe-id="recipeId"
:image-version="image" small
/> :image-version="image"
</v-img> />
<v-list-item three-line :class="vertical ? 'px-2' : 'px-0'"> </v-img>
<slot v-if="!vertical" name="avatar"> <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
<v-list-item-avatar tile width="125" height="avatarSize" class="v-mobile-img rounded-sm my-0"> <slot v-if="!vertical" name="avatar">
<RecipeCardImage <v-list-item-avatar tile :height="height" width="125" class="v-mobile-img rounded-sm my-0">
:icon-size="100" <RecipeCardImage
:height="avatarSize" :icon-size="100"
:slug="slug" :height="height"
:recipe-id="recipeId"
:image-version="image"
small
/>
</v-list-item-avatar>
</slot>
<v-list-item-content class="py-0">
<v-list-item-title class="mt-3 mb-1">{{ name }} </v-list-item-title>
<v-list-item-subtitle>
<SafeMarkdown :source="description" />
</v-list-item-subtitle>
<div class="d-flex flex-wrap justify-start">
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
</div>
<div class="d-flex flex-wrap justify-end align-center">
<slot name="actions">
<RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :recipe-id="recipeId" show-always />
<RecipeRating
:class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
:value="rating"
:recipe-id="recipeId"
:slug="slug" :slug="slug"
:small="true" :recipe-id="recipeId"
:image-version="image"
small
/> />
<v-spacer></v-spacer> </v-list-item-avatar>
</slot>
<v-list-item-content class="py-0">
<v-list-item-title class="mt-1 mb-1 text-top">{{ name }}</v-list-item-title>
<v-list-item-subtitle class="ma-0 text-top">
<SafeMarkdown :source="description" />
</v-list-item-subtitle>
<div class="d-flex flex-wrap justify-start ma-0">
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
</div>
<div class="d-flex flex-wrap justify-end align-center">
<slot name="actions">
<RecipeFavoriteBadge v-if="isOwnGroup && showRecipeContent" :recipe-id="recipeId" show-always />
<RecipeRating
:class="isOwnGroup ? 'ml-auto' : 'ml-auto pb-2'"
:value="rating"
:recipe-id="recipeId"
:slug="slug"
:small="true"
/>
<v-spacer></v-spacer>
<!-- If we're not logged-in, no items display, so we hide this menu --> <!-- If we're not logged-in, no items display, so we hide this menu -->
<!-- We also add padding to the v-rating above to compensate --> <!-- We also add padding to the v-rating above to compensate -->
<RecipeContextMenu <RecipeContextMenu
v-if="isOwnGroup && showRecipeContent" v-if="isOwnGroup && showRecipeContent"
:slug="slug" :slug="slug"
:menu-icon="$globals.icons.dotsHorizontal" :menu-icon="$globals.icons.dotsHorizontal"
:name="name" :name="name"
:recipe-id="recipeId" :recipe-id="recipeId"
:use-items="{ :use-items="{
delete: false, delete: false,
edit: true, edit: true,
download: true, download: true,
mealplanner: true, mealplanner: true,
shoppingList: true, shoppingList: true,
print: false, print: false,
printPreferences: false, printPreferences: false,
share: true, share: true,
}" }"
@deleted="$emit('delete', slug)" @deleted="$emit('delete', slug)"
/> />
</slot> </slot>
</div> </div>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<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>