mobile and large layout

This commit is contained in:
vabene1111
2020-06-29 14:10:21 +02:00
parent d481767154
commit d613da7faf

View File

@@ -20,6 +20,7 @@
.small-padding {
padding-left: 2px;
padding-right: 2px;
margin-top: 2px;
}
.break-column {
@@ -120,60 +121,64 @@
style="margin-top: 8px">
<hr class="d-md-none"/>
<div class="row d-flex align-items-center justify-content-md-between flex-wrap">
<div class="flex-grow-0 handle align-self-start order-0">
<div class="d-flex">
<div class="flex-grow-0 handle align-self-start">
<button type="button" class="btn btn-lg shadow-none"><i
class="fas fa-arrows-alt-v "></i></button>
</div>
<div class="flex-md-grow-2 flex-fill order-1">
<input class="form-control" v-model="ingredient.amount" type="number">
<div class="flex-fill row" style="margin-left: 8px; margin-right: 8px">
<div class="col-lg-2 col-md-6 small-padding">
<input class="form-control" v-model="ingredient.amount" type="number">
</div>
<div class="col-lg-2 col-md-6 small-padding">
<multiselect
v-tabindex
ref="unit"
v-model="ingredient.unit"
:options="units"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="{% trans 'Select Unit' %}"
tag-placeholder="{% trans 'Select' %}"
label="name"
track-by="id"
:multiple="false"
:loading="units_loading"
@search-change="searchUnits">
</multiselect>
</div>
<div class="col-lg-4 col-md-6 small-padding">
<multiselect
v-tabindex
ref="food"
v-model="ingredient.food"
:options="foods"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="{% trans 'Select Food' %}"
tag-placeholder="{% trans 'Select' %}"
label="name"
track-by="id"
:multiple="false"
:loading="foods_loading"
@search-change="searchFoods">
</multiselect>
</div>
<div class="col-lg-4 col-md-6 small-padding">
<input class="form-control" v-model="ingredient.note"
placeholder="{% trans 'Note' %}">
</div>
</div>
<div class="col-md-3 small-padding flex-grow-1 order-3">
<multiselect
v-tabindex
ref="unit"
v-model="ingredient.unit"
:options="units"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="{% trans 'Select Unit' %}"
tag-placeholder="{% trans 'Select' %}"
label="name"
track-by="id"
:multiple="false"
:loading="units_loading"
@search-change="searchUnits">
</multiselect>
</div>
<div class="col-md-3 small-padding order-4">
<multiselect
v-tabindex
ref="food"
v-model="ingredient.food"
:options="foods"
:close-on-select="true"
:clear-on-select="true"
:allow-empty="true"
:preserve-search="true"
placeholder="{% trans 'Select Food' %}"
tag-placeholder="{% trans 'Select' %}"
label="name"
track-by="id"
:multiple="false"
:loading="foods_loading"
@search-change="searchFoods">
</multiselect>
</div>
<div class="flex-fill order-5">
<input class="form-control" v-model="ingredient.note"
:placeholder="{% trans 'Note' %}">
</div>
<div class="flex-grow-0 small-padding order-2 order-md-6">
<button type="button" class="btn btn-outline-danger btn-lg"
<div class="flex-grow-0 small-padding">
<button type="button" class="btn btn-outline-warning btn-lg"
@click="removeIngredient(step, ingredient)"><i
class="fa fa-trash"></i></button>
</div>
@@ -282,7 +287,7 @@
this.sortStep(step)
},
removeIngredient: function (step, ingredient) {
if (confirm('{% trans 'Do you really want to remove this ingredient ?' %}')) {
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {
step.ingredients = step.ingredients.filter(item => item !== ingredient)
}