Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-10-31 02:03:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: recipe timeline UI glitches (#2519)

Browse Source 
* fix invalid undefined prop

* fixed weird rendering

* made items pop more against background

* fixed invalid v-if

* fixed indentation
This commit is contained in:
Michael Genson
2023-08-23 12:30:59 -05:00
committed by GitHub
parent 5213a61d9b
commit 5c5432304f
4 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
:image-version="image" :image-version="image"
/> />
</v-img> </v-img>
<v-list-item three-line class="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 size="125" class="v-mobile-img rounded-sm my-0"> <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
<RecipeCardImage <RecipeCardImage

4
frontend/components/Domain/Recipe/RecipeTimeline.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div :style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''" @scroll="onScroll($event)"> <div style="height: 100%;">
<v-row class="my-0 mx-7"> <v-row class="my-0 mx-7">
<v-spacer /> <v-spacer />
<v-col class="text-right"> <v-col class="text-right">
@@ -8,12 +8,14 @@
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>
<v-divider class="mx-2" />
<div <div
v-if="timelineEvents.length" v-if="timelineEvents.length"
id="timeline-container" id="timeline-container"
height="fit-content" height="fit-content"
width="100%" width="100%"
class="px-1" class="px-1"
:style="maxHeight ? `max-height: ${maxHeight}; overflow-y: auto;` : ''"
> >
<v-timeline :dense="$vuetify.breakpoint.smAndDown" class="timeline"> <v-timeline :dense="$vuetify.breakpoint.smAndDown" class="timeline">
<RecipeTimelineItem <RecipeTimelineItem

2
frontend/components/Domain/Recipe/RecipeTimelineBadge.vue
View File

@@ -15,7 +15,7 @@
</v-icon> </v-icon>
</v-btn> </v-btn>
<BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%"> <BaseDialog v-model="showTimeline" :title="timelineAttrs.title" :icon="$globals.icons.timelineText" width="70%">
<RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="70vh" /> <RecipeTimeline v-model="showTimeline" :query-filter="timelineAttrs.queryFilter" max-height="60vh" />
</BaseDialog> </BaseDialog>
</template> </template>

14
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View File

@@ -13,10 +13,11 @@
</template> </template>
<v-card <v-card
hover hover
:to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`" :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
@click="$emit('selected')"> @click="$emit('selected')"
<v-sheet> class="elevation-12"
<v-card-title class="bg-primary"> >
<v-card-title class="background">
<v-row> <v-row>
<v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class"> <v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
<UserAvatar :user-id="event.userId" :size="attrs.avatar.size" /> <UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
@@ -52,7 +53,7 @@
</v-col> </v-col>
</v-row> </v-row>
</v-card-title> </v-card-title>
<v-card-text v-if="showRecipeCards && recipe"> <v-card-text v-if="showRecipeCards && recipe" class="background">
<v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;"> <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
<v-col align-self="center" class="pa-0"> <v-col align-self="center" class="pa-0">
<RecipeCardMobile <RecipeCardMobile
@@ -68,9 +69,8 @@
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
</v-sheet>
<v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" /> <v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
<v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)"> <v-card-text class="background">
<v-row> <v-row>
<v-col> <v-col>
<strong v-if="useMobileFormat">{{ event.subject }}</strong> <strong v-if="useMobileFormat">{{ event.subject }}</strong>