Northbrook/TastyBites
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/TastyBites.git synced 2025-01-29 17:48:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up file structure

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

0
api/testData.go → api/test_data.go
View file

156
front/src/App.svelte
View file

@ -1,17 +1,31 @@
<script>
import Router from 'svelte-spa-router';
import { replace } from 'svelte-spa-router';
import { replace, link } from 'svelte-spa-router';
import active from 'svelte-spa-router/active'
import routes from '%/routes.js';
import NavigationBar from "%/pages/elements/NavigationBar.svelte";
import FooterBar from "%/pages/elements/FooterBar.svelte";
import TwitterLogo from 'phosphor-svelte/lib/TwitterLogo';
import FacebookLogo from 'phosphor-svelte/lib/FacebookLogo';
import InstagramLogo from 'phosphor-svelte/lib/InstagramLogo';
import TiktokLogo from 'phosphor-svelte/lib/TiktokLogo';
import Logo from '/LogoAlt.svg';
let oldLocation = undefined;
let showNavBar = false;
let fullWidth = false;
const links = {
home: {path: '/', className: 'active'},
menu: {path: '/menu', className: 'active'},
contact: {path: '/contact', className: 'active'},
cart: {path: '/cart', className: 'active'},
}
let windowScrollY = 0;
let windowWidth = 0;
let oldLocation = undefined;
let fullWidth = false;
let showNavBar = false;
$: scrolled = windowScrollY > 0
$: mobile = windowWidth < 700
function routeLoading(event) {
if (event.detail.location === oldLocation) {
return; // not an actual change
@ -31,16 +45,48 @@
<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={windowScrollY > 0}
mobile={windowWidth < 700}
/>
<nav class:scrolled={scrolled} class:mobile={mobile}>
{#if !mobile}
<ul style="justify-content: flex-end">
<li use:active={links.home}>
<a href="/" use:link>Home</a>
</li>
<li use:active={links.menu}>
<a href="/menu" use:link>Menu</a>
</li>
</ul>
<span><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start">
<li use:active={links.contact}>
<a href="/contact" use:link>Contact&nbsp;Us</a>
</li>
<li use:active={links.cart}>
<a href="/cart" use:link>Cart</a>
</li>
</ul>
{:else}
<ul>
<li use:active={links.home}>
<a href="/" use:link>Home</a>
</li>
<li use:active={links.menu}>
<a href="/menu" use:link>Menu</a>
</li>
<li use:active={links.contact}>
<a href="/contact" use:link>Contact&nbsp;Us</a>
</li>
<li use:active={links.cart}>
<a href="/cart" use:link>Cart</a>
</li>
</ul>
{/if}
</nav>
{/if}
<main
class:nav-space={showNavBar}
class:full-width={fullWidth}
>
<main class:nav-space={showNavBar} class:full-width={fullWidth}>
<Router
routes={routes}
restoreScrollState={true}
@ -48,4 +94,84 @@
on:conditionsFailed={conditionFailure}
/>
</main>
<FooterBar />
<footer>
<div class="footer-section">
<p>TastyBites is not a real restaurant</p>
<p>gwagwa</p>
</div>
<div class="footer-section">
<h4>Find us on:</h4>
<ul>
<li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
</ul>
</div>
</footer>
<style lang="scss">
// ToDo: Move this SCSS to its own _footer.scss file
footer {
padding: 16px;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-top: 2px solid #6A9343;
background-color: #443023;
color: #e1dcd3;
overflow: hidden;
}
.footer-section {
padding: 16px;
min-width: 200px;
width: 100%;
max-width: 500px;
> ul {
padding: 0;
display: flex;
flex-direction: row;
> li {
margin: 0 16px 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: 99999px;
background-color: transparent;
color: #e1dcd3;
&:hover {
background-color: #fffbf4;
color: #33251a;
}
}
}
}
> h4 {
margin-bottom: 10px;
}
}
</style>

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;

0
front/src/pages/elements/LoadingBar.svelte → front/src/components/LoadingBar.svelte
View file

7
front/src/pages/elements/MenuItem.svelte → front/src/components/MenuItem.svelte
View file

@ -1,6 +1,11 @@
<script>
import { link } from 'svelte-spa-router';
import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from "phosphor-svelte"
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;

2
front/src/pages/elements/MenuList.svelte → front/src/components/MenuList.svelte
View file

@ -1,5 +1,5 @@
<script>
import MenuItem from "%/pages/elements/MenuItem.svelte";
import MenuItem from "%/components/MenuItem.svelte";
export let items = [];
</script>

2
front/src/pages/Page404.svelte
View file

@ -1,5 +1,5 @@
<script>
import { SmileySad } from "phosphor-svelte";
import SmileySad from "phosphor-svelte/lib/SmileySad";
export let params = {};
</script>

2
front/src/pages/PageContact.svelte
View file

@ -1,5 +1,5 @@
<script>
import { PaperPlaneRight } from "phosphor-svelte";
import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
import DropDown from "%/components/DropDown.svelte";
import { expandOnTyping } from "%/lib/utils.js";

66
front/src/pages/PageIndex.svelte
View file

@ -1,16 +1,14 @@
<script>
import { onMount } from "svelte";
import { link } from 'svelte-spa-router';
import { ArrowUpRight } from "phosphor-svelte";
import { map, tileLayer, marker } from 'leaflet';
import ArrowUpRight from "phosphor-svelte/lib/ArrowUpRight";
import MenuList from "%/components/MenuList.svelte";
import { getPopularToday } from "%/lib/api.js";
import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
import MenuList from "%/pages/elements/MenuList.svelte";
import BannerImage from '/BannerExampleImage.jpg';
let items = getPopularToday();
onMount(() => {
let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
tileLayer(
@ -23,12 +21,12 @@
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
</svelte:head>
<AnnouncementBanner />
<div class="announcement-banner">
<img src={BannerImage} alt="">
</div>
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
<div class="spacer" />
@ -40,46 +38,14 @@
<p>Example text</p>
<div id="timetable">
<table>
<tr>
<th>Day</th>
<th>Opening</th>
<th>Closing</th>
</tr>
<tr>
<td>Monday</td>
<td>9am</td>
<td>12pm</td>
</tr>
<tr>
<td>Tuesday</td>
<td>9am</td>
<td>12pm</td>
</tr>
<tr>
<td>Wednesday</td>
<td>9am</td>
<td>12pm</td>
</tr>
<tr>
<td>Thursday</td>
<td>9am</td>
<td>12pm</td>
</tr>
<tr>
<td>Friday</td>
<td>9am</td>
<td>12pm</td>
</tr>
<tr>
<td>Saturday</td>
<td>11am</td>
<td>2am</td>
</tr>
<tr>
<td>Sunday</td>
<td>11am</td>
<td>2am</td>
</tr>
<tr><th>Day</th><th>Opening</th><th>Closing</th></tr>
<tr><td>Monday</td><td>9am</td><td>12pm</td></tr>
<tr><td>Tuesday</td><td>9am</td><td>12pm</td></tr>
<tr><td>Wednesday</td><td>9am</td><td>12pm</td></tr>
<tr><td>Thursday</td><td>9am</td><td>12pm</td></tr>
<tr><td>Friday</td><td>9am</td><td>12pm</td></tr>
<tr><td>Saturday</td><td>11am</td><td>2am</td></tr>
<tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
</table>
</div>
</div>
@ -92,7 +58,7 @@
{:then items}
<MenuList {items} />
{:catch error}
<p>Failed to get todays specials!</p>
<p>{error}</p>
{/await}
<a href="/menu" use:link>See All <ArrowUpRight /></a>
<div class="spacer" />

2
front/src/pages/PageItem.svelte
View file

@ -1,5 +1,5 @@
<script>
import MenuList from "%/pages/elements/MenuList.svelte";
import MenuList from "%/components/MenuList.svelte";
import LoadingImage from "/MenuItemLoading.svg";
import Items from '%/lib/testData.js';

2
front/src/pages/PageLoading.svelte
View file

@ -1,5 +1,5 @@
<script>
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
import LoadingBar from "%/components/LoadingBar.svelte";
const FunnyMessages = [
"*patiently waiting*",

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

@ -1,6 +1,6 @@
<script>
import { ArrowClockwise } from "phosphor-svelte";
import MenuList from "%/pages/elements/MenuList.svelte";
import ArrowClockwise from "phosphor-svelte/lib/ArrowClockwise";
import MenuList from "%/components/MenuList.svelte";
import DropDown from "%/components/DropDown.svelte";
import { getMenuItems } from "%/lib/api.js";

10
front/src/pages/elements/AnnouncementBanner.svelte
View file

@ -1,10 +0,0 @@
<script>
// import LoadingBar from "%/pages/elements/LoadingBar.svelte";
// import BannerImage from '/BannerLoading.svg';
import BannerImage from '/BannerExampleImage.jpg';
</script>
<div class="announcement-banner">
<!-- <LoadingBar bottom={true} />-->
<img src={BannerImage} alt="">
</div>

83
front/src/pages/elements/FooterBar.svelte
View file

@ -1,83 +0,0 @@
<script>
import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from "phosphor-svelte"
</script>
<footer>
<div class="footer-section">
<p>TastyBites is not a real restaurant</p>
<p>gwagwa</p>
</div>
<div class="footer-section">
<h4>Find us on:</h4>
<ul>
<li><a href="www.twitter.com"><TwitterLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><FacebookLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><InstagramLogo weight="fill"/></a></li>
<li><a href="www.twitter.com"><TiktokLogo weight="fill"/></a></li>
</ul>
</div>
</footer>
<style lang="scss">
footer {
padding: 16px;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-top: 2px solid #6A9343;
background-color: #443023;
color: #e1dcd3;
overflow: hidden;
}
.footer-section {
padding: 16px;
min-width: 200px;
width: 100%;
max-width: 500px;
> ul {
padding: 0;
display: flex;
flex-direction: row;
> li {
margin: 0 16px 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: 99999px;
background-color: transparent;
color: #e1dcd3;
&:hover {
background-color: #fffbf4;
color: #33251a;
}
}
}
}
> h4 {
margin-bottom: 10px;
}
}
</style>

54
front/src/pages/elements/NavigationBar.svelte
View file

@ -1,54 +0,0 @@
<script>
import { link } from 'svelte-spa-router';
import active from 'svelte-spa-router/active'
import Logo from '/LogoAlt.svg';
const links = {
home: {path: '/', className: 'active'},
menu: {path: '/menu', className: 'active'},
contact: {path: '/contact', className: 'active'},
cart: {path: '/cart', className: 'active'},
}
export let scrolled = false;
export let mobile = false;
</script>
<nav class:scrolled={scrolled} class:mobile={mobile}>
{#if !mobile}
<ul style="justify-content: flex-end">
<li use:active={links.home}>
<a href="/" use:link>Home</a>
</li>
<li use:active={links.menu}>
<a href="/menu" use:link>Menu</a>
</li>
</ul>
<span><img src={Logo} alt="TastyBites"></span>
<ul style="justify-content: flex-start">
<li use:active={links.contact}>
<a href="/contact" use:link>Contact&nbsp;Us</a>
</li>
<li use:active={links.cart}>
<a href="/cart" use:link>Cart</a>
</li>
</ul>
{:else}
<ul>
<li use:active={links.home}>
<a href="/" use:link>Home</a>
</li>
<li use:active={links.menu}>
<a href="/menu" use:link>Menu</a>
</li>
<li use:active={links.contact}>
<a href="/contact" use:link>Contact&nbsp;Us</a>
</li>
<li use:active={links.cart}>
<a href="/cart" use:link>Cart</a>
</li>
</ul>
{/if}
</nav>