fix(ui): footer space, markup

feat/type-attributes
Tomáš Mládek 2023-01-07 17:18:51 +01:00
parent 7579f83585
commit 59c34dba5e
3 changed files with 29 additions and 26 deletions

View File

@ -10,7 +10,6 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@ -12,35 +12,39 @@
import "./styles/main.scss";
const history = createHistory(createHashSource());
let footerHeight = "0";
function setBottomMargin(size: CustomEvent<number>) {
footerHeight = `${size.detail}px`;
}
</script>
<Router {history} primary={false} --footer-height={footerHeight}>
<Header />
<main>
<Router {history} primary={false}>
<Header />
<Route path="/">
<Home />
</Route>
<Route path="/">
<Home />
</Route>
<Route path="/browse/*addresses" let:params>
<Browse />
</Route>
<Route path="/browse/*addresses" let:params>
<Browse />
</Route>
<Route path="/search/:query" let:params>
<Search query={decodeURIComponent(params.query)} />
</Route>
<Route path="/search/:query" let:params>
<Search query={decodeURIComponent(params.query)} />
</Route>
<Route path="/store">
<Store />
</Route>
<Route path="/store">
<Store />
</Route>
<Footer on:resize={setBottomMargin} />
<Footer />
<AddModal />
</Router>
<AddModal />
</Router>
<DropPasteHandler />
<DropPasteHandler />
</main>
<style>
main {
min-height: 100vh;
padding-bottom: 2rem;
}
</style>

View File

@ -93,8 +93,8 @@
gap: 1rem;
padding: 0 1rem;
// header margin footer
height: calc(100% - 3.5rem - 2 * 1rem - var(--footer-height));
// header margin
height: calc(100vh - 3.5rem - 2 * 2rem);
margin-top: 1rem;
}