Rearrange ingredients

src/components/CompactParsedIngredient.vue

@@ -1,12 +1,13 @@
 <template>
 <div class="compact-parse-results">
-    <span class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
+    <p class="parse-element teaser-image" v-if="ingredient.product && ingredient.product.img_small">
         <img :src="ingredient.product.img_small" />
-    </span>
+    </p>
+    <p class="ingredient-details">
         <span class="parse-element quantity" :class="{ missing: !(ingredient?.quantity)}">{{ ingredient?.quantity || 'qty' }}</span>
         <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
         <span class="parse-element helper" >of</span>
-    <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
+        <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>:&nbsp;
         <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
             <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
             ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
@@ -18,6 +19,7 @@
                 (product)
             </a>
         </span>
+    </p>
 </div>
 </template>
 
@@ -38,6 +40,7 @@ export default {
 <style scoped>
 
 .compact-parse-results {
+    flex: left;
     display: flex;
     justify-content: left;
     text-align: left;
@@ -67,6 +70,10 @@ export default {
     height: 2em;
 }
 
+.ingredient-details {
+    flex: 1;
+}
+
 .quantity {
   color: blue;
 }

src/components/EditRecipePage.vue

@@ -1,8 +1,9 @@
 <template>
 <div>
     <div v-if="!id && !recipe">
-        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
+        <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" /> <br />
         <button @click="parseLink">Parse</button>
+        <button @click="createFromScratch">Create from Scratch</button>
     </div>
 
     <div v-if="parse_failed">
@@ -136,7 +137,7 @@ export default {
         },
         async updateProduct(ingredient, product_link) {
             const product = await data.parseProduct(ingredient, product_link);
-            this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product } : i);
+            this.recipe.ingredients = this.recipe.ingredients.map(i => i.name == ingredient.name ? { ...i, product, product_id: product.id } : i);
         },
         async updateIngredient(ingredient, line) {
             const newIngredients = await data.parseIngredients([line]);
@@ -158,6 +159,15 @@ export default {
             }
 
             alert('Failed to save recipe');
+        },
+        async createFromScratch() {
+            this.recipe = {
+                id: 0,
+                name: 'My new recipe',
+                link: '',
+                ingredients: [],
+                image_urls: []
+            }
         }
     },
 }

src/components/MealPlanPage.vue

@@ -24,6 +24,10 @@ li {
     list-style-type: none;
 }
 
+ul.meals-list {
+    padding: 0;
+}
+
 .toggle-actions {
     cursor: pointer;
     background-color: #fff;