From d613da7faf3515eba87afd83d9680cc2e584dba7 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 29 Jun 2020 14:10:21 +0200
Subject: [PATCH] mobile and large layout

---
 .../templates/forms/edit_internal_recipe.html | 105 +++++++++---------
 1 file changed, 55 insertions(+), 50 deletions(-)

diff --git a/cookbook/templates/forms/edit_internal_recipe.html b/cookbook/templates/forms/edit_internal_recipe.html
index d8f017ba6..d50fdaaf0 100644
--- a/cookbook/templates/forms/edit_internal_recipe.html
+++ b/cookbook/templates/forms/edit_internal_recipe.html
@@ -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)
                     }