mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
fix: recipe timeline UI glitches (#2519)
* 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
GitHub
parent
5213a61d9b
commit
5c5432304f
@ -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
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -11,28 +11,29 @@
|
|||||||
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
||||||
</v-chip>
|
</v-chip>
|
||||||
</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-row>
|
<v-card-title class="background">
|
||||||
<v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
|
<v-row>
|
||||||
<UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
|
<v-col align-self="center" :cols="useMobileFormat ? 'auto' : '2'" :class="attrs.avatar.class">
|
||||||
</v-col>
|
<UserAvatar :user-id="event.userId" :size="attrs.avatar.size" />
|
||||||
<v-col v-if="useMobileFormat" align-self="center" class="pr-0">
|
</v-col>
|
||||||
<v-chip label>
|
<v-col v-if="useMobileFormat" align-self="center" class="pr-0">
|
||||||
<v-icon> {{ $globals.icons.calendar }} </v-icon>
|
<v-chip label>
|
||||||
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
<v-icon> {{ $globals.icons.calendar }} </v-icon>
|
||||||
</v-chip>
|
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
||||||
</v-col>
|
</v-chip>
|
||||||
<v-col v-else cols="9" style="margin: auto; text-align: center;">
|
</v-col>
|
||||||
{{ event.subject }}
|
<v-col v-else cols="9" style="margin: auto; text-align: center;">
|
||||||
</v-col>
|
{{ event.subject }}
|
||||||
<v-spacer />
|
</v-col>
|
||||||
<v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
|
<v-spacer />
|
||||||
<RecipeTimelineContextMenu
|
<v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
|
||||||
|
<RecipeTimelineContextMenu
|
||||||
v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
|
v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
|
||||||
:menu-top="false"
|
:menu-top="false"
|
||||||
:event="event"
|
:event="event"
|
||||||
@ -48,48 +49,47 @@
|
|||||||
}"
|
}"
|
||||||
@update="$emit('update')"
|
@update="$emit('update')"
|
||||||
@delete="$emit('delete')"
|
@delete="$emit('delete')"
|
||||||
/>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-card-title>
|
|
||||||
<v-card-text v-if="showRecipeCards && recipe">
|
|
||||||
<v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
|
|
||||||
<v-col align-self="center" class="pa-0">
|
|
||||||
<RecipeCardMobile
|
|
||||||
:vertical="useMobileFormat"
|
|
||||||
:name="recipe.name"
|
|
||||||
:slug="recipe.slug"
|
|
||||||
:description="recipe.description"
|
|
||||||
:rating="recipe.rating"
|
|
||||||
:image="recipe.image"
|
|
||||||
:recipe-id="recipe.id"
|
|
||||||
:is-flat="true"
|
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card-text>
|
</v-card-title>
|
||||||
</v-sheet>
|
<v-card-text v-if="showRecipeCards && recipe" class="background">
|
||||||
<v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
|
<v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%;">
|
||||||
<v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
|
<v-col align-self="center" class="pa-0">
|
||||||
<v-row>
|
<RecipeCardMobile
|
||||||
<v-col>
|
:vertical="useMobileFormat"
|
||||||
<strong v-if="useMobileFormat">{{ event.subject }}</strong>
|
:name="recipe.name"
|
||||||
<v-img
|
:slug="recipe.slug"
|
||||||
v-if="eventImageUrl"
|
:description="recipe.description"
|
||||||
:src="eventImageUrl"
|
:rating="recipe.rating"
|
||||||
min-height="50"
|
:image="recipe.image"
|
||||||
:height="hideImage ? undefined : 'auto'"
|
:recipe-id="recipe.id"
|
||||||
:max-height="attrs.image.maxHeight"
|
:is-flat="true"
|
||||||
contain
|
/>
|
||||||
:class=attrs.image.class
|
</v-col>
|
||||||
@error="hideImage = true"
|
</v-row>
|
||||||
/>
|
</v-card-text>
|
||||||
<div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
|
<v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
|
||||||
{{ event.eventMessage }}
|
<v-card-text class="background">
|
||||||
</div>
|
<v-row>
|
||||||
</v-col>
|
<v-col>
|
||||||
</v-row>
|
<strong v-if="useMobileFormat">{{ event.subject }}</strong>
|
||||||
</v-card-text>
|
<v-img
|
||||||
|
v-if="eventImageUrl"
|
||||||
|
:src="eventImageUrl"
|
||||||
|
min-height="50"
|
||||||
|
:height="hideImage ? undefined : 'auto'"
|
||||||
|
:max-height="attrs.image.maxHeight"
|
||||||
|
contain
|
||||||
|
:class=attrs.image.class
|
||||||
|
@error="hideImage = true"
|
||||||
|
/>
|
||||||
|
<div v-if="event.eventMessage" :class="useMobileFormat ? 'text-caption' : ''">
|
||||||
|
{{ event.eventMessage }}
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-timeline-item>
|
</v-timeline-item>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user