fix spacing and layouts for small screens

This commit is contained in:
p0lycarpio
2023-09-04 11:20:48 +02:00
parent e538c5cbd8
commit e2665bcebf
13 changed files with 36 additions and 46 deletions

View File

@@ -167,8 +167,8 @@ export default defineComponent({
align-self: start !important;
}
.flat {
.flat, .theme--dark .flat {
box-shadow: none!important;
background-color: transparent;
background-color: transparent!important;
}
</style>

View File

@@ -18,7 +18,7 @@
:href="recipe.orgURL"
color="secondary darken-1"
target="_blank"
class="rounded-sm mr-4"
class="rounded-sm mr-n2"
>
{{ $t("recipe.original-url") }}
</v-btn>

View File

@@ -26,11 +26,12 @@
</TransitionGroup>
</draggable>
<v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
<div class="d-flex justify-end mt-2">
<div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
<v-tooltip top color="accent">
<template #activator="{ on, attrs }">
<span v-on="on">
<BaseButton
class="mb-1"
:disabled="recipe.settings.disableAmount || hasFoodOrUnit"
color="accent"
:to="`${recipe.slug}/ingredient-parser`"
@@ -45,8 +46,8 @@
</template>
<span>{{ parserToolTip }}</span>
</v-tooltip>
<RecipeDialogBulkAdd class="ml-1 mr-1" @bulk-data="addIngredient" />
<BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
<RecipeDialogBulkAdd class="mx-1 mb-1" @bulk-data="addIngredient" />
<BaseButton class="mb-1" @click="addIngredient" > {{ $t("general.new") }} </BaseButton>
</div>
</div>
</template>

View File

@@ -108,7 +108,7 @@
</v-app-bar>
<v-hover v-slot="{ hover }">
<v-card
class="ma-1"
class="my-3"
:class="[{ 'on-hover': hover }, isChecked(index)]"
:elevation="hover ? 12 : 2"
:ripple="false"