OwlBoard
/
owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Rationalise navigation

This commit is contained in:
Fred Boniface 2023-06-14 11:02:46 +01:00
parent 38ec7acd3e
commit 9d0a9c607e
8 changed files with 142 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/footer.svelte
View File

@ -1,49 +0,0 @@
<script>
export let page = "";
let activeHome = ''
if (page === '/') {let activeHome = 'active'}
</script>
<footer>
<a href="/" class="{activeHome}">
<picture>
<source srcset="/images/nav/home_icon.svg" type="svg+xml">
<img src="/images/nav/home_icon-25.png" alt="Home">
</picture><br>HOME
</a>
<a href="/pis">
PIS
</a>
<a href="/more">
MORE
</a>
</footer>
<style>
footer {
position: fixed;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: transparent;
}
footer a {
flex: 12;
width: 30%;
height: 100%;
background-color: var(--overlay-color);
border-color: var(--main-bg-color);
border-style: solid;
border-top: none;
border-bottom: none;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
footer a.active {
background-color: aqua;
}
</style>

0
src/components/header.svelte → src/lib/header.svelte
View File

78
src/lib/nav.svelte Normal file
View File

@ -0,0 +1,78 @@
<script>
const links = [
{
title: "Home",
path: "/",
svgPath: "/images/nav/home_icon.svg",
pngPath: "/images/nav/home_icon-25.png"
},
{
title: "PIS",
path: "/pis",
svgPath: "",
pngPath: ""
},
{
title: "More",
path: "/more",
svgPath: "/images/nav/hamburger.svg",
pngPath: "/images/nav/hamburger.svg"
}
]
import { page } from "$app/stores";
</script>
<footer>
{#each links as item}
<a href={item.path} class:active={$page.url.pathname == item.path}>
<picture>
<source srcset={item.svgPath} type="svg+xml">
<img src="{item.pngPath}" alt="">
</picture><br><span>{item.title}</span>
</a>
{/each}
</footer>
<style>
footer {
position: fixed;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.123);
}
footer a {
flex: 12;
width: 30%;
height: 100%;
background-color: var(--overlay-color);
border-style: solid;
border-width: 1px;
border-top: none;
border-bottom: none;
border-color: rgba(0, 0, 0, 0.24);
text-decoration: double;
font-weight: 600;
}
footer a.active {
background-color: transparent;
}
img {
height: 20px;
width: 20px;
margin: 0;
margin-top: 3px;
padding: 0;
}
span {
margin: 0;
margin-bottom: 3px;
padding: 0;
}
</style>

13
src/routes/+page.svelte
View File

@ -1,15 +1,14 @@
<script>
import Menu from '../components/header.svelte'
import Footer from '../components/footer.svelte'
const title = "Svelte"
const page = "/"
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
const title = "Home"
</script>
<svelte:head>
<title>OwlBoard - {title}</title>
</svelte:head>
<Menu {title} />
<Header {title} />
<div class="form-box">
<form action="/ldb">
<span class="input-title">Live Departure Boards</span>
@ -21,7 +20,7 @@ const page = "/"
</div>
<div class="form-box">
<form action="/result-timetable">
<span class="input-title">Find Train</span>
<span class="input-title">Train Details & PIS</span>
<br>
<input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
<br>
@ -33,7 +32,7 @@ const page = "/"
<div class="quick-links">
</div>
</div>
<Footer {page} />
<Nav />
<style>
.input-title {

8
src/routes/ldb/+page.svelte
View File

@ -1,6 +1,6 @@
<script>
import Menu from '../../components/header.svelte'
import Footer from '../../components/footer.svelte'
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
import {onMount} from 'svelte'
@ -26,7 +26,7 @@
</script>
<Menu {title} />
<Header {title} />
<p>Station: <span id="station"></span></p>
{#each jsonData as item}
@ -34,4 +34,4 @@
{/each}
<Footer {page} />
<Nav {page} />

53
src/routes/more/+page.svelte
View File

@ -1,13 +1,52 @@
<script>
import Menu from '../../components/header.svelte'
import Footer from '../../components/footer.svelte'
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
const title = "More"
const page = "more"
const links = [
{title: "Your Data", path: "/more/profile"},
{title: "Location Reference Codes", path: "/more/reference-data"},
{title: "Privacy Policy", path: "/more/privacy"},
{title: "App Versions", path: "/more/versions"},
{title: "Statictics", path: "/more/stats"}
]
</script>
<Menu {title} />
<Header {title} />
<p></p>
{#each links as item}
<a href={item.path}>
<div>
<p>{item.title}</p>
</div>
</a>
{/each}
<Footer {page} />
<Nav />
<style>
div {
width: 100%;
background: rgba(0, 0, 0, 0.226);
border-color: aliceblue;
border-width: 1px;
border-style: solid;
border-left: none;
border-right: none;
height: 50px;
}
a {
text-decoration: none;
height: 100%;
vertical-align: middle;
}
p {
color: white;
margin: 0;
padding-left: 10px;
text-align: left;
vertical-align: middle;
font-weight: 600;
font-size: 20px;
}
</style>

9
src/routes/pis/+page.svelte
View File

@ -1,13 +1,12 @@
<script>
import Menu from '../../components/header.svelte'
import Footer from '../../components/footer.svelte'
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
const title = "PIS"
const page = "more"
</script>
<Menu {title} />
<Header {title} />
<p></p>
<Footer {page} />
<Nav />

9
src/routes/result-timetable/+page.svelte
View File

@ -1,11 +1,10 @@
<script>
import Menu from '../../components/header.svelte'
import Footer from '../../components/footer.svelte'
import Header from '$lib/header.svelte'
import Nav from '$lib/nav.svelte'
import { onMount } from 'svelte'
const title = "Timetable Results"
const page = "more"
async function getHeadcode() {
return new URLSearchParams(window.location.search).get('headcode');
@ -24,10 +23,10 @@
<title>OwlBoard {title}</title>
</svelte:head>
<Menu {title} />
<Header {title} />
<p>Headcode: <span id="headcode"></span></p>
<p id="data_raw"></p>
<Footer {page} />
<Nav />