ui improvements

This commit is contained in:
vabene1111 2020-07-01 21:04:28 +02:00
parent 5d70dca039
commit 31357c552c
3 changed files with 207 additions and 159 deletions

View File

@ -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',
),
]

View File

@ -163,7 +163,7 @@ class Step(models.Model):
TIME = 'TIME' TIME = 'TIME'
name = models.CharField(max_length=128, default='', blank=True) 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) instruction = models.TextField(blank=True)
ingredients = models.ManyToManyField(Ingredient, blank=True) ingredients = models.ManyToManyField(Ingredient, blank=True)
time = models.IntegerField(default=0, blank=True) time = models.IntegerField(default=0, blank=True)

View File

@ -75,16 +75,24 @@
</div> </div>
</div> </div>
<draggable :list="recipe.steps" group="steps" <draggable :list="recipe.steps" group="steps"
:empty-insert-threshold="10" handle=".handle" @sort="sortSteps()"> :empty-insert-threshold="10" handle=".handle" @sort="sortSteps()">
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh">
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">
<div class="card-body">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-11">
<h4><i class="fas fa-arrows-alt-v handle"></i> {% trans 'Step' %} [[step_index+1]] <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 <button class="btn btn-outline-dark shadow-none" @click="removeStep(step)"><i
class="fa fa-trash fa-fw"></i></button> class="fa fa-trash fa-fw"></i></button>
</h4>
</div> </div>
</div> </div>
@ -94,8 +102,8 @@
<input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'"> <input class="form-control" v-model="step.name" :id="'id_step_' + step.id + 'name'">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<label for="id_type"> {% trans 'Type' %}</label> <label for="id_type"> {% trans 'Step Type' %}</label>
<select class="form-control" id="id_type" v-model="step.kind"> <select class="form-control" id="id_type" v-model="step.type">
<option value="TEXT">{% trans 'Text' %}</option> <option value="TEXT">{% trans 'Text' %}</option>
<option value="TIME">{% trans 'Time' %}</option> <option value="TIME">{% trans 'Time' %}</option>
</select> </select>
@ -103,23 +111,33 @@
</div> </div>
<template v-if="step.kind == 'TIME'"> <template v-if="step.type == 'TIME'">
<div class="row" style="margin-top: 12px"> <div class="row" style="margin-top: 12px">
<div class="col-md-12"> <div class="col-md-12">
<label :for="'id_step_' + step.id + '_time'">{% trans 'Waiting time in Minutes' %}</label> <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'"> <input class="form-control" v-model="step.time"
:id="'id_step_' + step.id + '_time'">
</div> </div>
</div> </div>
</template> </template>
<template v-if="step.kind == 'TEXT'"> <template v-if="step.type == 'TEXT'">
<div class="row" style="margin-top: 12px"> <div class="row" style="margin-top: 12px">
<div class="col-md-12"> <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>
<div class="row">
<div class="col-md-12" style="margin-top: 8px">
<draggable :list="step.ingredients" group="ingredients" <draggable :list="step.ingredients" group="ingredients"
:empty-insert-threshold="10" handle=".handle" @sort="sortIngredients(step)"> :empty-insert-threshold="10" handle=".handle"
<div class="col-md-12" v-for="ingredient, index in step.ingredients" @sort="sortIngredients(step)">
:key="ingredient.id" <div v-for="ingredient, index in step.ingredients"
style="margin-top: 8px"> :key="ingredient.id">
<hr class="d-md-none"/> <hr class="d-md-none"/>
<div class="d-flex"> <div class="d-flex">
@ -128,10 +146,12 @@
class="fas fa-arrows-alt-v "></i></button> class="fas fa-arrows-alt-v "></i></button>
</div> </div>
<div class="flex-fill row" style="margin-left: 4px; margin-right: 4px"> <div class="flex-fill row"
style="margin-left: 4px; margin-right: 4px">
<div class="col-lg-2 col-md-6 small-padding" <div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header"> v-if="!ingredient.is_header">
<input class="form-control" v-model="ingredient.amount" <input class="form-control"
v-model="ingredient.amount"
type="number" type="number"
v-if="!ingredient.no_amount"> v-if="!ingredient.no_amount">
</div> </div>
@ -184,7 +204,8 @@
</div> </div>
<div class="small-padding" <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 }"> 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" <input class="form-control"
v-model="ingredient.note"
placeholder="{% trans 'Note' %}"> placeholder="{% trans 'Note' %}">
</div> </div>
</div> </div>
@ -200,7 +221,8 @@
<div class="dropdown-menu dropdown-menu-right" <div class="dropdown-menu dropdown-menu-right"
aria-labelledby="dropdownMenuLink"> aria-labelledby="dropdownMenuLink">
<button type="button" class="dropdown-item" <button type="button" class="dropdown-item"
@click="removeIngredient(step, ingredient)"><i @click="removeIngredient(step, ingredient)">
<i
class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %} class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
</button> </button>
@ -232,28 +254,36 @@
</div> </div>
</div> </div>
</div> </div>
</draggable> </draggable>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12" style="text-align: center; margin-top: 8px; margin-bottom: 8px"> <div class="col-md-2 offset-md-5"
<button class="btn btn-success" @click="addIngredient(step)"><i class="fa fa-plus"></i> style="text-align: center; margin-top: 8px;">
<button class="btn btn-dark btn-block" @click="addIngredient(step)"><i
class="fa fa-plus"></i>
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<label :for="'id_instruction_' + step.id">{% trans 'Instructions' %}</label>
<textarea class="form-control" rows="8" v-model="step.instruction" <textarea class="form-control" rows="8" v-model="step.instruction"
:id="'id_instruction_' + step.id"></textarea> :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>
</template> </template>
</div>
<br/>
</div> </div>
</draggable> </draggable>
<button type="button" @click="updateRecipe(true)" <button type="button" @click="updateRecipe(true)"
class="btn btn-success shadow-none">{% trans 'Save & View' %}</button> class="btn btn-success shadow-none">{% trans 'Save & View' %}</button>
<button type="button" @click="updateRecipe(false)" <button type="button" @click="updateRecipe(false)"