cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip step design

Browse Source
This commit is contained in:
vabene1111
2021-01-13 12:29:23 +01:00
parent a59ac44f3b
commit b042ab72cd
4 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -77,11 +77,13 @@
<div class="row">
<div class="col-md-12">
<table class="table table-sm">
<div v-for="s in recipe.steps" v-bind:key="s.id">
<div v-for="i in s.ingredients" v-bind:key="i.id">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
</div>
</div>
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="s in recipe.steps">
<template v-for="i in s.ingredients" >
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
</template>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
</div>

2
vue/src/components/Ingredient.vue
View File

@ -1,5 +1,4 @@
<template>
<div>
<tr>
<td>
<input type="checkbox">
@ -25,7 +24,6 @@
</div>
</td>
</tr>
</div>
</template>
<script>

66
vue/src/components/Step.vue
View File

@ -1,30 +1,58 @@
<template>
<div>
<hr/>
<template v-if="step.type === 'TEXT'">
<div class="row">
<div class="col col-md4">
<h5 class="text-primary">
<template v-if="step.name">{{ step.name }}</template>
<template v-else>{{ _('Step') }} {{ index + 1 }}</template>
<h5 class="text-secondary">
<template v-if="step.name">{{ step.name }}</template>
<template v-else>{{ _('Step') }} {{ index + 1 }}</template>
</h5>
<div class="row">
<div class="col-md-4">
<i class="fa fa-stopwatch"></i> {{ step.time }}
<table class="table table-sm">
<div v-for="i in step.ingredients" v-bind:key="i.id">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
</div>
</table>
<small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i>
{{ step.time }} {{ _('min') }}</small>
</h5>
</div>
</div>
<div class="col-md-8">
<i class="fas fa-paragraph text-secondary"></i>
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
<div class="row">
<div class="col col-md-4">
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="i in step.ingredients">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
</div>
<div class="col col-md-8">
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
</div>
</div>
</template>
<template v-if="step.type === 'TIME'">
<div class="row">
<div class="col col-md-12" style="text-align: center">
<h4 class="text-primary">
<template v-if="step.name">{{ step.name }}</template>
<template v-else>{{ _('Step') }} {{ index + 1 }}</template>
</h4>
<span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i>
{{ step.time }} {{ _('min') }}</span>
</div>
</div>
<div class="row" v-if="step.instruction !== ''">
<div class="col col-md-12" style="text-align: center">
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
</div>
</div>
</div>
</template>
</div>