Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-05-24 01:12:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

improve spacing and fix layout on small screens

Browse Source
This commit is contained in:
p0lycarpio 2023-11-24 10:40:35 +01:00
parent b1903aa205
commit be43e5bccd
8 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Domain/Recipe/RecipeAssets.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="value.length > 0 || edit">
<v-card class="mt-2">
<v-card class="mt-4">
<v-card-title class="py-2">
{{ $t("asset.assets") }}
</v-card-title>

4
frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
View File

@ -18,7 +18,6 @@
solo
hide-details
dense
class="mx-1"
type="number"
:placeholder="$t('recipe.quantity')"
@keypress="quantityFilter"
@ -89,7 +88,6 @@
hide-details
dense
solo
class="mx-1"
:placeholder="$t('recipe.notes')"
@click="$emit('clickIngredientField', 'note')"
>
@ -100,7 +98,7 @@
<BaseButtonGroup
hover
:large="false"
class="my-auto"
class="my-auto d-flex"
:buttons="btns"
@toggle-section="toggleTitle"
@toggle-original="toggleOriginalText"

10
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue
View File

@ -24,13 +24,13 @@
</v-btn>
</v-card-actions>
<AdvancedOnly>
<v-card v-if="isEditForm" flat class="ma-2 mb-2">
<v-card v-if="isEditForm" flat class="mb-2 mx-n2">
<v-card-title> {{ $t('recipe.api-extras') }} </v-card-title>
<v-divider class="mx-2"></v-divider>
<v-divider class="ml-4"></v-divider>
<v-card-text>
{{ $t('recipe.api-extras-description') }}
<v-row v-for="(_, key) in recipe.extras" :key="key" class="mt-1">
<v-col cols="8">
<v-col style="max-width: 400px;">
<v-text-field v-model="recipe.extras[key]" dense :label="key">
<template #prepend>
<v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
@ -41,8 +41,8 @@
</v-col>
</v-row>
</v-card-text>
<v-card-actions class="d-flex">
<div style="max-width: 200px">
<v-card-actions class="d-flex ml-2 mt-n3">
<div>
<v-text-field v-model="apiNewKey" :label="$t('recipe.message-key')"></v-text-field>
</div>
<BaseButton create small class="ml-5" @click="createApiExtra" />

2
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue
View File

@ -26,7 +26,7 @@
</TransitionGroup>
</draggable>
<v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
<div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
<div class="d-flex flex-wrap justify-center justify-sm-end mt-3">
<v-tooltip top color="accent">
<template #activator="{ on, attrs }">
<span v-on="on">

15
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
View File

@ -49,11 +49,13 @@
<v-card-actions>
<BaseButton cancel @click="dialog = false"> </BaseButton>
<v-spacer></v-spacer>
<BaseButton color="info" @click="autoSetReferences">
<template #icon> {{ $globals.icons.robot }}</template>
{{ $t("recipe.auto") }}
</BaseButton>
<BaseButton save @click="setIngredientIds"> </BaseButton>
<div class="d-flex flex-wrap justify-end">
<BaseButton color="info" @click="autoSetReferences">
<template #icon> {{ $globals.icons.robot }}</template>
{{ $t("recipe.auto") }}
</BaseButton>
<BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
</div>
</v-card-actions>
</v-card>
</v-dialog>
@ -84,7 +86,7 @@
<div v-for="(step, index) in value" :key="step.id" class="list-group-item">
<v-app-bar
v-if="step.id && showTitleEditor[step.id]"
class="primary mx-1 mt-6"
class="primary mt-6"
style="cursor: pointer"
dark
dense
@ -219,6 +221,7 @@
</div>
</TransitionGroup>
</draggable>
<v-divider class="mt-10 d-flex d-md-none"/>
</section>
</template>

6
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<!-- Recipe Categories -->
<v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-2">
<v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-10">
<v-card-title class="py-2">
{{ $t("recipe.categories") }}
</v-card-title>
@ -19,7 +19,7 @@
</v-card>
<!-- Recipe Tags -->
<v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-2">
<v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-4">
<v-card-title class="py-2">
{{ $t("tag.tags") }}
</v-card-title>
@ -45,7 +45,7 @@
</v-card-text>
</v-card>
<RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-10" :edit="isEditForm" />
<RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-4" :edit="isEditForm" />
<RecipeAssets
v-if="recipe.settings.showAssets"
v-model="recipe.assets"

4
frontend/components/Domain/Recipe/RecipeTimeline.vue
View File

@ -8,7 +8,7 @@
</v-btn>
</v-col>
</v-row>
<v-divider class="mx-2" />
<v-divider class="mx-2"/>
<div
v-if="timelineEvents.length"
id="timeline-container"
@ -34,7 +34,7 @@
{{ $t("recipe.timeline-is-empty") }}
</v-card-title>
</v-card>
<div v-if="loading" class="mb-3">
<div v-if="loading" class="mb-3 text-center">
<AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
</div>
</div>

2
frontend/pages/g/_groupSlug/recipes/timeline.vue
View File

@ -1,6 +1,6 @@
<template>
<v-sheet :class="$vuetify.breakpoint.smAndDown ? 'pa-0' : 'px-3 py-0'">
<BasePageTitle v-if="groupName" divider>
<BasePageTitle v-if="groupName">
<template #header>
<v-img max-height="200" max-width="150" :src="require('~/static/svgs/manage-members.svg')" />
</template>