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:
parent
1e693fdca6
commit
99e7717fec
10 changed files with 95 additions and 61 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue