From f6e8f4291ceae7d1beb2d810bd180dab0ab06117 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Thu, 9 May 2024 16:43:02 +0100
Subject: [PATCH] Add availability to item, and banner if item is no-longer for
 purchase SCSS fixes, file paths and font sizing Larger spacing for item
 screen

---
 front/src/lib/test-data.ts       |  9 +++++
 front/src/lib/types.ts           |  1 +
 front/src/pages/PageCart.svelte  |  2 --
 front/src/pages/PageItem.svelte  | 58 ++++++++++++++++++++++++++------
 front/src/styles/_container.scss |  2 +-
 front/src/styles/_reset.scss     |  4 +++
 6 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts
index eceb1f7..ac27c40 100644
--- a/front/src/lib/test-data.ts
+++ b/front/src/lib/test-data.ts
@@ -3,6 +3,7 @@ import { type Item, Labels } from "./types";
 const TestData: Item[] = [
     {
         uuid: "soap",
+        availability: true,
         name: "Bar of Soap",
         price: 69.99,
         description: `
@@ -12,6 +13,7 @@ Example
     },
     {
         uuid: "sock",
+        availability: true,
         name: "Sock",
         price: 21,
         description: `
@@ -21,6 +23,7 @@ Example
     },
     {
         uuid: "brick",
+        availability: true,
         name: "Brick",
         price: 0,
         description: `
@@ -30,6 +33,7 @@ Example
     },
     {
         uuid: "toast",
+        availability: true,
         name: "Toast",
         price: 4382749832743,
         description: `
@@ -39,6 +43,7 @@ Example
     },
     {
         uuid: "water",
+        availability: true,
         name: "water",
         price: 1,
         description: `
@@ -48,6 +53,7 @@ Example
     },
     {
         uuid: "mouldy_bread",
+        availability: true,
         name: "half eaten mouldy bread",
         price: -99,
         description: `
@@ -57,6 +63,7 @@ Example
     },
     {
         uuid: "gwagwa",
+        availability: false,
         name: "GwaGwa",
         price: 69,
         labels: [Labels.nut],
@@ -64,6 +71,7 @@ Example
     },
     {
         uuid: "hogmelon",
+        availability: true,
         name: "Hogermellon",
         price: 1111,
         description: `
@@ -78,6 +86,7 @@ Contains the following:
     },
     {
         uuid: "bluhog",
+        availability: true,
         name: "Blue HOGGGGG",
         price: 0,
         description: `
diff --git a/front/src/lib/types.ts b/front/src/lib/types.ts
index 387d9b1..5f1393d 100644
--- a/front/src/lib/types.ts
+++ b/front/src/lib/types.ts
@@ -8,6 +8,7 @@ export enum Labels {
 
 export interface Item {
     uuid: string;
+    availability: boolean;
     name: string;
     price: number;
     labels: Labels[];
diff --git a/front/src/pages/PageCart.svelte b/front/src/pages/PageCart.svelte
index 8c684d1..c290c72 100644
--- a/front/src/pages/PageCart.svelte
+++ b/front/src/pages/PageCart.svelte
@@ -22,8 +22,6 @@
     });
 </script>
 
-<!--<button on:click={() => { localStorage['basket'] = "balls" }}>Fuck up the cart</button>-->
-
 {#await cartLoaded}
     <div id="emptyCart">
         <h1>Cart Loading&nbsp;<Basket weight="fill" /></h1>
diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte
index 1360749..8a34b45 100644
--- a/front/src/pages/PageItem.svelte
+++ b/front/src/pages/PageItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { link } from 'svelte-spa-router';
-    import { Acorn, Fish, GrainsSlash, Leaf, Minus, Pepper, Plus, SmileySad, ShoppingCart } from "phosphor-svelte";
+    import { Acorn, Fish, GrainsSlash, Leaf, Minus, Pepper, Plus, SmileySad, ShoppingCart, SealWarning } from "phosphor-svelte";
     import SvelteMarkdown from 'svelte-markdown'
 
     import { Labels } from "../lib/types";
@@ -38,6 +38,14 @@
     }
 </script>
 
+{#await item then item}
+    {#if !item.availability}
+        <div class="notice error">
+            <SealWarning weight="fill" />&nbsp;&nbsp;<span>Item is no-longer for sale</span>
+        </div>
+    {/if}
+{/await}
+
 <div class="main">
     {#await item}
         <div id="images">
@@ -60,7 +68,7 @@
         </div>
     {:then item}
         <div id="images">
-            <div class="img-main">
+            <div class="img-main loaded">
                 {#if item.images && item.images[selectedImage]}
                     <img src="{item.images[selectedImage]}" alt="Item">
                 {:else}
@@ -79,11 +87,12 @@
                 {/if}
             </ul>
         </div>
-
         <div id="info">
             <h2>{item.name}</h2>
             <p>£{item.price}</p>
 
+            <div class="spacer" />
+
             <div class="container">
                 <div id="description">
                     {#if item.description}
@@ -98,6 +107,8 @@
                 </div>
             </div>
 
+            <div class="spacer half" />
+
             <ul id="allergy-labels">
                 {#each item.labels as label}
                     {#if label === Labels.vegan}
@@ -114,6 +125,8 @@
                 {/each}
             </ul>
 
+            <div class="spacer" />
+
             <div id="basket-controls">
                 <button class="button" class:disabled={basketAmount <= 1} on:click={reduce}><Minus /></button>
                 <p>{basketAmount}</p>
@@ -154,6 +167,30 @@
 
     $padding: 1px;
 
+    .notice {
+        margin-right: auto;
+        margin-bottom: $spacing-large;
+        margin-left: auto;
+
+        max-width: $sizing-default-width;
+        height: 45px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: $font-size-h6;
+
+        border-radius: $border-radius-normal;
+        background: $color-dark;
+        color: $color-on-dark;
+
+        &.error {
+            background: $color-error;
+            color: $color-on-error;
+        }
+    }
+
     .main {
         display: flex;
         flex-direction: row;
@@ -176,6 +213,12 @@
 
             overflow: hidden;
 
+            &.loaded {
+                border-radius: $border-radius-large;
+                border: 1px solid rgba($color-dark, 0.15);
+                background-color: rgba($color-dark, 0.1);
+            }
+
             > .loading.image {
                 width: 100%;
                 height: 100%;
@@ -184,8 +227,6 @@
             > img {
                 max-width: 100%;
                 max-height: 100%;
-
-                border-radius: $border-radius-normal;
             }
         }
 
@@ -245,18 +286,15 @@
         align-items: flex-end;
 
         > h2 {
-            margin-bottom: $spacing-small;
-            padding: 0;
+            padding-bottom: $spacing-xsmall;
             font-size: $font-size-h1;
         }
         > p {
-            margin-bottom: $spacing-normal;
             padding: 0;
             font-size: $font-size-h2;
         }
 
         .container {
-            margin-bottom: $spacing-small;
             width: 100%;
 
             #description {
@@ -400,7 +438,7 @@
         flex-wrap: wrap;
 
         > li {
-            margin: 0 0 $spacing-small $spacing-xsmall;
+            margin: 0 0 0 $spacing-xsmall;
             padding: 0 $spacing-small;
 
             min-width: 30px;
diff --git a/front/src/styles/_container.scss b/front/src/styles/_container.scss
index b0dd7d6..f49b865 100644
--- a/front/src/styles/_container.scss
+++ b/front/src/styles/_container.scss
@@ -1,6 +1,6 @@
 .container {
     border-radius: $border-radius-normal;
-    background-image: url("/BackgroundTextureAlt.svg");
+    background-image: url("/assets/BackgroundTextureAlt.svg");
     background-repeat: no-repeat;
     background-size: 200px 250px;
     background-position: 5px -43px;
diff --git a/front/src/styles/_reset.scss b/front/src/styles/_reset.scss
index 448f0df..0927eff 100644
--- a/front/src/styles/_reset.scss
+++ b/front/src/styles/_reset.scss
@@ -86,10 +86,14 @@ hr {
 
 button {
     font-family: $font-family;
+    font-size: $font-size-small;
 }
 
 .spacer {
     height: $spacing-large;
+    &.half {
+        height: calc($spacing-large / 2);
+    }
 }
 
 main {