From 31357c552c743dbfb3365f220eb0412b75ccf1e8 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 1 Jul 2020 21:04:28 +0200
Subject: [PATCH] ui improvements

---
 .../migrations/0071_auto_20200701_2048.py     |  18 +
 cookbook/models.py                            |   2 +-
 .../templates/forms/edit_internal_recipe.html | 346 ++++++++++--------
 3 files changed, 207 insertions(+), 159 deletions(-)
 create mode 100644 cookbook/migrations/0071_auto_20200701_2048.py

diff --git a/cookbook/migrations/0071_auto_20200701_2048.py b/cookbook/migrations/0071_auto_20200701_2048.py
new file mode 100644
index 000000000..09bc5dac3
--- /dev/null
+++ b/cookbook/migrations/0071_auto_20200701_2048.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.7 on 2020-07-01 18:48
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0070_auto_20200701_2007'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='step',
+            old_name='kind',
+            new_name='type',
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index b438ee707..ec6913326 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -163,7 +163,7 @@ class Step(models.Model):
     TIME = 'TIME'
 
     name = models.CharField(max_length=128, default='', blank=True)
-    kind = models.CharField(choices=((TEXT, _('Text')), (TIME, _('Time')),), default=TEXT, max_length=16)
+    type = models.CharField(choices=((TEXT, _('Text')), (TIME, _('Time')),), default=TEXT, max_length=16)
     instruction = models.TextField(blank=True)
     ingredients = models.ManyToManyField(Ingredient, blank=True)
     time = models.IntegerField(default=0, blank=True)
diff --git a/cookbook/templates/forms/edit_internal_recipe.html b/cookbook/templates/forms/edit_internal_recipe.html
index 98b7f3b22..9298e17eb 100644
--- a/cookbook/templates/forms/edit_internal_recipe.html
+++ b/cookbook/templates/forms/edit_internal_recipe.html
@@ -75,185 +75,215 @@
                 </div>
             </div>
 
+
             <draggable :list="recipe.steps" group="steps"
                        :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
-                <div v-for="step, step_index in recipe.steps" style="margin-top: 1vh">
 
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h4><i class="fas fa-arrows-alt-v handle"></i> {% trans 'Step' %} [[step_index+1]]
+                <div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">
+
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-11">
+                                <h4><i class="fas fa-arrows-alt-v handle"></i>
+                                    <template v-if="step.name !== ''">[[step.name]]</template>
+                                    <template v-else>{% trans 'Step' %} [[step_index+1]]</template>
+
+                                </h4>
+                            </div>
+                            <div class="col-1" style="text-align: right">
                                 <button class="btn btn-outline-dark shadow-none" @click="removeStep(step)"><i
                                         class="fa fa-trash fa-fw"></i></button>
-                            </h4>
-                        </div>
-                    </div>
-
-                    <div class="row">
-                        <div class="col-md-8">
-                            <label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
-                            <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
-                        </div>
-                        <div class="col-md-4">
-                            <label for="id_type"> {% trans 'Type' %}</label>
-                            <select class="form-control" id="id_type" v-model="step.kind">
-                                <option value="TEXT">{% trans 'Text' %}</option>
-                                <option value="TIME">{% trans 'Time' %}</option>
-                            </select>
-                        </div>
-                    </div>
-
-
-                    <template v-if="step.kind == 'TIME'">
-                        <div class="row" style="margin-top: 12px">
-                            <div class="col-md-12">
-                                <label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
-                                <input class="form-control" v-model="step.time" :id="'id_step_' + step.id + '_time'">
                             </div>
                         </div>
-                    </template>
 
-                    <template v-if="step.kind == 'TEXT'">
-                        <div class="row" style="margin-top: 12px">
-                            <div class="col-md-12">
-                                <draggable :list="step.ingredients" group="ingredients"
-                                           :empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)">
-                                    <div class="col-md-12" v-for="ingredient, index in step.ingredients"
-                                         :key="ingredient.id"
-                                         style="margin-top: 8px">
+                        <div class="row">
+                            <div class="col-md-8">
+                                <label :for="'id_step_' + step.id + 'name'">{% trans 'Step Name' %}</label>
+                                <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
+                            </div>
+                            <div class="col-md-4">
+                                <label for="id_type"> {% trans 'Step Type' %}</label>
+                                <select class="form-control" id="id_type" v-model="step.type">
+                                    <option value="TEXT">{% trans 'Text' %}</option>
+                                    <option value="TIME">{% trans 'Time' %}</option>
+                                </select>
+                            </div>
+                        </div>
 
-                                        <hr class="d-md-none"/>
-                                        <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>
+
+                        <template v-if="step.type == 'TIME'">
+                            <div class="row" style="margin-top: 12px">
+                                <div class="col-md-12">
+                                    <label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label>
+                                    <input class="form-control" v-model="step.time"
+                                           :id="'id_step_' + step.id + '_time'">
+                                </div>
+                            </div>
+                        </template>
+
+                        <template v-if="step.type == 'TEXT'">
+                            <div class="row" style="margin-top: 12px">
+                                <div class="col-md-12">
+                                    <div class="jumbotron" style="padding: 16px">
+                                        <div class="row">
+                                            <div class="col-md-12">
+                                                <h4>{% trans 'Ingredients' %}</h4>
                                             </div>
 
-                                            <div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
-                                                <div class="col-lg-2 col-md-6 small-padding"
-                                                     v-if="!ingredient.is_header">
-                                                    <input class="form-control" v-model="ingredient.amount"
-                                                           type="number"
-                                                           v-if="!ingredient.no_amount">
-                                                </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col-md-12" style="margin-top: 8px">
+                                                <draggable :list="step.ingredients" group="ingredients"
+                                                           :empty-insert-threshold="10" handle=".handle"
+                                                           @sort="sortIngredients(step)">
+                                                    <div v-for="ingredient, index in step.ingredients"
+                                                         :key="ingredient.id">
 
-                                                <div class="col-lg-2 col-md-6 small-padding"
-                                                     v-if="!ingredient.is_header">
-                                                    <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' %}"
-                                                            :taggable="true"
-                                                            @tag="addUnitType"
-                                                            :id="`unit_${step_index}_${index}`"
-                                                            label="name"
-                                                            track-by="name"
-                                                            :multiple="false"
-                                                            :loading="units_loading"
-                                                            @search-change="searchUnits">
-                                                    </multiselect>
-                                                </div>
-                                                <div class="col-lg-4 col-md-6 small-padding"
-                                                     v-if="!ingredient.is_header">
-                                                    <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' %}"
-                                                            :taggable="true"
-                                                            @tag="addFoodType"
-                                                            :id="`ingredient_${step_index}_${index}`"
-                                                            label="name"
-                                                            track-by="name"
-                                                            :multiple="false"
-                                                            :loading="foods_loading"
-                                                            @search-change="searchFoods">
-                                                    </multiselect>
-                                                </div>
-                                                <div class="small-padding"
-                                                     v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
-                                                    <input class="form-control" v-model="ingredient.note"
-                                                           placeholder="{% trans 'Note' %}">
-                                                </div>
+                                                        <hr class="d-md-none"/>
+                                                        <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-fill row"
+                                                                 style="margin-left: 4px; margin-right: 4px">
+                                                                <div class="col-lg-2 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
+                                                                    <input class="form-control"
+                                                                           v-model="ingredient.amount"
+                                                                           type="number"
+                                                                           v-if="!ingredient.no_amount">
+                                                                </div>
+
+                                                                <div class="col-lg-2 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
+                                                                    <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' %}"
+                                                                            :taggable="true"
+                                                                            @tag="addUnitType"
+                                                                            :id="`unit_${step_index}_${index}`"
+                                                                            label="name"
+                                                                            track-by="name"
+                                                                            :multiple="false"
+                                                                            :loading="units_loading"
+                                                                            @search-change="searchUnits">
+                                                                    </multiselect>
+                                                                </div>
+                                                                <div class="col-lg-4 col-md-6 small-padding"
+                                                                     v-if="!ingredient.is_header">
+                                                                    <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' %}"
+                                                                            :taggable="true"
+                                                                            @tag="addFoodType"
+                                                                            :id="`ingredient_${step_index}_${index}`"
+                                                                            label="name"
+                                                                            track-by="name"
+                                                                            :multiple="false"
+                                                                            :loading="foods_loading"
+                                                                            @search-change="searchFoods">
+                                                                    </multiselect>
+                                                                </div>
+                                                                <div class="small-padding"
+                                                                     v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
+                                                                    <input class="form-control"
+                                                                           v-model="ingredient.note"
+                                                                           placeholder="{% trans 'Note' %}">
+                                                                </div>
+                                                            </div>
+
+                                                            <div class="flex-grow-0 small-padding">
+                                                                <a class="btn shadow-none btn-lg" href="#" role="button"
+                                                                   id="dropdownMenuLink"
+                                                                   data-toggle="dropdown" aria-haspopup="true"
+                                                                   aria-expanded="false">
+                                                                    <i class="fas fa-ellipsis-v text-muted"></i>
+                                                                </a>
+
+                                                                <div class="dropdown-menu dropdown-menu-right"
+                                                                     aria-labelledby="dropdownMenuLink">
+                                                                    <button type="button" class="dropdown-item"
+                                                                            @click="removeIngredient(step, ingredient)">
+                                                                        <i
+                                                                                class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
+                                                                    </button>
+
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="!ingredient.is_header "
+                                                                            @click="ingredient.is_header = true"><i
+                                                                            class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
+                                                                    </button>
+
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="ingredient.is_header "
+                                                                            @click="ingredient.is_header = false"><i
+                                                                            class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
+                                                                    </button>
+
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="!ingredient.no_amount "
+                                                                            @click="ingredient.no_amount = true"><i
+                                                                            class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
+                                                                    </button>
+
+                                                                    <button type="button" class="dropdown-item"
+                                                                            v-if="ingredient.no_amount "
+                                                                            @click="ingredient.no_amount = false"><i
+                                                                            class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
+                                                                    </button>
+                                                                </div>
+
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                </draggable>
                                             </div>
-
-                                            <div class="flex-grow-0 small-padding">
-                                                <a class="btn shadow-none btn-lg" href="#" role="button"
-                                                   id="dropdownMenuLink"
-                                                   data-toggle="dropdown" aria-haspopup="true"
-                                                   aria-expanded="false">
-                                                    <i class="fas fa-ellipsis-v text-muted"></i>
-                                                </a>
-
-                                                <div class="dropdown-menu dropdown-menu-right"
-                                                     aria-labelledby="dropdownMenuLink">
-                                                    <button type="button" class="dropdown-item"
-                                                            @click="removeIngredient(step, ingredient)"><i
-                                                            class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
-                                                    </button>
-
-                                                    <button type="button" class="dropdown-item"
-                                                            v-if="!ingredient.is_header "
-                                                            @click="ingredient.is_header = true"><i
-                                                            class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
-                                                    </button>
-
-                                                    <button type="button" class="dropdown-item"
-                                                            v-if="ingredient.is_header "
-                                                            @click="ingredient.is_header = false"><i
-                                                            class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
-                                                    </button>
-
-                                                    <button type="button" class="dropdown-item"
-                                                            v-if="!ingredient.no_amount "
-                                                            @click="ingredient.no_amount = true"><i
-                                                            class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
-                                                    </button>
-
-                                                    <button type="button" class="dropdown-item"
-                                                            v-if="ingredient.no_amount "
-                                                            @click="ingredient.no_amount = false"><i
-                                                            class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
-                                                    </button>
-                                                </div>
-
+                                        </div>
+                                        <div class="row">
+                                            <div class="col-md-2 offset-md-5"
+                                                 style="text-align: center; margin-top: 8px;">
+                                                <button class="btn btn-dark btn-block" @click="addIngredient(step)"><i
+                                                        class="fa fa-plus"></i>
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
-                                </draggable>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="row">
-                            <div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px">
-                                <button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i>
-                                </button>
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
+                                    <textarea class="form-control" rows="8" v-model="step.instruction"
+                                              :id="'id_instruction_' + step.id"></textarea>
+                                    <small class="text-muted">{% trans 'You can use markdown to format this field. See the <a href="/docs/markdown/">docs here</a>' %}</small>
+                                </div>
                             </div>
-                        </div>
-
-                        <div class="row">
-                            <div class="col-md-12">
-                        <textarea class="form-control" rows="8" v-model="step.instruction"
-                                  :id="'id_instruction_' + step.id"></textarea>
-                            </div>
-                        </div>
-                    </template>
-
-                    <br/>
+                        </template>
+                    </div>
                 </div>
             </draggable>
+
+
             <button type="button" @click="updateRecipe(true)"
                     class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
             <button type="button" @click="updateRecipe(false)"