From ee6b4e975455a1fb949949fd2b4e302c357cefe5 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Tue, 15 Oct 2024 19:39:22 +1100
Subject: [PATCH] Added spacer to full ingredient list when buttons visible

---
 .../shopping/CurrentShoppingListPage.vue           | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/shopping/CurrentShoppingListPage.vue b/src/components/shopping/CurrentShoppingListPage.vue
index 66541a5..c41f06f 100644
--- a/src/components/shopping/CurrentShoppingListPage.vue
+++ b/src/components/shopping/CurrentShoppingListPage.vue
@@ -10,6 +10,12 @@
         </li>
     </ul>
 
+    <div v-if="productGroupsToPurchase.length === 0">
+        <p>
+            No items to purchase
+        </p>
+    </div>
+
     <div class="purchased-slider">
         <span v-if="purchasedGroups.length === 0"></span>
         <button v-else-if="showPurchased" @click="showPurchased=false" >⏶ Hide Purchased ⏶</button>
@@ -27,6 +33,10 @@
         </div>
     </div>
 
+    <div class="spacer" v-if="selected.length">
+        &nbsp;
+    </div>
+
     <!-- Display 'Stocked', 'Purchased' and 'Cancel' buttons in a vertical stack fixed to the bottom of the screen when any elements are selected -->
     <div class="footer-buttons" v-if="selected.length">
         <p v-if="selected.length === 1">
@@ -114,6 +124,10 @@ button img {
     height: 2em;
 }
 
+.spacer {
+    height: 12em;
+}
+
 </style>
 
 <script>