102 lines
1.9 KiB
Svelte
102 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { Router, Route, createHistory } from "svelte-navigator";
|
|
import createHashSource from "./util/history";
|
|
import Header from "./components/layout/Header.svelte";
|
|
import Footer from "./components/layout/Footer.svelte";
|
|
import Home from "./views/Home.svelte";
|
|
import Browse from "./views/Browse.svelte";
|
|
import Search from "./views/Search.svelte";
|
|
import DropPasteHandler from "./components/DropPasteHandler.svelte";
|
|
import AddModal from "./components/AddModal.svelte";
|
|
|
|
const history = createHistory(createHashSource());
|
|
|
|
let footerHeight = "0";
|
|
function setBottomMargin(size: CustomEvent<ResizeObserverEntry>) {
|
|
footerHeight = `${size.detail.contentRect.height}px`;
|
|
}
|
|
</script>
|
|
|
|
<Router {history} primary={false} --footer-height={footerHeight}>
|
|
<Header />
|
|
|
|
<Route path="/">
|
|
<Home />
|
|
</Route>
|
|
|
|
<Route path="/browse/*addresses" let:params>
|
|
<Browse />
|
|
</Route>
|
|
|
|
<Route path="/search/:query" let:params>
|
|
<Search query={decodeURIComponent(params.query)} />
|
|
</Route>
|
|
|
|
<Footer on:resize={setBottomMargin} />
|
|
|
|
<AddModal />
|
|
</Router>
|
|
|
|
<DropPasteHandler />
|
|
|
|
<style global lang="scss">
|
|
@use "normalize.css/normalize.css";
|
|
@use "styles/colors-app";
|
|
@use "styles/fonts";
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
#main {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#main,
|
|
#header {
|
|
margin: 0 2rem;
|
|
}
|
|
|
|
#footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
background: var(--background);
|
|
}
|
|
|
|
#footer > * {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.spinner {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.button {
|
|
border: 1px solid var(--foreground);
|
|
border-radius: 4px;
|
|
|
|
background: var(--background-lighter);
|
|
color: var(--foreground);
|
|
|
|
padding: 0.25em 1em;
|
|
line-height: 1;
|
|
|
|
display: block;
|
|
text-align: center;
|
|
|
|
cursor: pointer;
|
|
|
|
input {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|