ui improvements
This commit is contained in:
vabene1111
parent
5d70dca039
commit
31357c552c
18
cookbook/migrations/0071_auto_20200701_2048.py
Normal file
18
cookbook/migrations/0071_auto_20200701_2048.py
Normal 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',
|
||||||
|
),
|
||||||
|
]
|
||||||
@ -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)
|
||||||
|
|||||||
@ -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)"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user