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

Clean up file structure

Browse source 
Speed up compile times
This commit is contained in:
Michał Gdula 2024-04-27 17:37:08 +01:00
parent 8416549858
commit 109386bf51
15 changed files with 171 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/src/components/DropDown.svelte
View file

@ -1,5 +1,5 @@
<script>
import { CaretDown } from "phosphor-svelte";
import CaretDown from "phosphor-svelte/lib/CaretDown";
export let open = false;
export let name;

8
front/src/components/LoadingBar.svelte Normal file
View file

@ -0,0 +1,8 @@
<script>
export let bottom = false
</script>
<div class="loader" class:bottom={bottom}>
<div class="bar bar-1"></div>
<div class="bar bar-2"></div>
</div>

53
front/src/components/MenuItem.svelte Normal file
View file

@ -0,0 +1,53 @@
<script>
import { link } from 'svelte-spa-router';
import Acorn from 'phosphor-svelte/lib/Acorn';
import Fish from 'phosphor-svelte/lib/Fish';
import Leaf from 'phosphor-svelte/lib/Leaf';
import Pepper from 'phosphor-svelte/lib/Pepper';
import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
import GrainsSlash from 'phosphor-svelte/lib/GrainsSlash';
import LoadingImage from '/MenuItemLoadingAlt.svg';
export let id;
export let name;
export let price;
export let image;
export let labels = []
</script>
<div class="menu-item">
{#if !image}
<img src={LoadingImage} alt="" class="menu-item-image">
{:else}
<img src={image} alt="" class="menu-item-image">
{/if}
<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 === "gluten"}
<li class="gluten"><GrainsSlash weight="fill" /></li>
{/if}
{#if label === "spicy"}
<li class="spicy"><Pepper weight="fill" /></li>
{/if}
{/each}
</ul>
<a href="/item/{id}" use:link>View&nbsp;<ArrowUpRight /></a>
</div>
<ul class="menu-item-detail">
<li>{name}</li>
<li>£{price}</li>
</ul>
</div>

34
front/src/components/MenuList.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
import MenuItem from "%/components/MenuItem.svelte";
export let items = [];
</script>
<ul>
{#each items as item}
<li>
<MenuItem
id={item.name}
name={item.name}
price={item.price}
image={item.image}
labels={item.labels}
/>
</li>
{/each}
</ul>
<style lang="scss">
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px
}
li {
margin: 0;
}
</style>