Clean up file structure

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

View file

@ -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&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} {/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>

View file

@ -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;

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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";

View file

@ -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" />

View file

@ -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';

View file

@ -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*",

View file

@ -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";

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>

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>

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>