fix: add some space in multi-row lists of elements on mobile

This commit is contained in:
Oleh Astappiev
2022-05-29 16:58:46 +02:00
parent 3478ff17f8
commit ab446590a2

View File

@ -238,27 +238,27 @@
<!-- step data visibility controller -->
<div class="row pt-2">
<div class="col col-md-12">
<b-button pill variant="primary" size="sm" class="ml-1"
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.time_visible = true" v-if="!step.time_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Time") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1"
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1"
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.instruction_visible = true" v-if="!step.instruction_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1"
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1"
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.file_visible = true" v-if="!step.file_visible">
<i class="fas fa-plus-circle"></i> {{ $t("File") }}
</b-button>
@ -266,7 +266,7 @@
pill
variant="primary"
size="sm"
class="ml-1"
class="ml-1 mb-1 mb-md-0"
@click="
paste_step = step.id
$bvModal.show('id_modal_paste_ingredients')
@ -609,22 +609,22 @@
<!-- bottom buttons save/close/view -->
<div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
v-if="recipe !== undefined">
<div class="col-md-3 col-6">
<div class="col-md-3 col-6 mb-1 mb-md-0">
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
</div>
<div class="col-md-3 col-6">
<div class="col-md-3 col-6 mb-1 mb-md-0">
<a :href="resolveDjangoUrl('view_recipe', recipe.id)">
<button class="btn btn-block btn-primary shadow-none">{{ $t("View") }}</button>
</a>
</div>
<div class="col-md-3 col-6">
<div class="col-md-3 col-6 mb-1 mb-md-0">
<button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
:title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
{{ $t("Save") }}
</button>
</div>
<div class="col-md-3 col-6">
<div class="col-md-3 col-6 mb-1 mb-md-0">
<button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
:title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
class="btn btn-sm btn-block btn-success shadow-none">