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

pretty decent looking view

Browse Source
This commit is contained in:
vabene1111
2021-01-13 13:12:22 +01:00
parent b042ab72cd
commit 97b5f64718
4 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div>
<div v-if="recipe.nutrition !== null">
<div class="card border-success">
<div class="card-body">

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

@ -2,8 +2,10 @@
<div>
<hr/>
<template v-if="step.type === 'TEXT'">
<div class="row">
<div class="row" v-if="recipe.steps.length > 1">
<div class="col col-md4">
<h5 class="text-primary">
<template v-if="step.name">{{ step.name }}</template>
@ -13,44 +15,64 @@
{{ step.time }} {{ _('min') }}</small>
</h5>
</div>
</div>
<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 class="col col-md-8" style="text-align: right">
<b-button @click="details_visible = !details_visible" style="border: none; background: none"
class="shadow-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
<i class="far fa-check-circle"></i>
</b-button>
</div>
</div>
<b-collapse id="collapse-1" v-model="details_visible">
<div class="row">
<div class="col col-md-4" v-if="step.ingredients.length > 0 && recipe.steps.length > 1">
<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" :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1,}">
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
</div>
</div>
</b-collapse>
</template>
<template v-if="step.type === 'TIME'">
<div class="row">
<div class="col col-md-12" style="text-align: center">
<div class="col-10 offset-1" 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>
<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 class="col-1" style="text-align: right">
<b-button @click="details_visible = !details_visible" style="border: none; background: none"
class="shadow-none" :class="{ 'text-primary': details_visible, 'text-success': !details_visible}">
<i class="far fa-check-circle"></i>
</b-button>
</div>
</div>
<b-collapse id="collapse-1" v-model="details_visible">
<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>
</b-collapse>
</template>
@ -80,6 +102,12 @@ export default {
step: Object,
servings: Number,
index: Number,
recipe: Object,
},
data() {
return {
details_visible: true,
}
},
mounted() {