Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2024-12-28 02:16:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Link back to the item page

Browse source
This commit is contained in:
Michał 2024-05-03 17:00:34 +01:00
parent c54c9c05a9
commit ec2ef95cca
1 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,7 @@
<script lang="ts">
import { link } from 'svelte-spa-router';
import { Plus, Minus, Trash } from 'phosphor-svelte';
import type { CartItem } from "../lib/types";
import Cart from "../lib/cart";
@ -13,11 +16,13 @@
{/if}
<ul>
<li class="basket-item-name">{item.data.name}</li>
<li class="basket-item-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
<li class="basket-item-controls">
<button on:click={() => { Cart.addToCart(item.uuid, -1) }}>-</button>
<button class="button " on:click={() => { Cart.addToCart(item.uuid, -1) }}><Minus /></button>
<p>{item.amount}</p>
<button on:click={() => { Cart.addToCart(item.uuid, 1) }}>+</button>
<button class="button " on:click={() => { Cart.addToCart(item.uuid, 1) }}><Plus /></button>
<hr>
<button class="button evil" on:click={() => { Cart.removeByUUID(item.uuid) }}><Trash /></button>
</li>
<li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
</ul>
@ -59,14 +64,21 @@
object-fit: cover;
}
.basket-item-name {
.basket-item-name a {
font-size: $font-size-h2;
text-decoration: underline;
color: $color-on-light;
&:hover {
text-decoration: none;
}
}
.basket-item-controls {
display: flex;
flex-direction: row;
> button {
> .button {
width: 35px;
height: 35px;
@ -89,6 +101,16 @@
border: 1px solid rgba($color-primary, 0.9);
outline: 0 solid transparent;
}
&.evil {
border: 1px solid $color-error;
color: $color-error;
&:hover,
&:focus {
background-color: rgba($color-error, 0.1);
}
}
}
> p {
@ -105,6 +127,16 @@
border: 1px solid transparent;
color: $color-on-light;
}
> hr {
margin: 0 $spacing-small;
width: 1px;
height: 100%;
border: 0 solid transparent;
background-color: rgba($color-dark, 0.1);
}
}
.basket-item-price {
font-size: $font-size-p;