mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-07-19 16:05:56 +00:00
Add MenuItem design
Clean up SCSS styles
This commit is contained in:
parent
4e6b2799f6
commit
b56c3cc46d
13 changed files with 288 additions and 47 deletions
|
|
@ -22,6 +22,9 @@
|
|||
</script>
|
||||
|
||||
<svelte:window bind:scrollY={scrollY} />
|
||||
<svelte:head>
|
||||
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=erode@300,301,400,401,500,501,600,601,700,701,1,2&display=swap">
|
||||
</svelte:head>
|
||||
|
||||
{#if showNavBar }
|
||||
<NavigationBar scrolled={scrollY > 0} />
|
||||
|
|
@ -37,15 +40,3 @@
|
|||
<footer>
|
||||
<p>TastyBites is a fake restaurant</p>
|
||||
</footer>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
|
||||
&.nav-space {
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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},
|
||||
];
|
||||
</script>
|
||||
|
||||
|
|
@ -29,6 +29,9 @@
|
|||
<a href="/about" use:link style="float: right">Continue reading</a>
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.spacer {
|
||||
height: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,44 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import { Acorn, Fish, Leaf, Flame } from "phosphor-svelte"
|
||||
import LoadingImage from '/MenuItemLoadingAlt.svg';
|
||||
|
||||
export let id;
|
||||
export let labels = [
|
||||
"vegan",
|
||||
"fish",
|
||||
"nut",
|
||||
"spicy",
|
||||
]
|
||||
export let name;
|
||||
export let price;
|
||||
export let id;
|
||||
</script>
|
||||
|
||||
<a href="/item/{id}" use:link>
|
||||
<span>{name}</span>
|
||||
<span>£{price}</span>
|
||||
</a>
|
||||
<div class="menu-item">
|
||||
<img src={LoadingImage} alt="" class="menu-item-image">
|
||||
|
||||
<style lang="scss">
|
||||
a {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
<div class="menu-item-header">
|
||||
<ul>
|
||||
{#each labels as label}
|
||||
{#if label === "vegan"}
|
||||
<li class="vegan"><Leaf weight="fill" /></li>
|
||||
{/if}
|
||||
{#if label === "fish"}
|
||||
<li class="fish"><Fish weight="fill" /></li>
|
||||
{/if}
|
||||
{#if label === "nut"}
|
||||
<li class="nut"><Acorn weight="fill" /></li>
|
||||
{/if}
|
||||
{#if label === "spicy"}
|
||||
<li class="spicy"><Flame weight="fill" /></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
<a href="/item/{id}" use:link>View</a>
|
||||
</div>
|
||||
|
||||
<ul class="menu-item-detail">
|
||||
<li>{name}</li>
|
||||
<li>£{price}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,22 @@
|
|||
|
||||
<nav class:scrolled={scrolled}>
|
||||
<ul style="justify-content: flex-end">
|
||||
<li><a href="/" use:link use:active>Home</a></li>
|
||||
<li><a href="/contact" use:link use:active>Contact Us</a></li>
|
||||
<li use:active={{path: '/', className: 'active'}}>
|
||||
<a href="/" use:link>Home</a>
|
||||
</li>
|
||||
<li use:active={{path: '/menu', className: 'active'}}>
|
||||
<a href="/menu" use:link>Menu</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span>TastyBites</span>
|
||||
|
||||
<ul style="justify-content: flex-start">
|
||||
<li><a href="/orders" use:link use:active>Orders</a></li>
|
||||
<li><a href="/cart" use:link use:active>Cart</a></li>
|
||||
<li use:active={{path: '/contact', className: 'active'}}>
|
||||
<a href="/contact" use:link>Contact Us</a>
|
||||
</li>
|
||||
<li use:active={{path: '/cart', className: 'active'}}>
|
||||
<a href="/cart" use:link>Cart</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
120
front/src/styles/_menu_item.scss
Normal file
120
front/src/styles/_menu_item.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue