mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-10-30 17:53:31 -04:00
improve spacing and fix layout on small screens
This commit is contained in:
p0lycarpio
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user