From 6f97ad9a4c11a16100cc345452b254e048318d65 Mon Sep 17 00:00:00 2001 From: Fluffy Date: Fri, 3 May 2024 13:10:37 +0100 Subject: [PATCH] Add styling to BasketItem Move footer style to its own file Make the contact form a bit more intuitive General cleanup --- front/src/App.svelte | 67 -------------------------- front/src/components/BasketItem.svelte | 42 +++++++++++++++- front/src/lib/test-data.ts | 14 +++--- front/src/pages/PageContact.svelte | 10 ++++ front/src/pages/PageItem.svelte | 26 +++++++++- front/src/pages/PageMenu.svelte | 6 --- front/src/styles/_footer.scss | 61 +++++++++++++++++++++++ front/src/styles/_navigation_bar.scss | 3 +- front/src/styles/main.scss | 1 + 9 files changed, 146 insertions(+), 84 deletions(-) create mode 100644 front/src/styles/_footer.scss diff --git a/front/src/App.svelte b/front/src/App.svelte index d490fb4..d4192b6 100644 --- a/front/src/App.svelte +++ b/front/src/App.svelte @@ -95,7 +95,6 @@ - - - diff --git a/front/src/components/BasketItem.svelte b/front/src/components/BasketItem.svelte index 8de04e9..b8830f1 100644 --- a/front/src/components/BasketItem.svelte +++ b/front/src/components/BasketItem.svelte @@ -16,7 +16,7 @@
  • {item.data.name}
  • - +

    {item.amount}

  • £{item.data.price * item.amount} (£{item.data.price})
    • @@ -65,6 +65,46 @@ .basket-item-controls { display: flex; flex-direction: row; + + > button { + width: 35px; + height: 35px; + + display: flex; + justify-content: center; + align-items: center; + + font-family: $font-family; + font-size: $font-size-p; + + border: 1px solid rgba($color-dark, 0.2); + border-radius: $border-radius-normal; + background-color: $color-light; + color: $color-on-light; + + &:hover { + border: 1px solid rgba($color-dark, 0.4); + } + &:focus { + border: 1px solid rgba($color-primary, 0.9); + outline: 0 solid transparent; + } + } + + > p { + width: 40px; + height: 35px; + + display: flex; + justify-content: center; + align-items: center; + + font-family: $font-family; + font-size: $font-size-p; + + border: 1px solid transparent; + color: $color-on-light; + } } .basket-item-price { font-size: $font-size-p; diff --git a/front/src/lib/test-data.ts b/front/src/lib/test-data.ts index a62f50c..960cd7d 100644 --- a/front/src/lib/test-data.ts +++ b/front/src/lib/test-data.ts @@ -44,13 +44,13 @@ const TestData: Item[] = [ labels: [Labels.nut], detail: "Example", }, - { - uuid: "gwagwa", - name: "GwaGwa", - price: 69, - labels: [Labels.nut], - image: "/dab.jpg", - }, + // { + // uuid: "gwagwa", + // name: "GwaGwa", + // price: 69, + // labels: [Labels.nut], + // image: "/dab.jpg", + // }, { uuid: "hogmelon", name: "Hogermellon", diff --git a/front/src/pages/PageContact.svelte b/front/src/pages/PageContact.svelte index 224821f..1e1ef61 100644 --- a/front/src/pages/PageContact.svelte +++ b/front/src/pages/PageContact.svelte @@ -28,7 +28,17 @@ } function onSubmit() { + nameValid = true; + emailValid = true; + messageValid = false; + formMessage = postContactEmail(name, email, message); + + formMessage.catch(() => { + validateName(); + validateEmail(); + validateMessage(); + }); } diff --git a/front/src/pages/PageItem.svelte b/front/src/pages/PageItem.svelte index 8e0d3ce..79041e9 100644 --- a/front/src/pages/PageItem.svelte +++ b/front/src/pages/PageItem.svelte @@ -57,7 +57,7 @@

    {item.detail}

    - + {:catch error}
    @@ -156,6 +156,30 @@ } } + #add-to-cart { + padding: 0 $spacing-normal; + + height: 30px; + + display: flex; + justify-content: center; + align-items: center; + + text-shadow: 0 1px 0.5px rgba($color-dark, 0.3);; + + border: 0 solid transparent; + border-radius: 9999px; + background-color: $color-primary; + color: $color-on-primary; + + &:hover, &:focus { + border: 0 solid transparent; + background-color: $color-dark; + color: $color-on-dark; + outline: 0 solid transparent + } + } + .other { margin-left: auto; margin-right: auto; diff --git a/front/src/pages/PageMenu.svelte b/front/src/pages/PageMenu.svelte index fcce93f..0e47728 100644 --- a/front/src/pages/PageMenu.svelte +++ b/front/src/pages/PageMenu.svelte @@ -133,12 +133,6 @@ Hide Unavailable -
  • - -
    • diff --git a/front/src/styles/_footer.scss b/front/src/styles/_footer.scss new file mode 100644 index 0000000..82c5932 --- /dev/null +++ b/front/src/styles/_footer.scss @@ -0,0 +1,61 @@ +footer { + padding: $spacing-normal; + + position: relative; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + + border-top: 3px solid $color-primary; + background-color: $color-dark; + color: $color-on-dark; + + overflow: hidden; +} + +.footer-section { + padding: $spacing-normal; + + min-width: 200px; + width: 100%; + max-width: 500px; + + > ul { + padding: 0; + + display: flex; + flex-direction: row; + + > li { + margin: 0 $spacing-small 0 0; + list-style: none; + + > a { + height: 40px; + width: 40px; + + display: flex; + justify-content: center; + align-items: center; + + text-decoration: none; + font-size: 16px; + + border-radius: $border-radius-circle; + background-color: transparent; + color: $color-on-dark; + + &:hover { + background-color: $color-light; + color: $color-on-light; + } + } + } + } + + > h4 { + margin-bottom: $spacing-xsmall; + } +} \ No newline at end of file diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss index 480b48d..5119b05 100644 --- a/front/src/styles/_navigation_bar.scss +++ b/front/src/styles/_navigation_bar.scss @@ -13,11 +13,10 @@ nav { top: 0; left: 0; - border-bottom: 2px solid $color-primary; + border-bottom: 3px solid $color-primary; background-color: $color-dark; color: $color-light; - //transition: box-shadow 0.05s ease-in-out; z-index: 9999999; ul { diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss index a02f551..e09cb66 100644 --- a/front/src/styles/main.scss +++ b/front/src/styles/main.scss @@ -3,6 +3,7 @@ @import "reset"; @import "loading_bar"; @import "navigation_bar"; +@import "footer"; @import "announcement_banner"; @import "container"; @import "menu_item";