Rationalise navigation
This commit is contained in:
parent
38ec7acd3e
commit
9d0a9c607e
@ -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>
|
|
78
src/lib/nav.svelte
Normal file
78
src/lib/nav.svelte
Normal 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>
|
@ -1,15 +1,14 @@
|
|||||||
<script>
|
<script>
|
||||||
import Menu from '../components/header.svelte'
|
import Header from '$lib/header.svelte'
|
||||||
import Footer from '../components/footer.svelte'
|
import Nav from '$lib/nav.svelte'
|
||||||
const title = "Svelte"
|
const title = "Home"
|
||||||
const page = "/"
|
|
||||||
</script>
|
</script>
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>OwlBoard - {title}</title>
|
<title>OwlBoard - {title}</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
<Menu {title} />
|
<Header {title} />
|
||||||
<div class="form-box">
|
<div class="form-box">
|
||||||
<form action="/ldb">
|
<form action="/ldb">
|
||||||
<span class="input-title">Live Departure Boards</span>
|
<span class="input-title">Live Departure Boards</span>
|
||||||
@ -21,7 +20,7 @@ const page = "/"
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-box">
|
<div class="form-box">
|
||||||
<form action="/result-timetable">
|
<form action="/result-timetable">
|
||||||
<span class="input-title">Find Train</span>
|
<span class="input-title">Train Details & PIS</span>
|
||||||
<br>
|
<br>
|
||||||
<input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
|
<input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
|
||||||
<br>
|
<br>
|
||||||
@ -33,7 +32,7 @@ const page = "/"
|
|||||||
<div class="quick-links">
|
<div class="quick-links">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer {page} />
|
<Nav />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.input-title {
|
.input-title {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import Menu from '../../components/header.svelte'
|
import Header from '$lib/header.svelte'
|
||||||
import Footer from '../../components/footer.svelte'
|
import Nav from '$lib/nav.svelte'
|
||||||
|
|
||||||
import {onMount} from 'svelte'
|
import {onMount} from 'svelte'
|
||||||
|
|
||||||
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Menu {title} />
|
<Header {title} />
|
||||||
|
|
||||||
<p>Station: <span id="station"></span></p>
|
<p>Station: <span id="station"></span></p>
|
||||||
{#each jsonData as item}
|
{#each jsonData as item}
|
||||||
@ -34,4 +34,4 @@
|
|||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
|
||||||
<Footer {page} />
|
<Nav {page} />
|
@ -1,13 +1,52 @@
|
|||||||
<script>
|
<script>
|
||||||
import Menu from '../../components/header.svelte'
|
import Header from '$lib/header.svelte'
|
||||||
import Footer from '../../components/footer.svelte'
|
import Nav from '$lib/nav.svelte'
|
||||||
|
|
||||||
const title = "More"
|
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>
|
</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>
|
@ -1,13 +1,12 @@
|
|||||||
<script>
|
<script>
|
||||||
import Menu from '../../components/header.svelte'
|
import Header from '$lib/header.svelte'
|
||||||
import Footer from '../../components/footer.svelte'
|
import Nav from '$lib/nav.svelte'
|
||||||
|
|
||||||
const title = "PIS"
|
const title = "PIS"
|
||||||
const page = "more"
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Menu {title} />
|
<Header {title} />
|
||||||
|
|
||||||
<p></p>
|
<p></p>
|
||||||
|
|
||||||
<Footer {page} />
|
<Nav />
|
@ -1,11 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import Menu from '../../components/header.svelte'
|
import Header from '$lib/header.svelte'
|
||||||
import Footer from '../../components/footer.svelte'
|
import Nav from '$lib/nav.svelte'
|
||||||
|
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
const title = "Timetable Results"
|
const title = "Timetable Results"
|
||||||
const page = "more"
|
|
||||||
|
|
||||||
async function getHeadcode() {
|
async function getHeadcode() {
|
||||||
return new URLSearchParams(window.location.search).get('headcode');
|
return new URLSearchParams(window.location.search).get('headcode');
|
||||||
@ -24,10 +23,10 @@
|
|||||||
<title>OwlBoard {title}</title>
|
<title>OwlBoard {title}</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<Menu {title} />
|
<Header {title} />
|
||||||
|
|
||||||
<p>Headcode: <span id="headcode"></span></p>
|
<p>Headcode: <span id="headcode"></span></p>
|
||||||
|
|
||||||
<p id="data_raw"></p>
|
<p id="data_raw"></p>
|
||||||
|
|
||||||
<Footer {page} />
|
<Nav />
|
Loading…
Reference in New Issue
Block a user