fix footer obscuring bottom of content
parent
0760e14002
commit
b63e27006a
|
@ -22,9 +22,15 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
const history = createHistory(createHashSource());
|
const history = createHistory(createHashSource());
|
||||||
|
|
||||||
|
let footerHeight = "0";
|
||||||
|
function setBottomMargin(size: CustomEvent<ResizeObserverEntry>) {
|
||||||
|
footerHeight = `${size.detail.contentRect.height}px`;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Router {history} primary={false}>
|
|
||||||
|
<Router {history} primary={false} --footer-height={footerHeight} >
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<Route path="/">
|
<Route path="/">
|
||||||
|
@ -39,7 +45,7 @@
|
||||||
<Search query={params.query} />
|
<Search query={params.query} />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Footer />
|
<Footer on:resize={setBottomMargin} />
|
||||||
</Router>
|
</Router>
|
||||||
|
|
||||||
<style global lang="scss">
|
<style global lang="scss">
|
||||||
|
|
|
@ -1,9 +1,20 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher, onMount } from "svelte";
|
||||||
import Jobs from "./Jobs.svelte";
|
import Jobs from "./Jobs.svelte";
|
||||||
import Notifications from "./Notifications.svelte";
|
import Notifications from "./Notifications.svelte";
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
let root: HTMLElement;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const observer = new ResizeObserver((entries) => {
|
||||||
|
entries.forEach((entry) => dispatch("resize", entry));
|
||||||
|
});
|
||||||
|
observer.observe(root);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer id="footer">
|
<footer id="footer" bind:this={root}>
|
||||||
<Notifications />
|
<Notifications />
|
||||||
<Jobs />
|
<Jobs />
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -64,6 +64,7 @@
|
||||||
// header margin magic
|
// header margin magic
|
||||||
height: calc(100% - 3.5rem - 1rem - 1px);
|
height: calc(100% - 3.5rem - 1rem - 1px);
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
margin-bottom: var(--footer-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
|
|
Loading…
Reference in New Issue