hotkeys, styling, step improvements
This commit is contained in:
parent
4d08477b23
commit
5b7ec37637
@ -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?' %}')) {
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user