save

vue/src/apps/RecipeView/RecipeView.vue

@@ -28,12 +28,12 @@
         <div class="card border-primary">
           <div class="card-body">
             <div class="row">
-              <div class="col col-md-9">
+              <div class="col col-md-8">
                 <h4 class="card-title">{{ _('Ingredients') }}</h4>
               </div>
-              <div class="col col-md-3">
+              <div class="col col-md-4">
                 <div class="input-group d-print-none">
-                  <input type="number" value="1" maxlength="3" class="form-control" style="min-width: 2vw"
+                  <input type="number" value="1" maxlength="3" class="form-control" style="min-width: 4vw;"
                          v-model.number="servings"/>
                   <div class="input-group-append">
                     <span class="input-group-text"><i class="fas fa-calculator"></i></span>

vue/src/components/CompileComponent.vue

@@ -9,6 +9,13 @@ import Vue from 'vue'
 
 import ScalableNumber from "@/components/ScalableNumber";
 
+/*
+i dont 100% understand this kind of dirty workaround but it works ...
+If you read this and know a better way of running arbitrary vue code that comes from an API endpoint let me know
+
+obviously only run trusted code this way ...
+*/
+
 export default {
   name: 'CompileComponent',
   props: ['code', 'servings'],
@@ -23,10 +30,10 @@ export default {
       components: {
         ScalableNumber, // eslint-disable-line
       },
-      template: `
-        <div>${this.code}</div>`
+      template: `<div>${this.code}</div>`
     })
 
   }
 }
 </script>
+

vue/src/components/Step.vue

@@ -21,11 +21,8 @@
 
       <div class="col-md-9">
         <i class="fas fa-paragraph text-secondary"></i>
-        <span v-html="step.ingredients_markdown">
+        <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
 
-        </span>
-
-         <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
       </div>
     </div>
 
@@ -39,7 +36,6 @@ import {calculateAmount} from "@/utils/utils";
 
 import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
-import ScalableNumber from "@/components/ScalableNumber";
 
 import CompileComponent from "@/components/CompileComponent";
 
@@ -50,8 +46,7 @@ export default {
   ],
   components: {
     Ingredient,
-    CompileComponent, //eslint-disable-line
-    ScalableNumber, // eslint-disable-line
+    CompileComponent,
   },
   props: {
     step: Object,