From 6b3a87ebc887362c61885c9f02a61224326144c8 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sun, 12 May 2024 16:42:20 +1000
Subject: [PATCH] Moved the delete button

---
 .../ingredients/EditableIngredientsPanel.vue  | 39 +++++++++++++++++--
 src/components/recipes/EditRecipePage.vue     |  3 +-
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/ingredients/EditableIngredientsPanel.vue b/src/components/ingredients/EditableIngredientsPanel.vue
index 103d073..720501f 100644
--- a/src/components/ingredients/EditableIngredientsPanel.vue
+++ b/src/components/ingredients/EditableIngredientsPanel.vue
@@ -4,7 +4,12 @@
     <ul>
         <li v-for="ingredient in ingredients" :key="ingredient.id">
             <div v-if="editing">
-                <ingredient-line :ingredient="ingredient" @update="updateIngredient" @update-ingredient="updateIngredient" @update-product-link="updateProduct" />
+                <p class="ingredient-line">
+                    <ingredient-line 
+                        :ingredient="ingredient" 
+                        @update-ingredient="updateIngredient" 
+                        @update-product-link="updateProduct" />
+                </p>
                 <button @click="$emit('on-delete', ingredient)">
                     <img class="icon" :src="require('@/assets/trash.svg')" />
                 </button>
@@ -20,11 +25,37 @@
 
 </template>
 
-<style>
+<style scoped>
+
 .icon {
-    width: 1em;
-    height: 1em;
+    width: 2em;
+    height: 2em;
 }
+
+ul {
+    padding: 0;
+}
+
+li {
+    list-style: none;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+li > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.ingredient-line {
+    flex: 1;
+    margin: 0;
+    margin-right: 1em;
+}
+
 </style>
 
 <script>
diff --git a/src/components/recipes/EditRecipePage.vue b/src/components/recipes/EditRecipePage.vue
index aa4475b..7c059d7 100644
--- a/src/components/recipes/EditRecipePage.vue
+++ b/src/components/recipes/EditRecipePage.vue
@@ -21,8 +21,7 @@
                     <ingredient-line 
                         :ingredient="ingredient"
                         @update-ingredient="updateIngredient"
-                        @update-product-link="updateProduct"
-                        @delete-item="deleteIngredient" />
+                        @update-product-link="updateProduct" />
                 </p>
                 <button @click="deleteIngredient(ingredient)">Delete</button>
             </li>