mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
UI/UX improvements (#2423)
* disable autofocus and hide keyboard on enter * improve a11y * fix non-translated string * improve recipeTimeline UI * format * fixes
This commit is contained in:
parent
1e693fdca6
commit
99e7717fec
@ -2,24 +2,24 @@
|
||||
<v-expand-transition>
|
||||
<v-card
|
||||
:ripple="false"
|
||||
class="mx-auto"
|
||||
:class="isFlat ? 'mx-auto flat' : 'mx-auto'"
|
||||
hover
|
||||
:to="$listeners.selected ? undefined : `/recipe/${slug}`"
|
||||
@click="$emit('selected')"
|
||||
>
|
||||
<v-img v-if="vertical">
|
||||
<v-img v-if="vertical" class="rounded-sm">
|
||||
<RecipeCardImage
|
||||
:icon-size="100"
|
||||
:height="75"
|
||||
:height="150"
|
||||
:slug="slug"
|
||||
:recipe-id="recipeId"
|
||||
small
|
||||
:image-version="image"
|
||||
/>
|
||||
</v-img>
|
||||
<v-list-item three-line>
|
||||
<v-list-item three-line class="px-0">
|
||||
<slot v-if="!vertical" name="avatar">
|
||||
<v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
|
||||
<v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
|
||||
<RecipeCardImage
|
||||
:icon-size="100"
|
||||
:height="125"
|
||||
@ -30,8 +30,8 @@
|
||||
/>
|
||||
</v-list-item-avatar>
|
||||
</slot>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="mb-1">{{ name }} </v-list-item-title>
|
||||
<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>
|
||||
@ -120,7 +120,11 @@ export default defineComponent({
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
isFlat: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { $auth } = useContext();
|
||||
@ -162,4 +166,9 @@ export default defineComponent({
|
||||
.text-top {
|
||||
align-self: start !important;
|
||||
}
|
||||
|
||||
.flat {
|
||||
box-shadow: none!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
@ -149,7 +149,7 @@
|
||||
:nudge-top="menuTop ? '5' : '0'"
|
||||
allow-overflow
|
||||
close-delay="125"
|
||||
open-on-hover
|
||||
:open-on-hover="$vuetify.breakpoint.mdAndUp"
|
||||
content-class="d-print-none"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
|
@ -62,7 +62,7 @@
|
||||
class="d-print-none d-flex px-2"
|
||||
:class="$vuetify.breakpoint.smAndDown ? 'justify-center' : 'justify-end'"
|
||||
>
|
||||
<v-switch v-model="wakeLock" small label="Keep Screen Awake" />
|
||||
<v-switch v-model="wakeLock" small :label="$t('recipe.screen-awake')" />
|
||||
</div>
|
||||
|
||||
<RecipePageComments
|
||||
|
@ -8,8 +8,7 @@
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider v-if="timelineEvents.length" />
|
||||
<v-card
|
||||
<div
|
||||
v-if="timelineEvents.length"
|
||||
id="timeline-container"
|
||||
height="fit-content"
|
||||
@ -27,13 +26,13 @@
|
||||
@delete="deleteTimelineEvent(index)"
|
||||
/>
|
||||
</v-timeline>
|
||||
</v-card>
|
||||
</div>
|
||||
<v-card v-else-if="!loading">
|
||||
<v-card-title class="justify-center pa-9">
|
||||
{{ $t("recipe.timeline-is-empty") }}
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
<div v-if="loading" class="pb-3">
|
||||
<div v-if="loading" class="mb-3">
|
||||
<AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,7 +41,7 @@
|
||||
:nudge-top="menuTop ? '5' : '0'"
|
||||
allow-overflow
|
||||
close-delay="125"
|
||||
open-on-hover
|
||||
:open-on-hover="!useMobileFormat"
|
||||
content-class="d-print-none"
|
||||
>
|
||||
<template #activator="{ on, attrs }">
|
||||
@ -121,6 +121,10 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
useMobileFormat: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
const domEditEventForm = ref<VForm>();
|
||||
|
@ -11,29 +11,33 @@
|
||||
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-sheet>
|
||||
<v-card-title>
|
||||
<v-row>
|
||||
<v-card
|
||||
hover
|
||||
:to="$listeners.selected ? undefined : `/recipe/${recipe.slug}`"
|
||||
@click="$emit('selected')">
|
||||
<v-sheet>
|
||||
<v-card-title class="bg-primary">
|
||||
<v-row>
|
||||
<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" />
|
||||
</v-col>
|
||||
<v-col v-if="useMobileFormat" align-self="center" class="pr-0">
|
||||
<v-chip label>
|
||||
<v-chip label>
|
||||
<v-icon> {{ $globals.icons.calendar }} </v-icon>
|
||||
{{ new Date(event.timestamp+"Z").toLocaleDateString($i18n.locale) }}
|
||||
</v-chip>
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col v-else cols="9" style="margin: auto; text-align: center;">
|
||||
{{ event.subject }}
|
||||
{{ event.subject }}
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
<v-col :cols="useMobileFormat ? 'auto' : '1'" class="px-0 pt-0">
|
||||
<RecipeTimelineContextMenu
|
||||
<RecipeTimelineContextMenu
|
||||
v-if="$auth.user && $auth.user.id == event.userId && event.eventType != 'system'"
|
||||
:menu-top="false"
|
||||
:event="event"
|
||||
:menu-icon="$globals.icons.dotsVertical"
|
||||
:use-mobile-format="useMobileFormat"
|
||||
fab
|
||||
color="transparent"
|
||||
:elevation="0"
|
||||
@ -44,13 +48,13 @@
|
||||
}"
|
||||
@update="$emit('update')"
|
||||
@delete="$emit('delete')"
|
||||
/>
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-card-title>
|
||||
<v-sheet v-if="showRecipeCards && recipe">
|
||||
<v-row class="pt-3 pb-7 mx-3" style="max-width: 100%;">
|
||||
<v-col align-self="center" class="pa-0">
|
||||
<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"
|
||||
@ -59,32 +63,33 @@
|
||||
:rating="recipe.rating"
|
||||
:image="recipe.image"
|
||||
:recipe-id="recipe.id"
|
||||
:is-flat="true"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-sheet>
|
||||
<v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage || (eventImageUrl && !hideImage))" />
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<strong v-if="useMobileFormat">{{ event.subject }}</strong>
|
||||
<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-row>
|
||||
</v-card-text>
|
||||
</v-sheet>
|
||||
<v-divider v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)" />
|
||||
<v-card-text v-if="showRecipeCards && recipe && (useMobileFormat || event.eventMessage)">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<strong v-if="useMobileFormat">{{ event.subject }}</strong>
|
||||
<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-sheet>
|
||||
</v-card>
|
||||
</v-timeline-item>
|
||||
</template>
|
||||
@ -191,3 +196,9 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-card::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
@ -26,7 +26,7 @@
|
||||
dense
|
||||
flat
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
background-color="primary lighten-1"
|
||||
background-color="primary darken-1"
|
||||
color="white"
|
||||
:placeholder="$t('search.search-hint')"
|
||||
>
|
||||
@ -35,7 +35,7 @@
|
||||
<v-btn v-else icon @click="activateSearch">
|
||||
<v-icon> {{ $globals.icons.search }}</v-icon>
|
||||
</v-btn>
|
||||
<v-btn v-if="$auth.loggedIn" text @click="$auth.logout()">
|
||||
<v-btn v-if="$auth.loggedIn" :text="$vuetify.breakpoint.smAndUp" :icon="$vuetify.breakpoint.xs" @click="$auth.logout()">
|
||||
<v-icon :left="$vuetify.breakpoint.smAndUp">{{ $globals.icons.logout }}</v-icon>
|
||||
{{ $vuetify.breakpoint.smAndUp ? $t("user.logout") : "" }}
|
||||
</v-btn>
|
||||
|
@ -531,6 +531,7 @@
|
||||
"recipe-yield": "Recipe Yield",
|
||||
"unit": "Unit",
|
||||
"upload-image": "Upload image",
|
||||
"screen-awake": "Keep Screen Awake",
|
||||
"remove-image": "Remove image"
|
||||
},
|
||||
"search": {
|
||||
@ -1114,4 +1115,4 @@
|
||||
"cookbook-name": "Cookbook Name",
|
||||
"cookbook-with-name": "Cookbook {0}"
|
||||
}
|
||||
}
|
||||
}
|
@ -4,14 +4,15 @@
|
||||
<form class="search-box pa-2" @submit.prevent="search">
|
||||
<div class="d-flex justify-center my-2">
|
||||
<v-text-field
|
||||
ref="input"
|
||||
v-model="state.search"
|
||||
outlined
|
||||
autofocus
|
||||
hide-details
|
||||
clearable
|
||||
color="primary"
|
||||
:placeholder="$tc('search.search-placeholder')"
|
||||
:prepend-inner-icon="$globals.icons.search"
|
||||
@keyup.enter="hideKeyboard"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-row">
|
||||
@ -132,7 +133,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, useRouter, onMounted, useContext, computed } from "@nuxtjs/composition-api";
|
||||
import { ref, defineComponent, useRouter, onMounted, useContext, computed, Ref } from "@nuxtjs/composition-api";
|
||||
import { watchDebounced } from "@vueuse/shared";
|
||||
import SearchFilter from "~/components/Domain/SearchFilter.vue";
|
||||
import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
|
||||
@ -205,6 +206,12 @@ export default defineComponent({
|
||||
return array.map((item) => item.id);
|
||||
}
|
||||
|
||||
function hideKeyboard() {
|
||||
input.value.blur()
|
||||
}
|
||||
|
||||
const input: Ref<any> = ref(null);
|
||||
|
||||
async function search() {
|
||||
await router.push({
|
||||
query: {
|
||||
@ -432,6 +439,8 @@ export default defineComponent({
|
||||
|
||||
sortable,
|
||||
toggleOrderDirection,
|
||||
hideKeyboard,
|
||||
input,
|
||||
|
||||
selectedCategories,
|
||||
selectedFoods,
|
||||
|
@ -2,7 +2,7 @@
|
||||
<v-container
|
||||
fill-height
|
||||
fluid
|
||||
class="d-flex justify-center align-center"
|
||||
class="d-flex justify-center align-center flex-column"
|
||||
:class="{
|
||||
'bg-off-white': !$vuetify.theme.dark && !isDark,
|
||||
}"
|
||||
@ -23,7 +23,7 @@
|
||||
</v-avatar>
|
||||
</div>
|
||||
|
||||
<v-card-title class="headline justify-center pb-1"> {{ $t('user.sign-in') }} </v-card-title>
|
||||
<v-card-title class="headline justify-center pb-3"> {{ $t('user.sign-in') }} </v-card-title>
|
||||
<v-card-text>
|
||||
<v-form @submit.prevent="authenticate">
|
||||
<v-text-field
|
||||
@ -68,7 +68,7 @@
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-text class="d-flex justify-center">
|
||||
<v-card-text class="d-flex justify-center flex-column flex-sm-row">
|
||||
<div
|
||||
v-for="link in [
|
||||
{
|
||||
@ -88,6 +88,7 @@
|
||||
},
|
||||
]"
|
||||
:key="link.text"
|
||||
class="text-center"
|
||||
>
|
||||
<v-btn text :href="link.href" target="_blank">
|
||||
<v-icon left>
|
||||
@ -99,7 +100,7 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-btn absolute bottom center @click="toggleDark">
|
||||
<v-btn bottom center class="mt-5" @click="toggleDark">
|
||||
<v-icon left>
|
||||
{{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
|
||||
</v-icon>
|
||||
|
Loading…
x
Reference in New Issue
Block a user