From d42462a54ee29c5ca7027d479f481b98743c47f0 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sun, 12 May 2024 17:33:13 +1000
Subject: [PATCH] Fixed edit-only of editableingredientspanel

---
 .../ingredients/EditableIngredientsPanel.vue        | 13 ++++++++-----
 src/components/shopping/ShoppingPage.vue            |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/ingredients/EditableIngredientsPanel.vue b/src/components/ingredients/EditableIngredientsPanel.vue
index a81b23d..6685001 100644
--- a/src/components/ingredients/EditableIngredientsPanel.vue
+++ b/src/components/ingredients/EditableIngredientsPanel.vue
@@ -1,11 +1,11 @@
 <template>
 
-<div>
+<div :class="{ editing: editing }">
     <button v-if="editing" @click="$emit('on-add')">
         <img class="icon" :src="require('@/assets/add-cart.svg')" /> <br />
         Add Ingredient
     </button>
-    <button @click="toggleEditing">
+    <button @click="toggleEditing" v-if="!editOnly">
         <span v-if="editing">
             <img class="icon" :src="require('@/assets/edit-off.svg')" /> <br />
             Done Editing
@@ -50,9 +50,6 @@ ul {
 
 li {
     list-style: none;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 5px;
 }
 
 li > div {
@@ -62,6 +59,12 @@ li > div {
     width: 100%;
 }
 
+.editing li {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+}
+
 .ingredient-line {
     flex: 1;
     margin: 0;
diff --git a/src/components/shopping/ShoppingPage.vue b/src/components/shopping/ShoppingPage.vue
index 45f8267..d159bf2 100644
--- a/src/components/shopping/ShoppingPage.vue
+++ b/src/components/shopping/ShoppingPage.vue
@@ -6,7 +6,7 @@
         <h4>My Requests</h4>
         <editable-ingredients-panel @on-add="addIngredient" @on-delete="deleteIngredient" @on-update-ingredient="updateIngredient" :ingredients="mySources" />
 
-        <h4>Full shopping list</h4>
+        <h3>Full shopping list</h3>
         <ul class="full-shopping-list">
             <li v-for="item in shoppingList" :key="item.id">
                 <shopping-list-item :product="item.product" :sources="item.sources" />