mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2025-12-24 02:39:20 -05:00
mobile and large layout
This commit is contained in:
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user