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

Chore: housekeeping: lint

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-19 22:08:00 +01:00
parent 2cbd709d71
commit 663b194247
334 changed files with 4675 additions and 1730 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/UI/Base/FloatOver.svelte
View file

@ -1,44 +1,50 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
import { twMerge } from "tailwind-merge";
import { Utils } from "../../Utils";
import { trapFocus } from 'trap-focus-svelte'
import { createEventDispatcher, onMount } from "svelte"
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twMerge } from "tailwind-merge"
import { Utils } from "../../Utils"
import { trapFocus } from "trap-focus-svelte"
/**
* The slotted element will be shown on top, with a lower-opacity border
*/
const dispatch = createEventDispatcher<{ close }>();
const dispatch = createEventDispatcher<{ close }>()
export let extraClasses = "p-4 md:p-6";
export let extraClasses = "p-4 md:p-6"
let mainContent: HTMLElement;
let mainContent: HTMLElement
onMount(() => {
requestAnimationFrame(() => {
Utils.focusOnFocusableChild(mainContent);
});
});
Utils.focusOnFocusableChild(mainContent)
})
})
</script>
<!-- Draw the background over the total screen -->
<div class="w-screen h-screen absolute top-0 left-0" style="background-color: #00000088; z-index: 20" on:click={() => {
<!-- Draw the background over the total screen -->
<div
class="absolute top-0 left-0 h-screen w-screen"
style="background-color: #00000088; z-index: 20"
on:click={() => {
dispatch("close")
}}>
</div>
}}
/>
<!-- draw a _second_ absolute div, placed using 'bottom' which will be above the navigation bar on mobile browsers -->
<div
class={twMerge("absolute bottom-0 right-0 h-full w-screen", extraClasses)}
use:trapFocus
style="z-index: 21"
>
<div bind:this={mainContent} class="content normal-background" on:click|stopPropagation={() => {}}>
<div
bind:this={mainContent}
class="content normal-background"
on:click|stopPropagation={() => {}}
>
<div class="h-full rounded-xl">
<slot />
</div>
<slot name="close-button">
<!-- The close button is placed _after_ the default slot in order to always paint it on top -->
<button
class="absolute right-10 top-10 h-8 w-8 cursor-pointer p-0 border-none bg-white"
class="absolute right-10 top-10 h-8 w-8 cursor-pointer border-none bg-white p-0"
on:click={() => dispatch("close")}
>
<XCircleIcon />
@ -47,13 +53,11 @@
</div>
</div>
<style>
.content {
height: 100%;
border-radius: 0.5rem;
overflow-x: hidden;
box-shadow: 0 0 1rem #00000088;
}
.content {
height: 100%;
border-radius: 0.5rem;
overflow-x: hidden;
box-shadow: 0 0 1rem #00000088;
}
</style>