mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-07-18 21:50:16 -04:00
feat: ui fixes & backup link on onboarding screen (#7743)
This commit is contained in:
Arsène Reymond
GitHub
@@ -89,7 +89,7 @@
|
||||
</v-expansion-panels>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<AppLoader v-else waiting-text="" />
|
||||
<AppLoader v-else />
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -158,6 +158,7 @@
|
||||
<AppLoader
|
||||
v-if="loading"
|
||||
:loading="loading"
|
||||
:waiting-text="$t('general.loading-recipes')"
|
||||
/>
|
||||
</v-fade-transition>
|
||||
<AppScrollToTop />
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
rows="4"
|
||||
/>
|
||||
<div v-if="childRecipes?.length">
|
||||
<v-card-text class="pt-6 pb-0">
|
||||
<v-card-text class="pt-6 pb-0 text-title-medium">
|
||||
{{ $t('recipe.include-linked-recipes') }}
|
||||
</v-card-text>
|
||||
<v-list>
|
||||
@@ -45,14 +45,13 @@
|
||||
</v-list>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="5">
|
||||
<v-menu
|
||||
v-model="datePickerMenu"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
max-width="290px"
|
||||
>
|
||||
<template #activator="{ props: activatorProps }">
|
||||
<v-text-field
|
||||
@@ -60,6 +59,8 @@
|
||||
:prepend-icon="$globals.icons.calendar"
|
||||
v-bind="activatorProps"
|
||||
readonly
|
||||
density="compact"
|
||||
min-width="160"
|
||||
/>
|
||||
</template>
|
||||
<v-date-picker
|
||||
@@ -72,7 +73,7 @@
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col cols="auto" align-self="center">
|
||||
<v-col cols="auto">
|
||||
<AppButtonUpload
|
||||
v-if="!newTimelineEventImage"
|
||||
class="ml-auto"
|
||||
@@ -93,7 +94,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
|
||||
<v-col cols="12" align-self="center">
|
||||
<v-col cols="12">
|
||||
<ImageCropper
|
||||
:img="newTimelineEventImagePreviewUrl"
|
||||
cropper-height="20vh"
|
||||
@@ -115,16 +116,17 @@
|
||||
<v-btn
|
||||
rounded
|
||||
variant="outlined"
|
||||
size="x-large"
|
||||
size="large"
|
||||
v-bind="tooltipProps"
|
||||
class="font-weight-400"
|
||||
style="border-color: rgb(var(--v-theme-primary));"
|
||||
@click="madeThisDialog = true"
|
||||
>
|
||||
<v-icon start size="large" color="primary">
|
||||
{{ $globals.icons.calendar }}
|
||||
</v-icon>
|
||||
<span class="text-body-1 opacity-80">
|
||||
<b>{{ $t("general.last-made") }}</b>
|
||||
<span class="opacity-80">
|
||||
<strong>{{ $t("general.last-made") }}</strong>
|
||||
<br>
|
||||
{{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
|
||||
</span>
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
:recipe="recipe"
|
||||
/>
|
||||
<v-card
|
||||
:width="landscape ? '100%' : '50%'"
|
||||
:width="landscape || !recipe.image ? '100%' : '50%'"
|
||||
flat
|
||||
class="d-flex flex-column justify-center align-center"
|
||||
>
|
||||
<v-card-text class="w-100">
|
||||
<v-card-text>
|
||||
<div class="d-flex flex-column align-center">
|
||||
<v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
|
||||
{{ recipe.name }}
|
||||
@@ -67,7 +67,7 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<RecipePageInfoCardImage
|
||||
v-if="!landscape"
|
||||
v-if="!landscape && recipe.image"
|
||||
:recipe="recipe"
|
||||
max-width="50%"
|
||||
class="my-auto"
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
<!-- Recipe Tools Edit -->
|
||||
<v-card
|
||||
v-if="isEditForm"
|
||||
class="mt-2"
|
||||
class="mt-4"
|
||||
>
|
||||
<v-card-title class="py-2">
|
||||
{{ $t('tool.required-tools') }}
|
||||
@@ -64,7 +64,6 @@
|
||||
<RecipeOrganizerSelector
|
||||
v-model="recipe.tools"
|
||||
selector-type="tools"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
>
|
||||
<v-container fluid class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
|
||||
<div v-if="state.loading.parser" class="my-6">
|
||||
<AppLoader waiting-text="" class="my-6" />
|
||||
<AppLoader class="my-6" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
>
|
||||
<v-icon
|
||||
:size="small ? 'small' : 'large'"
|
||||
left
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
{{ $globals.icons.knife }}
|
||||
@@ -64,7 +64,7 @@
|
||||
>
|
||||
<v-icon
|
||||
:size="small ? 'small' : 'large'"
|
||||
left
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
{{ $globals.icons.potSteam }}
|
||||
|
||||
@@ -18,13 +18,11 @@
|
||||
bordered
|
||||
>
|
||||
<v-btn
|
||||
class="rounded-circle"
|
||||
size="small"
|
||||
color="info"
|
||||
variant="text"
|
||||
v-bind="activatorProps"
|
||||
icon
|
||||
:prepend-icon="$globals.icons.filter"
|
||||
>
|
||||
<v-icon> {{ $globals.icons.filter }} </v-icon>
|
||||
{{ $t("general.filter") }}
|
||||
</v-btn>
|
||||
</v-badge>
|
||||
</template>
|
||||
@@ -39,28 +37,24 @@
|
||||
<v-list-item
|
||||
v-for="option, idx in eventTypeFilterState"
|
||||
:key="idx"
|
||||
:active="option.checked"
|
||||
:color="option.checked ? 'primary' : undefined"
|
||||
@click="toggleEventTypeOption(option.value)"
|
||||
>
|
||||
<v-checkbox
|
||||
:model-value="option.checked"
|
||||
color="primary"
|
||||
readonly
|
||||
hide-details
|
||||
@click="toggleEventTypeOption(option.value)"
|
||||
>
|
||||
<template #label>
|
||||
<v-icon start>
|
||||
{{ option.icon }}
|
||||
</v-icon>
|
||||
{{ option.label }}
|
||||
</template>
|
||||
</v-checkbox>
|
||||
<template #prepend>
|
||||
<v-icon>
|
||||
{{ option.icon }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<v-list-item-title>
|
||||
{{ option.label }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider class="mx-2" />
|
||||
<div
|
||||
v-if="timelineEvents.length"
|
||||
id="timeline-container"
|
||||
@@ -213,7 +207,10 @@ async function deleteTimelineEvent(index: number) {
|
||||
}
|
||||
|
||||
async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
|
||||
const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
|
||||
let qf = "";
|
||||
if (recipeIds.length) {
|
||||
qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
|
||||
}
|
||||
const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
|
||||
return data?.items || [];
|
||||
}
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
<RecipeTimeline
|
||||
v-model="showTimeline"
|
||||
:query-filter="timelineAttrs.queryFilter"
|
||||
max-height="60vh"
|
||||
/>
|
||||
</BaseDialog>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
style="font-size: larger;"
|
||||
>
|
||||
<v-icon
|
||||
size="x-large"
|
||||
size="large"
|
||||
start
|
||||
color="primary"
|
||||
>
|
||||
|
||||
@@ -25,7 +25,7 @@ function onScroll() {
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
document.documentElement.scrollTop = 0;
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -3,34 +3,21 @@
|
||||
class="mx-auto my-3 justify-center"
|
||||
style="display: flex;"
|
||||
>
|
||||
<div style="display: inline;">
|
||||
<div class="text-center">
|
||||
<v-progress-circular
|
||||
:width="size.width"
|
||||
:size="size.size"
|
||||
color="primary-lighten-2"
|
||||
indeterminate
|
||||
>
|
||||
<div class="text-center">
|
||||
<v-icon
|
||||
:size="size.icon"
|
||||
color="primary-lighten-2"
|
||||
>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
<div
|
||||
v-if="large"
|
||||
class="text-small"
|
||||
>
|
||||
<slot>
|
||||
{{ (small || tiny) ? "" : waitingText }}
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<v-icon
|
||||
:size="size.icon"
|
||||
color="primary-lighten-2"
|
||||
>
|
||||
{{ $globals.icons.primary }}
|
||||
</v-icon>
|
||||
</v-progress-circular>
|
||||
<div
|
||||
v-if="!large"
|
||||
class="text-small"
|
||||
>
|
||||
<div :class="large ? 'text-title-large mt-5' : 'text-body-large mt-3'">
|
||||
<slot>
|
||||
{{ (small || tiny) ? "" : waitingTextCalculated }}
|
||||
</slot>
|
||||
@@ -97,5 +84,5 @@ const size = computed(() => {
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
|
||||
const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading") : props.waitingText;
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user