Space out Sticky Bottom with Spacer component

This commit is contained in:
Henrik Giesel 2021-07-06 16:43:08 +02:00
parent 821c65d4ad
commit ffb1f3bff2
3 changed files with 21 additions and 2 deletions

View File

@ -0,0 +1,12 @@
<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<div />
<style lang="scss">
div {
width: var(--width, auto);
height: var(--height, auto);
}
</style>

View File

@ -6,9 +6,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let id: string | undefined = undefined; export let id: string | undefined = undefined;
let className: string = ""; let className: string = "";
export { className as class }; export { className as class };
export let height: number;
</script> </script>
<footer {id} class={`container-fluid pt-1 ${className}`}> <footer {id} bind:offsetHeight={height} class={`container-fluid pt-1 ${className}`}>
<slot /> <slot />
</footer> </footer>

View File

@ -6,6 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { tick } from "svelte"; import { tick } from "svelte";
import { isApplePlatform } from "lib/platform"; import { isApplePlatform } from "lib/platform";
import { bridgeCommand } from "lib/bridgecommand"; import { bridgeCommand } from "lib/bridgecommand";
import Spacer from "components/Spacer.svelte";
import StickyBottom from "components/StickyBottom.svelte"; import StickyBottom from "components/StickyBottom.svelte";
import AddTagBadge from "./AddTagBadge.svelte"; import AddTagBadge from "./AddTagBadge.svelte";
import SelectedTagBadge from "./SelectedTagBadge.svelte"; import SelectedTagBadge from "./SelectedTagBadge.svelte";
@ -361,9 +362,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
deselect(); deselect();
saveTags(); saveTags();
} }
let height: number;
</script> </script>
<StickyBottom> <Spacer --height={`${height}px`} />
<StickyBottom bind:height>
<ButtonToolbar <ButtonToolbar
class="d-flex flex-wrap align-items-center mx-1" class="d-flex flex-wrap align-items-center mx-1"
{size} {size}