elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: use Drawer instead of modalright, see #2106

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-04 01:08:14 +02:00
parent 46d3ee03f0
commit f026ee6db9
2 changed files with 21 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/UI/Base/ModalRight.svelte
View file

@ -1,40 +0,0 @@
<script lang="ts">
import { createEventDispatcher } from "svelte"
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
/**
* The slotted element will be shown on the right side
*/
const dispatch = createEventDispatcher<{ close }>()
</script>
<div
aria-modal="true"
autofocus
class="normal-background absolute top-0 right-0 flex h-screen w-full flex-col overflow-y-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
role="dialog"
style="max-width: 100vw; max-height: 100vh"
tabindex="-1"
id="modal-right"
>
<slot name="close-button">
<button
class="absolute right-10 top-10 h-8 w-8 cursor-pointer rounded-full"
on:click={() => dispatch("close")}
>
<XCircleIcon />
</button>
</slot>
<div role="document">
<slot />
</div>
</div>
<!-- Experimental support for foldable devices -->
<style lang="scss">
@media (horizontal-viewport-segments: 2) {
#modal-right {
width: 50%;
}
}
</style>