From 97b5f6471859fa6fa12537e76a9f73423811fdf6 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 13 Jan 2021 13:12:22 +0100
Subject: [PATCH] pretty decent looking view

---
 vue/src/apps/RecipeView/RecipeView.vue |  2 +-
 vue/src/components/Nutrition.vue       |  2 +-
 vue/src/components/Step.vue            | 78 +++++++++++++++++---------
 vue/webpack-stats.json                 |  2 +-
 4 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index fa5bc5cd4..15e3e98d2 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -122,7 +122,7 @@
 
     <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-      <Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
+      <Step :recipe="recipe" v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
     </div>
 
 
diff --git a/vue/src/components/Nutrition.vue b/vue/src/components/Nutrition.vue
index 757917a5f..8f78ea57c 100644
--- a/vue/src/components/Nutrition.vue
+++ b/vue/src/components/Nutrition.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <div v-if="recipe.nutrition !== null">
     <div class="card border-success">
 
       <div class="card-body">
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index 17e2f1541..4a56bbea3 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -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() {
 
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 86a6a4e3a..ec124cd35 100644
--- a/vue/webpack-stats.json
+++ b/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.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"}
\ No newline at end of file
+{"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.199fbcc22de2dbfbf840.hot-update.js","publicPath":"http://localhost:8080/recipe_view.199fbcc22de2dbfbf840.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.199fbcc22de2dbfbf840.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  22:44  error  Unexpected mutation of \"details_visible\" prop           vue/no-mutating-props\n  93:22  error  The \"details_visible\" property should be a constructor  vue/require-prop-type-constructor\n\n✖ 2 problems (2 errors, 0 warnings)\n"}
\ No newline at end of file