From b56c3cc46d45842996d39f995bf3ec3eed0a4673 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Tue, 23 Apr 2024 16:41:05 +0100 Subject: [PATCH] Add MenuItem design Clean up SCSS styles --- front/package-lock.json | 10 ++ front/package.json | 1 + front/public/MenuItemLoading.svg | 17 +++ front/public/MenuItemLoadingAlt.svg | 17 +++ front/src/App.svelte | 15 +-- front/src/pages/PageIndex.svelte | 5 +- front/src/pages/components/MenuItem.svelte | 54 +++++--- .../src/pages/components/NavigationBar.svelte | 16 ++- front/src/styles/_announcement_banner.scss | 9 +- front/src/styles/_menu_item.scss | 120 ++++++++++++++++++ front/src/styles/_navigation_bar.scss | 20 ++- front/src/styles/_reset.scss | 20 ++- front/src/styles/main.scss | 31 ++++- 13 files changed, 288 insertions(+), 47 deletions(-) create mode 100644 front/public/MenuItemLoading.svg create mode 100644 front/public/MenuItemLoadingAlt.svg create mode 100644 front/src/styles/_menu_item.scss diff --git a/front/package-lock.json b/front/package-lock.json index 6f1f006..08ece96 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -12,6 +12,7 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.2", + "phosphor-svelte": "^2.0.1", "sass": "^1.75.0", "svelte": "^4.2.12", "vite": "^5.2.0" @@ -1070,6 +1071,15 @@ "is-reference": "^3.0.0" } }, + "node_modules/phosphor-svelte": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/phosphor-svelte/-/phosphor-svelte-2.0.1.tgz", + "integrity": "sha512-2Ryvaf1sfCNOF0zTQVghtxOs/6JKn9MV+e9uluNAT9wAosgNYnaBD210WcFGRrva1sF8cddv7EWSS//ITNN4mg==", + "dev": true, + "peerDependencies": { + "svelte": ">=3" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", diff --git a/front/package.json b/front/package.json index 03a5f86..5bb7bb3 100644 --- a/front/package.json +++ b/front/package.json @@ -10,6 +10,7 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.2", + "phosphor-svelte": "^2.0.1", "sass": "^1.75.0", "svelte": "^4.2.12", "vite": "^5.2.0" diff --git a/front/public/MenuItemLoading.svg b/front/public/MenuItemLoading.svg new file mode 100644 index 0000000..42c6595 --- /dev/null +++ b/front/public/MenuItemLoading.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/front/public/MenuItemLoadingAlt.svg b/front/public/MenuItemLoadingAlt.svg new file mode 100644 index 0000000..d91810b --- /dev/null +++ b/front/public/MenuItemLoadingAlt.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/front/src/App.svelte b/front/src/App.svelte index d01c718..8be8961 100644 --- a/front/src/App.svelte +++ b/front/src/App.svelte @@ -22,6 +22,9 @@ + + + {#if showNavBar } 0} /> @@ -37,15 +40,3 @@

TastyBites is a fake restaurant

- - diff --git a/front/src/pages/PageIndex.svelte b/front/src/pages/PageIndex.svelte index 740ae27..d060bfb 100644 --- a/front/src/pages/PageIndex.svelte +++ b/front/src/pages/PageIndex.svelte @@ -9,7 +9,7 @@ {name: "Brick", price: 0}, {name: "Toast", price: 4382749832743}, {name: "water", price: 1}, - {name: "half eaten mouldy bread", price: -9999} + {name: "half eaten mouldy bread", price: -9999}, ]; @@ -29,6 +29,9 @@ Continue reading \ No newline at end of file +
+
    + {#each labels as label} + {#if label === "vegan"} +
    • + {/if} + {#if label === "fish"} +
    • + {/if} + {#if label === "nut"} +
    • + {/if} + {#if label === "spicy"} +
    • + {/if} + {/each} +
+ View +
+ +
    +
  • {name}
    • +
  • £{price}
    • +
+ diff --git a/front/src/pages/components/NavigationBar.svelte b/front/src/pages/components/NavigationBar.svelte index 8f1b59c..6077417 100644 --- a/front/src/pages/components/NavigationBar.svelte +++ b/front/src/pages/components/NavigationBar.svelte @@ -7,14 +7,22 @@ diff --git a/front/src/styles/_announcement_banner.scss b/front/src/styles/_announcement_banner.scss index 3dc61e0..252d5c5 100644 --- a/front/src/styles/_announcement_banner.scss +++ b/front/src/styles/_announcement_banner.scss @@ -1,9 +1,12 @@ .announcement-banner { + padding: $spacing-large; + height: 400px; + background-color: $color-light; - padding: 10px; - border: 1px solid $color-dark; - border-radius: 5px; + color: $color-on-light; + //border: 1px solid $color-dark; + border-radius: $border-radius-normal; position: relative; overflow: hidden; diff --git a/front/src/styles/_menu_item.scss b/front/src/styles/_menu_item.scss new file mode 100644 index 0000000..eb1cdc7 --- /dev/null +++ b/front/src/styles/_menu_item.scss @@ -0,0 +1,120 @@ +.menu-item { + padding: $spacing-normal; + + width: 200px; + height: 200px; + + position: relative; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: $border-radius-large; + background-color: $color-dark; + + overflow: hidden; +} + +.menu-item-image { + width: 100%; + height: 100%; + + position: absolute; + top: 0; + left: 0; + + object-fit: cover; + z-index: 1; +} + +.menu-item-header { + position: relative; + + display: flex; + flex-direction: row; + justify-content: space-between; + + z-index: 2; + + > ul { + padding: 0 0 0 $spacing-normal; + + display: flex; + flex-direction: row; + + > li { + margin: 0 0 0 -15px; + + width: 30px; + height: 30px; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: $border-radius-circle; + background-color: $color-dark; + color: $color-on-dark; + + list-style: none; + + &.vegan { + background-color: $color-vegan; + } + &.fish { + background-color: $color-fish; + } + &.nut { + background-color: $color-nut; + } + &.spicy { + background-color: $color-spicy; + } + } + } + + > a { + padding-left: 10px; + padding-right: 10px; + + height: 30px; + + display: flex; + justify-content: center; + align-items: center; + + text-decoration: none; + font-size: 14px; + + border-radius: $border-radius-circle; + background-color: $color-dark; + color: $color-on-dark; + + &:hover { + background-color: $color-light; + color: $color-on-light; + } + } +} + +.menu-item-detail { + margin: -$spacing-normal; + padding: $spacing-normal; + + position: relative; + + display: flex; + flex-direction: column; + + font-weight: 800; + + background-image: linear-gradient(0deg, $color-dark, rgba($color-dark, 0)); + color: $color-light; + + z-index: 2; + + > li { + list-style: none; + } +} diff --git a/front/src/styles/_navigation_bar.scss b/front/src/styles/_navigation_bar.scss index d7bc2b5..0594b05 100644 --- a/front/src/styles/_navigation_bar.scss +++ b/front/src/styles/_navigation_bar.scss @@ -1,13 +1,18 @@ nav { + padding: 1rem; + width: 100%; - height: 55px; + height: $sizing-navigation-height; + display: flex; + flex-direction: row; + position: fixed; top: 0; left: 0; justify-content: center; align-items: center; - padding: 1rem; + background-color: $color-dark; color: $color-light; z-index: 9999999; @@ -20,11 +25,14 @@ nav { list-style: none; li { margin: 0 1rem; + a { + text-decoration: none; color: inherit; - .active { - color: $color-primary !important; - } + } + + &.active { + color: $color-primary !important; } } } @@ -36,6 +44,6 @@ nav { } &.scrolled { - box-shadow: 0 0 10px 1px $color-dark; + //box-shadow: 0 0 10px 1px $color-dark; } } \ No newline at end of file diff --git a/front/src/styles/_reset.scss b/front/src/styles/_reset.scss index e672f8f..9b9e9d4 100644 --- a/front/src/styles/_reset.scss +++ b/front/src/styles/_reset.scss @@ -1,5 +1,7 @@ *, *::before, *::after { box-sizing: border-box; + font-family: 'Erode', serif; + font-weight: 600; margin: 0; } @@ -10,5 +12,21 @@ body, #app { } body { - background-color: $color-light; + background-color: $color-background; } + +main { + margin-left: auto; + margin-right: auto; + padding: $spacing-normal; + + width: 100%; + max-width: $sizing-default-width; + + position: relative; + flex-grow: 1; + + &.nav-space { + margin-top: $sizing-navigation-height; + } +} \ No newline at end of file diff --git a/front/src/styles/main.scss b/front/src/styles/main.scss index ef6a9cc..3e38298 100644 --- a/front/src/styles/main.scss +++ b/front/src/styles/main.scss @@ -1,8 +1,35 @@ -$color-primary: #6A9343; +// COLORS +$color-background: #e8e1ce; // #ccc2ae; +$color-on-background: #33251a; $color-dark: #443023; -$color-light: #fffbf4; // #ccc2ae; +$color-on-dark: #e1dcd3; +$color-light: #fffbf4; +$color-on-light: #33251a; +$color-primary: #6A9343; +$color-on-primary: #ccc2ae; + +$color-vegan: #75a446; +$color-fish: #487fa6; +$color-nut: #5c4130; +$color-spicy: #c75e32; + +// BORDERS +$border-radius-normal: 5px; +$border-radius-large: 10px; +$border-radius-circle: 99999px; + +// SIZING +$sizing-default-width: 1000px; +$sizing-navigation-height: 55px; + +// PADDING/MARGIN +$spacing-small: 14px; +$spacing-normal: 16px; +$spacing-large: 24px; + @import "reset"; @import "loading_bar"; @import "navigation_bar"; @import "announcement_banner"; +@import "menu_item";