Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-06-03 17:03:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Start on Menu page

Browse source 
Update style of Loader
Tweak SCSS colours to make contrast better
This commit is contained in:
Michał Gdula 2024-04-24 12:01:06 +01:00
parent 7907972e1c
commit 1d4f6d5b70
7 changed files with 168 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

171
front/src/pages/PageMenu.svelte
View file

@ -1,5 +1,7 @@
<script>
import { ArrowClockwise } from "phosphor-svelte";
import MenuList from "%/pages/components/MenuList.svelte";
import LoadingBar from "%/pages/components/LoadingBar.svelte";
const items = [
{
@ -35,52 +37,165 @@
name: "GwaGwa",
price: "Priceless",
labels: ["nut"],
image: "/dab.jpg",
// image: "/dab.jpg",
}
];
</script>
<h2>Menu</h2>
<MenuList {items} />
<div class="spacer"></div>
<div class="menu">
<div class="menu-filter">
<LoadingBar />
<h2>Menu</h2>
<MenuList {items} />
<div class="spacer"></div>
<div class="menu-filter-header">
<h2>Filter</h2>
<button><ArrowClockwise /></button>
</div>
<h2>Menu</h2>
<MenuList {items} />
<hr>
<h3>Meal Preferences</h3>
<ul>
<li>Vegan</li>
<li>Vegetarian</li>
<li>Pescatarian</li>
</ul>
<hr>
<h3>Allergies</h3>
<ul>
<li>Nut</li>
<li>Sea</li>
<li>Dairy</li>
</ul>
<hr>
<h3>Types</h3>
<ul>
<li>Breakfast</li>
<li>Main</li>
<li>Dinner</li>
<li>
Drinks
<ul>
<li>Alcoholic</li>
<li>Non-Alcoholic</li>
</ul>
</li>
<li>Sides</li>
<li>Sweet</li>
</ul>
<hr>
<h3>Other</h3>
<ul>
<li>Hide Seasonal</li>
<li>Hide Unavailable</li>
</ul>
<hr>
<label>
Price
<input type="range" min="0" max="999">
</label>
</div>
<div class="menu-list">
<h2>Main Menu</h2>
<MenuList items={items} />
<div class="spacer"></div>
<h2>Pies</h2>
<MenuList items={items} />
<div class="spacer"></div>
<h2>Drinks</h2>
<MenuList items={items} />
</div>
</div>
<style lang="scss">
h2 {
margin-bottom: 16px;
}
.spacer {
height: 100px;
height: 32px;
}
a {
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
height: 30px;
.menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: normal;
align-items: flex-start;
}
text-decoration: none;
.menu-list {
//padding-left: 300px;
padding-left: 16px;
}
border-radius: 9999px;
background-color: transparent;
.menu-filter {
padding: 16px;
width: 100%;
max-width: calc(300px - 16px);
position: sticky;
top: calc(55px + 16px);
//position: absolute;
//top: 16px;
//left: 16px;
border-radius: 5px;
background-color: #fffbf4;
color: #33251a;
&:hover {
background-color: #fffbf4;
color: #33251a;
h2 {
margin-bottom: 0;
}
hr {
margin: 16px -16px;
height: 1px;
border: 0 transparent;
background-color: rgba(#443023, 0.1);
}
button {
height: 32px;
width: 32px;
display: flex;
justify-content: center;
align-items: center;
//position: absolute;
//top: 12px;
//right: 12px;
text-decoration: none;
font-size: 16px;
border-radius: 99999px;
border: 0 solid transparent;
background-color: #443023;
color: #e1dcd3;
&:hover {
background-color: #6A9343;
color: #fffbf4;
}
}
}
</style>
.menu-filter-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
</style>