1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-19 13:19:41 +02: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:
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>