hotkeys, styling, step improvements

This commit is contained in:
vabene1111 2020-07-13 22:55:09 +02:00
parent 4d08477b23
commit 5b7ec37637
2 changed files with 31 additions and 5 deletions

View File

@ -87,7 +87,7 @@
<div v-for="step, step_index in recipe.steps" style="margin-top: 1vh" class="card">
<div class="card-body">
<div class="card-body" :id="`id_card_step_${step_index}`">
<div class="row">
<div class="col-11">
<h4 class="handle" :id="'id_step_' + step_index">
@ -193,12 +193,14 @@
<input class="form-control"
v-model="ingredient.amount"
type="number" step="any"
v-if="!ingredient.no_amount">
v-if="!ingredient.no_amount"
:id="`amount_${step_index}_${index}`">
</div>
<div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header">
<multiselect
v-if="!ingredient.no_amount"
v-tabindex
ref="unit"
v-model="ingredient.unit"
@ -316,8 +318,8 @@
<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>
<b-form-textarea class="form-control" rows="2" max-rows="8" v-model="step.instruction"
:id="'id_instruction_' + step.id"></b-form-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>
@ -447,6 +449,24 @@
this.searchUnits('')
this.searchFoods('')
this.searchKeywords('')
this._keyListener = function (e) {
if (e.code === "Space" && e.ctrlKey) {
e.preventDefault(); // present "Save Page" from getting triggered.
for (el of e.path) {
if(el.id !== undefined && el.id.includes('id_card_step_')) {
let step = this.recipe.steps[el.id.replace('id_card_step_','')]
this.addIngredient(step)
}
}
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
},
beforeDestroy() {
document.removeEventListener('keydown', this._keyListener);
},
methods: {
makeToast: function (title, message, variant = null) {
@ -543,6 +563,8 @@
'no_amount': false
})
this.sortIngredients(step)
this.$nextTick(() => document.getElementById(`amount_${this.recipe.steps.indexOf(step)}_${step.ingredients.length - 1}`).focus())
},
removeIngredient: function (step, ingredient) {
if (confirm('{% trans 'Are you sure that you want to delete this ingredient?' %}')) {

View File

@ -107,7 +107,7 @@
<div class="row" v-if="recipe && has_ingredients">
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2">
<div class="card">
<div class="card border-primary">
<div class="card-body">
<div class="row">
<div class="col col-md-9">
@ -216,6 +216,10 @@
{% endif %}
</div>
<hr>
<h3>{% trans 'Instructions' %}</h3>
<hr>
<div style="font-size: large;" v-if="recipe">
{% for s in recipe.steps.all %}
<div style="margin-top: 1vh" class="card">