Added spacer to full ingredient list when buttons visible

This commit is contained in:
jableader 2024-10-15 19:39:22 +11:00
parent 8adda59d70
commit ee6b4e9754

View file

@ -10,6 +10,12 @@
</li> </li>
</ul> </ul>
<div v-if="productGroupsToPurchase.length === 0">
<p>
No items to purchase
</p>
</div>
<div class="purchased-slider"> <div class="purchased-slider">
<span v-if="purchasedGroups.length === 0"></span> <span v-if="purchasedGroups.length === 0"></span>
<button v-else-if="showPurchased" @click="showPurchased=false" > Hide Purchased </button> <button v-else-if="showPurchased" @click="showPurchased=false" > Hide Purchased </button>
@ -27,6 +33,10 @@
</div> </div>
</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 --> <!-- 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"> <div class="footer-buttons" v-if="selected.length">
<p v-if="selected.length === 1"> <p v-if="selected.length === 1">
@ -114,6 +124,10 @@ button img {
height: 2em; height: 2em;
} }
.spacer {
height: 12em;
}
</style> </style>
<script> <script>