Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-01-29 17:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable amount button (at checkout) if amount too low/high

Browse source
This commit is contained in:
Michał 2024-05-04 17:27:25 +01:00
parent d9e95ebda4
commit 5bcebe2011
1 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
front/src/components/BasketItem.svelte
View file

@ -6,6 +6,20 @@
import Cart from "../lib/cart";
export let item: CartItem;
function reduce() {
if (item.amount > 1) {
Cart.addToCart(item.uuid, -1)
}
}
function add() {
if (item.amount < 99) {
Cart.addToCart(item.uuid, 1);
}
}
function yeet() {
Cart.removeByUUID(item.uuid)
}
</script>
<div class="container">
@ -18,11 +32,11 @@
<ul class="basket-item-data">
<li class="basket-item-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
<li class="basket-item-controls">
<button class="button " on:click={() => { Cart.addToCart(item.uuid, -1) }}><Minus /></button>
<button class="button" class:disabled={item.amount <= 1} on:click={reduce}><Minus /></button>
<p>{item.amount}</p>
<button class="button " on:click={() => { Cart.addToCart(item.uuid, 1) }}><Plus /></button>
<button class="button" class:disabled={item.amount >= 99} on:click={add}><Plus /></button>
<hr>
<button class="button evil" on:click={() => { Cart.removeByUUID(item.uuid) }}><Trash /></button>
<button class="button evil" on:click={yeet}><Trash /></button>
</li>
<li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
</ul>
@ -151,7 +165,7 @@
&:hover {
border: 1px solid rgba($color-dark, 0.4);
}
&:focus {
&:focus-visible {
border: 1px solid rgba($color-primary, 0.9);
outline: 0 solid transparent;
}
@ -161,10 +175,22 @@
color: $color-error;
&:hover,
&:focus {
&:focus-visible {
background-color: rgba($color-error, 0.1);
}
}
&.disabled {
border: 1px solid rgba($color-dark, 0.1);
color: rgba($color-on-light, 0.6);
&:hover,
&:focus-visible {
border: 1px solid rgba($color-dark, 0.1);
background-color: $color-light;
color: rgba($color-on-light, 0.6);
}
}
}
> p {