Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-01-16 03:25:19 +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"> <script lang="ts">
import { link } from 'svelte-spa-router';
import { Plus, Minus, Trash } from 'phosphor-svelte';
import type { CartItem } from "../lib/types"; import type { CartItem } from "../lib/types";
import Cart from "../lib/cart"; import Cart from "../lib/cart";
@ -13,11 +16,13 @@
{/if} {/if}
<ul> <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"> <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> <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>
<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>
@ -59,14 +64,21 @@
object-fit: cover; object-fit: cover;
} }
.basket-item-name { .basket-item-name a {
font-size: $font-size-h2; font-size: $font-size-h2;
text-decoration: underline;
color: $color-on-light;
&:hover {
text-decoration: none;
}
} }
.basket-item-controls { .basket-item-controls {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
> button { > .button {
width: 35px; width: 35px;
height: 35px; height: 35px;
@ -89,6 +101,16 @@
border: 1px solid rgba($color-primary, 0.9); border: 1px solid rgba($color-primary, 0.9);
outline: 0 solid transparent; outline: 0 solid transparent;
} }
&.evil {
border: 1px solid $color-error;
color: $color-error;
&:hover,
&:focus {
background-color: rgba($color-error, 0.1);
}
}
} }
> p { > p {
@ -105,6 +127,16 @@
border: 1px solid transparent; border: 1px solid transparent;
color: $color-on-light; 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 { .basket-item-price {
font-size: $font-size-p; font-size: $font-size-p;