github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 22:43:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 15

sizing & spacing improvements

Browse source
This commit is contained in:
p0lycarpio 2025-06-25 19:44:25 +00:00
commit 54e6cd92d1
20 changed files with 62 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/Domain/Cookbook/CookbookPage.vue
View file

@ -24,8 +24,7 @@
<v-container <v-container
v-if="book" v-if="book"
fluid class="my-0"
class="py-0 my-0"
> >
<v-sheet <v-sheet
color="transparent" color="transparent"
@ -33,13 +32,12 @@
elevation="0" elevation="0"
> >
<div class="d-flex align-center w-100 mb-2"> <div class="d-flex align-center w-100 mb-2">
<v-toolbar-title class="headline mb-0">
<v-icon size="large" class="mr-3"> <v-icon size="large" class="mr-3">
{{ $globals.icons.pages }} {{ $globals.icons.pages }}
</v-icon> </v-icon>
<v-toolbar-title class="headline mb-0">
{{ book.name }} {{ book.name }}
</v-toolbar-title> </v-toolbar-title>
<v-spacer />
<BaseButton <BaseButton
v-if="canEdit" v-if="canEdit"
class="mx-1" class="mx-1"

2
frontend/components/Domain/Recipe/RecipeChips.vue
View file

@ -10,7 +10,7 @@
v-for="category in items.slice(0, limit)" v-for="category in items.slice(0, limit)"
:key="category.name" :key="category.name"
label label
class="ma-1" class="mr-1 mt-1"
color="accent" color="accent"
variant="flat" variant="flat"
:size="small ? 'small' : 'default'" :size="small ? 'small' : 'default'"

2
frontend/components/Domain/Recipe/RecipeExplorerPage.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<v-container <v-container
fluid fluid
class="pa-0" class="px-0"
> >
<div class="search-container pb-8"> <div class="search-container pb-8">
<form <form

2
frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
View file

@ -59,7 +59,7 @@
<v-app-bar <v-app-bar
color="transparent" color="transparent"
flat flat
class="mt-n1 rounded align-center px-4 position-relative w-100 left-0 top-0" class="mt-n1 rounded align-center position-relative w-100 left-0 top-0"
> >
<v-icon <v-icon
size="large" size="large"

2
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<v-container v-show="!isCookMode" key="recipe-page" class="pt-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }"> <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }">
<v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none"> <v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none">
<RecipePageHeader <RecipePageHeader
:recipe="recipe" :recipe="recipe"

7
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="d-flex justify-start align-top py-2"> <div class="d-flex justify-start align-top flex-wrap py-2">
<RecipeImageUploadBtn <RecipeImageUploadBtn
class="my-1" class="my-1"
:slug="recipe.slug" :slug="recipe.slug"
@ -19,6 +19,7 @@
> >
<v-select <v-select
v-model="recipe.userId" v-model="recipe.userId"
max-width="100"
:items="allUsers" :items="allUsers"
item-title="fullName" item-title="fullName"
item-value="id" item-value="id"
@ -43,8 +44,8 @@
<v-icon>{{ $globals.icons.household }}</v-icon> <v-icon>{{ $globals.icons.household }}</v-icon>
<span class="pl-1">{{ ownerHousehold.name }}</span> <span class="pl-1">{{ ownerHousehold.name }}</span>
</v-card-text> </v-card-text>
</v-container> </v-container>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

10
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
View file

@ -11,15 +11,17 @@
class="d-flex flex-column justify-center align-center" class="d-flex flex-column justify-center align-center"
> >
<v-card-text class="w-100"> <v-card-text class="w-100">
<v-card-title class="text-h5 font-weight-regular pa-0 d-flex flex-column align-center justify-center opacity-80"> <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 }} {{ recipe.name }}
<RecipeRating </v-card-title>
<RecipeRating
:key="recipe.slug" :key="recipe.slug"
:value="recipe.rating" :value="recipe.rating"
:recipe-id="recipe.id" :recipe-id="recipe.id"
:slug="recipe.slug" :slug="recipe.slug"
/> />
</v-card-title> </div>
<v-divider class="my-2" /> <v-divider class="my-2" />
<SafeMarkdown :source="recipe.description" class="my-3" /> <SafeMarkdown :source="recipe.description" class="my-3" />
<v-divider v-if="recipe.description" /> <v-divider v-if="recipe.description" />
@ -52,7 +54,7 @@
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
<div class="mx-6"> <div v-if="recipe.prepTime || recipe.totalTime || recipe.performTime" class="mx-6">
<RecipeTimeCard <RecipeTimeCard
container-class="d-flex flex-wrap justify-center" container-class="d-flex flex-wrap justify-center"
:prep-time="recipe.prepTime" :prep-time="recipe.prepTime"

3
frontend/components/Domain/Recipe/RecipeTimeCard.vue
View file

@ -141,6 +141,9 @@ export default defineNuxtComponent({
</script> </script>
<style scoped> <style scoped>
.text-center {
font-size: smaller;
}
.time-card-flex { .time-card-flex {
width: fit-content; width: fit-content;
} }

1
frontend/components/Domain/SearchFilter.vue
View file

@ -125,6 +125,7 @@
<v-alert <v-alert
type="info" type="info"
:text="$t('search.no-results')" :text="$t('search.no-results')"
class="mb-0"
/> />
</div> </div>
</v-card-text> </v-card-text>

2
frontend/components/Layout/DefaultLayout.vue
View file

@ -105,7 +105,7 @@
</v-list-item> </v-list-item>
</template> </template>
</AppSidebar> </AppSidebar>
<v-main class="pt-16"> <v-main class="pt-12">
<v-scroll-x-transition> <v-scroll-x-transition>
<div> <div>
<NuxtPage /> <NuxtPage />

3
frontend/components/global/BaseCardSectionTitle.vue
View file

@ -10,6 +10,7 @@
<v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;"> <v-card-title class="text-h5 pl-0 py-0" style="font-weight: normal;">
<v-icon <v-icon
v-if="icon" v-if="icon"
size="small"
start start
> >
{{ icon }} {{ icon }}
@ -24,7 +25,7 @@
<slot /> <slot />
</p> </p>
</v-card-text> </v-card-text>
<v-divider class="mb-3" /> <v-divider class="mt-1 mb-3" />
</v-card> </v-card>
</template> </template>

2
frontend/components/global/BaseWizard.vue
View file

@ -10,7 +10,7 @@
style="margin-bottom: 4rem" style="margin-bottom: 4rem"
dark dark
> >
<v-toolbar-title class="headline text-h4"> <v-toolbar-title class="headline text-h4 text-center mx-0">
Mealie Mealie
</v-toolbar-title> </v-toolbar-title>
</v-toolbar> </v-toolbar>

1
frontend/components/global/InputQuantity.vue
View file

@ -10,7 +10,6 @@
:min="min" :min="min"
:max="max" :max="max"
type="number" type="number"
class="rounded-xl"
size="small" size="small"
variant="plain" variant="plain"
/> />

12
frontend/pages/admin/maintenance/index.vue
View file

@ -26,7 +26,7 @@
<section> <section>
<BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" /> <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.wrench" :title="$t('admin.maintenance.summary-title')" />
<div class="mb-6 ml-2 d-flex" style="gap: 0.3rem"> <div class="mb-6 d-flex" style="gap: 0.3rem">
<BaseButton color="info" @click="getSummary"> <BaseButton color="info" @click="getSummary">
<template #icon> <template #icon>
{{ $globals.icons.tools }} {{ $globals.icons.tools }}
@ -40,7 +40,7 @@
{{ $t("admin.maintenance.button-label-open-details") }} {{ $t("admin.maintenance.button-label-open-details") }}
</BaseButton> </BaseButton>
</div> </div>
<v-card class="ma-2" :loading="state.fetchingInfo"> <v-card class="" :loading="state.fetchingInfo">
<template v-for="(value, idx) in info" :key="`item-${idx}`"> <template v-for="(value, idx) in info" :key="`item-${idx}`">
<v-list-item> <v-list-item>
<v-list-item-title class="py-2"> <v-list-item-title class="py-2">
@ -67,21 +67,23 @@
</template> </template>
</i18n-t> </i18n-t>
</BaseCardSectionTitle> </BaseCardSectionTitle>
<v-card class="ma-2" :loading="state.actionLoading"> <v-card class="ma-0" flat :loading="state.actionLoading">
<template v-for="(action, idx) in actions" :key="`item-${idx}`"> <template v-for="(action, idx) in actions" :key="`item-${idx}`">
<v-list-item class="py-1"> <v-list-item class="py-2 px-0">
<v-list-item-title> <v-list-item-title>
<div>{{ action.name }}</div> <div>{{ action.name }}</div>
<v-list-item-subtitle class="wrap-word"> <v-list-item-subtitle class="wrap-word">
{{ action.subtitle }} {{ action.subtitle }}
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item-title> </v-list-item-title>
<BaseButton color="info" @click="action.handler"> <template #append>
<BaseButton color="info" @click="action.handler">
<template #icon> <template #icon>
{{ $globals.icons.robot }} {{ $globals.icons.robot }}
</template> </template>
{{ $t("general.run") }} {{ $t("general.run") }}
</BaseButton> </BaseButton>
</template>
</v-list-item> </v-list-item>
<v-divider class="mx-2" /> <v-divider class="mx-2" />
</template> </template>

18
frontend/pages/g/[groupSlug]/r/create/bulk.vue
View file

@ -7,7 +7,7 @@
<v-card-text> <v-card-text>
{{ $t('recipe.recipe-bulk-importer-description') }} {{ $t('recipe.recipe-bulk-importer-description') }}
</v-card-text> </v-card-text>
</div> <div class="px-4">
<section class="mt-2"> <section class="mt-2">
<v-row <v-row
v-for="(_, idx) in bulkUrls" v-for="(_, idx) in bulkUrls"
@ -54,6 +54,7 @@
cols="12" cols="12"
xs="12" xs="12"
sm="6" sm="6"
class="py-0"
> >
<RecipeOrganizerSelector <RecipeOrganizerSelector
v-model="bulkUrls[idx].categories" v-model="bulkUrls[idx].categories"
@ -73,6 +74,7 @@
cols="12" cols="12"
xs="12" xs="12"
sm="6" sm="6"
class="pt-0 pb-4"
> >
<RecipeOrganizerSelector <RecipeOrganizerSelector
v-model="bulkUrls[idx].tags" v-model="bulkUrls[idx].tags"
@ -90,8 +92,9 @@
</v-col> </v-col>
</template> </template>
</v-row> </v-row>
<v-card-actions class="justify-end flex-wrap mb-1"> <v-card-actions class="justify-end flex-wrap mt-3 pa-0">
<BaseButton <BaseButton
class="mt-1 pr-4"
delete delete
@click=" @click="
bulkUrls = []; bulkUrls = [];
@ -117,23 +120,26 @@
@bulk-data="assignUrls" @bulk-data="assignUrls"
/> />
</v-card-actions> </v-card-actions>
<div class="px-1"> <div class="px-0">
<v-checkbox <v-checkbox
v-model="showCatTags" v-model="showCatTags"
hide-details hide-details
:label="$t('recipe.set-categories-and-tags')" :label="$t('recipe.set-categories-and-tags')"
/> />
</div> </div>
<v-card-actions class="justify-end"> <v-card-actions class="justify-center">
<div style="width: 250px">
<BaseButton <BaseButton
:disabled="bulkUrls.length === 0 || lockBulkImport" :disabled="bulkUrls.length === 0 || lockBulkImport"
rounded
block
@click="bulkCreate" @click="bulkCreate"
> >
<template #icon> <template #icon>
{{ $globals.icons.check }} {{ $globals.icons.check }}
</template> </template>
{{ $t('general.submit') }}
</BaseButton> </BaseButton>
</div>
</v-card-actions> </v-card-actions>
</section> </section>
<section class="mt-12"> <section class="mt-12">
@ -144,6 +150,8 @@
/> />
</section> </section>
</div> </div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">

1
frontend/pages/g/[groupSlug]/r/create/html.vue
View file

@ -61,7 +61,6 @@
<div style="width: 250px"> <div style="width: 250px">
<BaseButton <BaseButton
:disabled="!newRecipeData" :disabled="!newRecipeData"
large
rounded rounded
block block
type="submit" type="submit"

1
frontend/pages/g/[groupSlug]/r/create/zip.vue
View file

@ -25,7 +25,6 @@
<div style="width: 250px"> <div style="width: 250px">
<BaseButton <BaseButton
:disabled="newRecipeZip === null" :disabled="newRecipeZip === null"
large
rounded rounded
block block
:loading="loading" :loading="loading"

10
frontend/pages/register/index.vue
View file

@ -47,7 +47,7 @@
<!-- Form Container --> <!-- Form Container -->
<div class="d-flex justify-center grow items-center my-4"> <div class="d-flex justify-center grow items-center my-4">
<template v-if="state.ctx.state === States.Initial"> <template v-if="state.ctx.state === States.Initial">
<div width="600px"> <v-container>
<v-card-title class="text-h5 my-4 mb-5 pb-0 text-center"> <v-card-title class="text-h5 my-4 mb-5 pb-0 text-center">
{{ $t("user-registration.user-registration") }} {{ $t("user-registration.user-registration") }}
</v-card-title> </v-card-title>
@ -60,7 +60,7 @@
color="primary" color="primary"
dark dark
hover hover
width="300px" width="320px"
@click="initial.joinGroup" @click="initial.joinGroup"
> >
<v-card-title class="d-flex align-center justify-center py-3"> <v-card-title class="d-flex align-center justify-center py-3">
@ -77,7 +77,7 @@
color="primary" color="primary"
dark dark
hover hover
width="300px" width="320px"
@click="initial.joinGroup" @click="initial.joinGroup"
> >
<v-card-title class="d-flex align-center justify-center py-3"> <v-card-title class="d-flex align-center justify-center py-3">
@ -92,7 +92,7 @@
</v-card-title> </v-card-title>
</v-card> </v-card>
</div> </div>
</div> </v-container>
</template> </template>
<template v-else-if="state.ctx.state === States.ProvideToken"> <template v-else-if="state.ctx.state === States.ProvideToken">
@ -333,9 +333,7 @@ import type { VForm } from "~/types/auto-forms";
const inputAttrs = { const inputAttrs = {
variant: "filled", variant: "filled",
rounded: true,
validateOnBlur: true, validateOnBlur: true,
class: "rounded-lg",
}; };
export default defineNuxtComponent({ export default defineNuxtComponent({

25
frontend/pages/user/profile/api-tokens.vue
View file

@ -17,9 +17,10 @@
<section class="d-flex justify-center"> <section class="d-flex justify-center">
<v-card <v-card
class="mt-4" class="mt-4"
width="500px" width="100%"
flat
> >
<v-card-text> <v-card-text class="px-0">
<v-form <v-form
ref="domNewTokenForm" ref="domNewTokenForm"
@submit.prevent @submit.prevent
@ -38,16 +39,16 @@
readonly readonly
rows="3" rows="3"
/> />
<v-list-subheader class="text-center"> <p>
{{ {{
$t( $t(
"settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again", "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again",
) )
}} }}
</v-list-subheader> </p>
</template> </template>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions class="px-0">
<BaseButton <BaseButton
v-if="createdToken" v-if="createdToken"
cancel cancel
@ -78,14 +79,11 @@
:title="$t('settings.token.active-tokens')" :title="$t('settings.token.active-tokens')"
/> />
<section class="d-flex flex-column"> <section class="d-flex flex-column">
<v-list>
<div <div
v-for="(token, index) in user.tokens" v-for="(token, index) in user.tokens"
:key="index" :key="index"
> >
<v-card
variant="outlined"
class="mb-2"
>
<v-list-item> <v-list-item>
<v-list-item-title> <v-list-item-title>
{{ token.name }} {{ token.name }}
@ -93,16 +91,17 @@
<v-list-item-subtitle> <v-list-item-subtitle>
{{ $t('general.created-on-date', [$d(new Date(token.createdAt!))]) }} {{ $t('general.created-on-date', [$d(new Date(token.createdAt!))]) }}
</v-list-item-subtitle> </v-list-item-subtitle>
<v-list-item-action> <template #append>
<BaseButton <BaseButton
delete delete
small small
@click="deleteToken(token.id)" @click="deleteToken(token.id)"
/> />
</v-list-item-action> </template>
</v-list-item> </v-list-item>
</v-card> <v-divider class="mx-2 my-2" />
</div> </div>
</v-list>
</section> </section>
</v-container> </v-container>
</template> </template>

4
frontend/pages/user/profile/index.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-container v-if="user"> <v-container v-if="user" class="mb-8">
<section class="d-flex flex-column align-center mt-4"> <section class="d-flex flex-column align-center mt-4">
<UserAvatar <UserAvatar
:tooltip="false" :tooltip="false"
@ -7,7 +7,7 @@
:user-id="user.id" :user-id="user.id"
/> />
<h2 class="text-h4"> <h2 class="text-h4 text-center">
{{ $t('profile.welcome-user', [user.fullName]) }} {{ $t('profile.welcome-user', [user.fullName]) }}
</h2> </h2>
<p class="subtitle-1 mb-0 text-center"> <p class="subtitle-1 mb-0 text-center">