wip step design

vue/src/apps/RecipeView/RecipeView.vue

@@ -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">
+                  <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                    <div v-for="i in s.ingredients" v-bind:key="i.id">
+                  <template v-for="s in recipe.steps">
-                      <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
+                    <template v-for="i in s.ingredients" >
-                    </div>
+                      <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
-                  </div>
+                    </template>
+                  </template>
+                  <!-- eslint-enable vue/no-v-for-template-key-on-child -->
                 </table>
               </div>
             </div>

vue/src/components/Ingredient.vue

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

vue/src/components/Step.vue

@@ -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">
+            <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i>
-      <template v-if="step.name">{{ step.name }}</template>
+              {{ step.time }} {{ _('min') }}</small>
-      <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
+          </h5>
-    </h5>
+        </div>
-
-    <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>
       </div>
 
-      <div class="col-md-8">
+
-        <i class="fas fa-paragraph text-secondary"></i>
+      <div class="row">
-        <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
+
+        <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>
 

vue/webpack-stats.json

@@ -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"}