From ec778edb9354598f0c9a5baa5dbdeb7898664f3f Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Wed, 13 Jan 2021 20:41:42 +0100
Subject: [PATCH] alignment

---
 vue/src/apps/RecipeView/RecipeView.vue | 67 ++++++++++++--------------
 vue/src/components/Step.vue            |  2 +-
 vue/webpack-stats.json                 |  2 +-
 3 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 09b797b40..64d3e5094 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -18,51 +18,47 @@
     <hr/>
     <div class="row">
       <div class="col col-md-3">
-        <table>
-          <tr>
-            <td rowspan="2"><i class="fas fa-user-clock fa-2x text-primary"></i></td>
-            <td><span class="text-primary"><b>{{ _('Preparation') }}</b></span></td>
-          </tr>
-          <tr>
-            <td> {{ recipe.working_time }} {{ _('min') }}</td>
-          </tr>
-        </table>
+        <div class="row d-flex" style="padding-left: 16px;height: 100%">
+          <div class="my-auto" style="padding-right: 4px">
+           <i class="fas fa-user-clock fa-2x text-primary"></i>
+          </div>
+          <div class="my-auto" style="padding-right: 4px">
+            <span class="text-primary"><b>{{ _('Preparation') }}</b></span><br/>
+            {{ recipe.working_time }} {{ _('min') }}
+          </div>
+        </div>
       </div>
 
-      <div class="col  col-md-3">
-        <table>
-          <tr>
-            <td rowspan="2"><i class="far fa-clock fa-2x text-primary"></i></td>
-            <td><span class="text-primary"><b>{{ _('Waiting') }}</b></span></td>
-          </tr>
-          <tr>
-            <td>{{ recipe.waiting_time }} {{ _('min') }}</td>
-          </tr>
-        </table>
+      <div class="col col-md-3">
+        <div class="row d-flex" style="height: 100%">
+          <div class="my-auto" style="padding-right: 4px">
+           <i class="far fa-clock fa-2x text-primary"></i>
+          </div>
+          <div class="my-auto" style="padding-right: 4px">
+            <span class="text-primary"><b>{{ _('Waiting') }}</b></span><br/>
+            {{ recipe.waiting_time }} {{ _('min') }}
+          </div>
+        </div>
       </div>
 
       <div class="col col-md-4 col-10">
-        <table>
-          <tr>
-            <td>
-              <i class="fas fa-pizza-slice fa-2x text-primary"></i>
-            </td>
-            <td>
-              <input dir="rtl"
+        <div class="row d-flex" style="padding-left: 16px;height: 100%">
+          <div class="my-auto" style="padding-right: 4px">
+            <i class="fas fa-pizza-slice fa-2x text-primary"></i>
+          </div>
+          <div class="my-auto" style="padding-right: 4px">
+            <input dir="rtl"
                      style="border-width:0px;border:none; padding:0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
                      value="1" maxlength="3"
                      type="number" class="form-control form-control-lg" v-model.number="servings"/>
-            </td>
-
-            <td style="padding-left: 0.5vw">
-              <b>{{ _('Servings') }}</b>
-            </td>
-          </tr>
-        </table>
-
+          </div>
+          <div class="my-auto">
+            <b>{{ _('Servings') }}</b>
+          </div>
+        </div>
       </div>
 
-      <div class="col col-md-2 col-2" style="text-align: right; padding-right: 1vw">
+      <div class="col col-md-2 col-2 my-auto" style="text-align: right; padding-right: 1vw">
         <recipe-context-menu v-bind:recipe="recipe" :servings="servings"></recipe-context-menu>
       </div>
     </div>
@@ -124,7 +120,6 @@
       <ImageViewer :recipe="recipe"></ImageViewer>
     </div>
 
-    <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
       <Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
             @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index fca0f3bb9..4255fe1f5 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -60,7 +60,7 @@
           </b-link>
         </div>
 
-        <div class="col-1" style="text-align: right">
+        <div class="col-2" 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>
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 8740979fd..1bce99bf7 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.28f50ed664b7081f0b31.hot-update.js","publicPath":"http://localhost:8080/recipe_view.28f50ed664b7081f0b31.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.28f50ed664b7081f0b31.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n  4:41  error  Unexpected mutation of \"ingredient\" prop  vue/no-mutating-props\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.053e29b2cace695f54ae.hot-update.js","publicPath":"http://localhost:8080/recipe_view.053e29b2cace695f54ae.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.053e29b2cace695f54ae.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n  4:41  error  Unexpected mutation of \"ingredient\" prop  vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file