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:
Arsène Reymond 2023-08-21 20:41:18 +02:00 committed by GitHub
parent 1e693fdca6
commit 99e7717fec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 95 additions and 61 deletions

View File

@ -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>

View File

@ -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 }">

View File

@ -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

View File

@ -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>

View File

@ -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>();

View File

@ -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>

View File

@ -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>

View File

@ -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}"
}
}
}

View File

@ -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,

View File

@ -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>