Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-05-31 07:43:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Michał Gdula 2024-05-04 17:27:25 +01:00
parent d9e95ebda4
commit 5bcebe2011
1 changed files with 31 additions and 5 deletions
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"; import Cart from "../lib/cart";
export let item: CartItem; 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> </script>
<div class="container"> <div class="container">
@ -18,11 +32,11 @@
<ul class="basket-item-data"> <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-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
<li class="basket-item-controls"> <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> <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> <hr>
<button class="button evil" on:click={() => { Cart.removeByUUID(item.uuid) }}><Trash /></button> <button class="button evil" on:click={yeet}><Trash /></button>
</li> </li>
<li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li> <li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
</ul> </ul>
@ -151,7 +165,7 @@
&:hover { &:hover {
border: 1px solid rgba($color-dark, 0.4); border: 1px solid rgba($color-dark, 0.4);
} }
&:focus { &:focus-visible {
border: 1px solid rgba($color-primary, 0.9); border: 1px solid rgba($color-primary, 0.9);
outline: 0 solid transparent; outline: 0 solid transparent;
} }
@ -161,10 +175,22 @@
color: $color-error; color: $color-error;
&:hover, &:hover,
&:focus { &:focus-visible {
background-color: rgba($color-error, 0.1); 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 { > p {