mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-02-17 19:00:09 +00:00
Clean up file structure
Speed up compile times
This commit is contained in:
parent
8416549858
commit
109386bf51
|
@ -1,17 +1,31 @@
|
||||||
<script>
|
<script>
|
||||||
import Router from 'svelte-spa-router';
|
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 routes from '%/routes.js';
|
||||||
import NavigationBar from "%/pages/elements/NavigationBar.svelte";
|
import TwitterLogo from 'phosphor-svelte/lib/TwitterLogo';
|
||||||
import FooterBar from "%/pages/elements/FooterBar.svelte";
|
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;
|
const links = {
|
||||||
let showNavBar = false;
|
home: {path: '/', className: 'active'},
|
||||||
let fullWidth = false;
|
menu: {path: '/menu', className: 'active'},
|
||||||
|
contact: {path: '/contact', className: 'active'},
|
||||||
|
cart: {path: '/cart', className: 'active'},
|
||||||
|
}
|
||||||
|
|
||||||
let windowScrollY = 0;
|
let windowScrollY = 0;
|
||||||
let windowWidth = 0;
|
let windowWidth = 0;
|
||||||
|
|
||||||
|
let oldLocation = undefined;
|
||||||
|
let fullWidth = false;
|
||||||
|
let showNavBar = false;
|
||||||
|
|
||||||
|
$: scrolled = windowScrollY > 0
|
||||||
|
$: mobile = windowWidth < 700
|
||||||
|
|
||||||
function routeLoading(event) {
|
function routeLoading(event) {
|
||||||
if (event.detail.location === oldLocation) {
|
if (event.detail.location === oldLocation) {
|
||||||
return; // not an actual change
|
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">
|
<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>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
{#if showNavBar }
|
{#if showNavBar }
|
||||||
<NavigationBar
|
<nav class:scrolled={scrolled} class:mobile={mobile}>
|
||||||
scrolled={windowScrollY > 0}
|
{#if !mobile}
|
||||||
mobile={windowWidth < 700}
|
<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 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 Us</a>
|
||||||
|
</li>
|
||||||
|
<li use:active={links.cart}>
|
||||||
|
<a href="/cart" use:link>Cart</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
</nav>
|
||||||
{/if}
|
{/if}
|
||||||
<main
|
<main class:nav-space={showNavBar} class:full-width={fullWidth}>
|
||||||
class:nav-space={showNavBar}
|
|
||||||
class:full-width={fullWidth}
|
|
||||||
>
|
|
||||||
<Router
|
<Router
|
||||||
routes={routes}
|
routes={routes}
|
||||||
restoreScrollState={true}
|
restoreScrollState={true}
|
||||||
|
@ -48,4 +94,84 @@
|
||||||
on:conditionsFailed={conditionFailure}
|
on:conditionsFailed={conditionFailure}
|
||||||
/>
|
/>
|
||||||
</main>
|
</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>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { CaretDown } from "phosphor-svelte";
|
import CaretDown from "phosphor-svelte/lib/CaretDown";
|
||||||
|
|
||||||
export let open = false;
|
export let open = false;
|
||||||
export let name;
|
export let name;
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
<script>
|
<script>
|
||||||
import { link } from 'svelte-spa-router';
|
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';
|
import LoadingImage from '/MenuItemLoadingAlt.svg';
|
||||||
|
|
||||||
export let id;
|
export let id;
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import MenuItem from "%/pages/elements/MenuItem.svelte";
|
import MenuItem from "%/components/MenuItem.svelte";
|
||||||
|
|
||||||
export let items = [];
|
export let items = [];
|
||||||
</script>
|
</script>
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { SmileySad } from "phosphor-svelte";
|
import SmileySad from "phosphor-svelte/lib/SmileySad";
|
||||||
|
|
||||||
export let params = {};
|
export let params = {};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { PaperPlaneRight } from "phosphor-svelte";
|
import PaperPlaneRight from "phosphor-svelte/lib/PaperPlaneRight";
|
||||||
import DropDown from "%/components/DropDown.svelte";
|
import DropDown from "%/components/DropDown.svelte";
|
||||||
import { expandOnTyping } from "%/lib/utils.js";
|
import { expandOnTyping } from "%/lib/utils.js";
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import { link } from 'svelte-spa-router';
|
import { link } from 'svelte-spa-router';
|
||||||
import { ArrowUpRight } from "phosphor-svelte";
|
|
||||||
import { map, tileLayer, marker } from 'leaflet';
|
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 { getPopularToday } from "%/lib/api.js";
|
||||||
import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
|
import BannerImage from '/BannerExampleImage.jpg';
|
||||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
|
||||||
|
|
||||||
|
|
||||||
let items = getPopularToday();
|
let items = getPopularToday();
|
||||||
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
|
let Map = map('map').setView([50.82304922105467, -0.432780150496344], 13);
|
||||||
tileLayer(
|
tileLayer(
|
||||||
|
@ -23,12 +21,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
||||||
crossorigin=""/>
|
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<AnnouncementBanner />
|
<div class="announcement-banner">
|
||||||
|
<img src={BannerImage} alt="">
|
||||||
|
</div>
|
||||||
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
|
<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
|
||||||
<div class="spacer" />
|
<div class="spacer" />
|
||||||
|
|
||||||
|
@ -40,46 +38,14 @@
|
||||||
<p>Example text</p>
|
<p>Example text</p>
|
||||||
<div id="timetable">
|
<div id="timetable">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr><th>Day</th><th>Opening</th><th>Closing</th></tr>
|
||||||
<th>Day</th>
|
<tr><td>Monday</td><td>9am</td><td>12pm</td></tr>
|
||||||
<th>Opening</th>
|
<tr><td>Tuesday</td><td>9am</td><td>12pm</td></tr>
|
||||||
<th>Closing</th>
|
<tr><td>Wednesday</td><td>9am</td><td>12pm</td></tr>
|
||||||
</tr>
|
<tr><td>Thursday</td><td>9am</td><td>12pm</td></tr>
|
||||||
<tr>
|
<tr><td>Friday</td><td>9am</td><td>12pm</td></tr>
|
||||||
<td>Monday</td>
|
<tr><td>Saturday</td><td>11am</td><td>2am</td></tr>
|
||||||
<td>9am</td>
|
<tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
|
||||||
<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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -92,7 +58,7 @@
|
||||||
{:then items}
|
{:then items}
|
||||||
<MenuList {items} />
|
<MenuList {items} />
|
||||||
{:catch error}
|
{:catch error}
|
||||||
<p>Failed to get todays specials!</p>
|
<p>{error}</p>
|
||||||
{/await}
|
{/await}
|
||||||
<a href="/menu" use:link>See All <ArrowUpRight /></a>
|
<a href="/menu" use:link>See All <ArrowUpRight /></a>
|
||||||
<div class="spacer" />
|
<div class="spacer" />
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
import MenuList from "%/components/MenuList.svelte";
|
||||||
import LoadingImage from "/MenuItemLoading.svg";
|
import LoadingImage from "/MenuItemLoading.svg";
|
||||||
import Items from '%/lib/testData.js';
|
import Items from '%/lib/testData.js';
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
import LoadingBar from "%/components/LoadingBar.svelte";
|
||||||
|
|
||||||
const FunnyMessages = [
|
const FunnyMessages = [
|
||||||
"*patiently waiting*",
|
"*patiently waiting*",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { ArrowClockwise } from "phosphor-svelte";
|
import ArrowClockwise from "phosphor-svelte/lib/ArrowClockwise";
|
||||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
import MenuList from "%/components/MenuList.svelte";
|
||||||
import DropDown from "%/components/DropDown.svelte";
|
import DropDown from "%/components/DropDown.svelte";
|
||||||
import { getMenuItems } from "%/lib/api.js";
|
import { getMenuItems } from "%/lib/api.js";
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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 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 Us</a>
|
|
||||||
</li>
|
|
||||||
<li use:active={links.cart}>
|
|
||||||
<a href="/cart" use:link>Cart</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
{/if}
|
|
||||||
</nav>
|
|
Loading…
Reference in a new issue