Merge master

src/UI/Base/Dropdown.svelte

@@ -22,9 +22,15 @@
       selectAppropriateValue()
     }
   }
-  export let cls : string = undefined
+  export let cls: string = undefined
 </script>
 
-<select class={cls} bind:this={htmlElement} on:change={(e) => {value.setData(e.srcElement.value)}}>
+<select
+  class={cls}
+  bind:this={htmlElement}
+  on:change={(e) => {
+    value.setData(e.srcElement.value)
+  }}
+>
   <slot />
 </select>

src/UI/Base/FileSelector.svelte

@@ -36,9 +36,15 @@
     dispatcher("submit", e.dataTransfer.files)
   }}
 >
-  <label class={twMerge(cls, drawAttention ? "glowing-shadow" : "")} 
-         tabindex="0" for={"fileinput" + id} 
-         on:click={() => {console.log("Clicked", inputElement); inputElement.click()}}>
+  <label
+    class={twMerge(cls, drawAttention ? "glowing-shadow" : "")}
+    tabindex="0"
+    for={"fileinput" + id}
+    on:click={() => {
+      console.log("Clicked", inputElement)
+      inputElement.click()
+    }}
+  >
     <slot />
   </label>
   <input

src/UI/Base/FloatOver.svelte

@@ -1,38 +1,43 @@
 <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 } from "svelte"
+  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { twMerge } from "tailwind-merge"
+  import { trapFocus } from "trap-focus-svelte"
+
   /**
    * The slotted element will be shown on top, with a lower-opacity border
    */
-  const dispatch = createEventDispatcher<{ close }>();
-
-  export let extraClasses = "p-4 md:p-6";
+  const dispatch = createEventDispatcher<{ close }>()
 
+  export let extraClasses = "p-4 md:p-6"
 
 </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"
+  on:click={() => {
     dispatch("close")
-  }}>
-</div>
+  }}
+  style="background-color: #00000088; z-index: 20"
+/>
 <!-- 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"
+  use:trapFocus
 >
-  <div class="content normal-background" on:click|stopPropagation={() => {}}>
+  <div
+    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 />
@@ -41,8 +46,6 @@
   </div>
 </div>
 
-
-
 <style>
     .content {
         height: 100%;

src/UI/Base/If.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Store } from "../../Logic/UIEventSource";
+  import { Store } from "../../Logic/UIEventSource"
   import { onDestroy } from "svelte"
 
   /**

src/UI/Base/LogoutButton.svelte

@@ -4,7 +4,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
 
-  export let osmConnection: OsmConnection;
+  export let osmConnection: OsmConnection
 </script>
 
 <button

src/UI/Base/ModalRight.svelte

@@ -2,25 +2,20 @@
   import { createEventDispatcher } from "svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { trapFocus } from "trap-focus-svelte"
-  import { Utils } from "../../Utils"
 
   /**
    * The slotted element will be shown on the right side
    */
   const dispatch = createEventDispatcher<{ close }>()
-  let mainContent: HTMLElement
-
-
 </script>
 
 <div
+  aria-modal="true"
   autofocus
-  bind:this={mainContent}
   class="absolute top-0 right-0 h-screen w-full overflow-y-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12 normal-background flex flex-col"
   role="dialog"
-  tabindex="-1"
-  aria-modal="true"
   style="max-width: 100vw; max-height: 100vh"
+  tabindex="-1"
   use:trapFocus
 >
   <slot name="close-button">
@@ -31,7 +26,7 @@
       <XCircleIcon />
     </button>
   </slot>
-  <div role="document" >
-  <slot />
+  <div role="document">
+    <slot />
   </div>
 </div>