anki/ts/image-occlusion/StickyFooter.svelte
Mani 47a9db8221
fix image height issues in iOS safari (#2480)
* use i18n message when not showing image

* fix height for iOS

* some ui styling

* fix polygon draw in panzoom

* more ui styling and fixes
2023-04-26 16:01:04 +10:00

64 lines
1.6 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import * as tr from "@tslib/ftl";
import ButtonGroup from "../components/ButtonGroup.svelte";
import LabelButton from "../components/LabelButton.svelte";
export let hideAllGuessOne: () => void;
export let hideOneGuessOne: () => void;
</script>
<div style:flex-grow="1" />
<div class="sticky-footer">
<ButtonGroup size={2}>
<LabelButton
--border-left-radius="5px"
--border-right-radius="5px"
on:click={hideAllGuessOne}
class=" bottom-btn"
>
{tr.notetypesHideAllGuessOne()}
</LabelButton>
<LabelButton
--border-left-radius="5px"
--border-right-radius="5px"
on:click={hideOneGuessOne}
class=" bottom-btn"
>
{tr.notetypesHideOneGuessOne()}
</LabelButton>
</ButtonGroup>
</div>
<style lang="scss">
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
margin: 0;
padding: 0.25rem;
background: var(--canvas);
border-style: solid none none;
border-color: var(--border);
border-width: thin;
display: flex;
justify-content: flex-end;
}
@media only screen and (max-width: 640px) {
.sticky-footer {
justify-content: center;
}
}
:global(.bottom-btn) {
margin: 2px;
}
</style>