render separate flex row for step ingredients

This commit is contained in:
Alexander Rose
2021-11-13 14:12:10 +01:00
parent 5ae440d5c9
commit 4626af3505

View File

@@ -88,23 +88,21 @@
</div> </div>
</div> </div>
<br/> <br/>
<div class="row"> <template v-for="s in recipe.steps" >
<div class="col-md-12"> <div class="row" v-bind:key="s.id">
<table class="table table-sm"> <div class="col-md-12">
<!-- eslint-disable vue/no-v-for-template-key-on-child --> <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
<template v-for="s in recipe.steps" > <b v-bind:key="s.id">{{s.name}}</b>
<template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
<b v-bind:key="s.id">{{s.name}}</b>
</template>
<template v-for="i in s.ingredients">
<ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
@checked-state-changed="updateIngredientCheckedState"></ingredient-component>
</template>
</template> </template>
<!-- eslint-enable vue/no-v-for-template-key-on-child --> <table class="table table-sm">
</table> <template v-for="i in s.ingredients">
<ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
@checked-state-changed="updateIngredientCheckedState"></ingredient-component>
</template>
</table>
</div>
</div> </div>
</div> </template>
</div> </div>
</div> </div>
</div> </div>