mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 04:10:06 -05:00
Code Issues 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>

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

@@ -1,30 +1,58 @@
<template>
<div>
<h5 class="text-secondary">
<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>
<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="row">
<div class="col-md-4">
<i class="fa fa-stopwatch"></i> {{ step.time }}
<div class="col col-md-4">
<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>
<!-- 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-md-8">
<i class="fas fa-paragraph text-secondary"></i>
<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>

2
vue/webpack-stats.json
View File

@@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.b45a25f0f923b4f16949.hot-update.js","publicPath":"http://localhost:8080/recipe_view.b45a25f0f923b4f16949.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.b45a25f0f923b4f16949.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\RecipeView.vue\n 48:130 error Parsing error: missing-whitespace-between-attributes vue/no-parsing-error\n 48:131 error Parsing error: unexpected-character-in-attribute-name vue/no-parsing-error\n\n✖ 2 problems (2 errors, 0 warnings)\n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.175ca61f5fa44916265d.hot-update.js","publicPath":"http://localhost:8080/recipe_view.175ca61f5fa44916265d.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.175ca61f5fa44916265d.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n 18:13 error Custom elements in iteration require 'v-bind:key' directives vue/valid-v-for\n\n✖ 1 problem (1 error, 0 warnings)\n"}