Merge master

src/UI/BigComponents/CopyrightPanel.svelte

@@ -38,28 +38,19 @@
 
     let bgAttr: BaseUIElement | string = undefined
     if (attrText && attrUrl) {
-      bgAttr =
-        "<a href='" +
-        attrUrl +
-        "' target='_blank' rel='noopener'>" +
-        attrText +
-        "</a>"
+      bgAttr = "<a href='" + attrUrl + "' target='_blank' rel='noopener'>" + attrText + "</a>"
     } else if (attrUrl) {
       bgAttr = attrUrl
     } else {
       bgAttr = attrText
     }
     if (bgAttr) {
-      return Translations.t.general.attribution.attributionBackgroundLayerWithCopyright.Subs(
-        {
-          name: props.name,
-          copyright: bgAttr
-        }
-      )
+      return Translations.t.general.attribution.attributionBackgroundLayerWithCopyright.Subs({
+        name: props.name,
+        copyright: bgAttr,
+      })
     }
-    return Translations.t.general.attribution.attributionBackgroundLayer.Subs(
-      props
-    )
+    return Translations.t.general.attribution.attributionBackgroundLayer.Subs(props)
   })
 
   const allLicenses = {}
@@ -68,14 +59,13 @@
     allLicenses[license.path] = license
   }
 
-
   function calculateDataContributions(contributions: Map<string, number>): Translation {
     if (contributions === undefined) {
       return undefined
     }
     const sorted = Array.from(contributions, ([name, value]) => ({
       name,
-      value
+      value,
     })).filter((x) => x.name !== undefined && x.name !== "undefined")
     if (sorted.length === 0) {
       return undefined
@@ -87,29 +77,30 @@
       sorted.splice(10, sorted.length - 10)
     }
     const links = sorted.map(
-      (kv) =>
-        `<a href="https://openstreetmap.org/user/${kv.name}" target="_blank">${kv.name}</a>`
+      (kv) => `<a href="https://openstreetmap.org/user/${kv.name}" target="_blank">${kv.name}</a>`
     )
     const contribs = links.join(", ")
 
     if (hiddenCount <= 0) {
       return t.mapContributionsBy.Subs({
-        contributors: contribs
+        contributors: contribs,
       })
     } else {
       return t.mapContributionsByAndHidden.Subs({
         contributors: contribs,
-        hiddenCount: hiddenCount
+        hiddenCount: hiddenCount,
       })
     }
   }
 
-  const datacontributions = new ContributorCount(state).Contributors.map(counts => calculateDataContributions(counts))
-
-
-  function codeContributors(contributors,
-                            translation: TypedTranslation<{ contributors; hiddenCount }>): Translation {
+  const datacontributions = new ContributorCount(state).Contributors.map((counts) =>
+    calculateDataContributions(counts)
+  )
 
+  function codeContributors(
+    contributors,
+    translation: TypedTranslation<{ contributors; hiddenCount }>
+  ): Translation {
     const total = contributors.contributors.length
     let filtered = [...contributors.contributors]
 
@@ -124,23 +115,23 @@
 
     return translation.Subs({
       contributors: contribsStr,
-      hiddenCount: total - 10
+      hiddenCount: total - 10,
     })
   }
 </script>
 
-<div class="flex flex-col gap-y-4 link-underline">
+<div class="link-underline flex flex-col gap-y-4">
   <h3>
     <Tr t={t.attributionTitle} />
   </h3>
   <div class="flex items-center gap-x-2">
-    <Osm_logo class="w-8 h-8 shrink-0" />
+    <Osm_logo class="h-8 w-8 shrink-0" />
     <Tr t={t.attributionContent} />
   </div>
 
   {#if $bgMapAttribution !== undefined}
     <div class="flex items-center gap-x-2">
-      <Generic_map class="w-8 h-8 shrink-0" />
+      <Generic_map class="h-8 w-8 shrink-0" />
       <Tr t={$bgMapAttribution} />
     </div>
   {/if}
@@ -151,23 +142,20 @@
     </div>
   {/if}
 
-
   {#if $datacontributions !== undefined}
     <div class="flex items-center gap-x-2">
-      <UserGroupIcon class="w-8 h-8 shrink-0" />
+      <UserGroupIcon class="h-8 w-8 shrink-0" />
       <Tr t={$datacontributions} />
     </div>
   {/if}
 
   <div class="flex items-center gap-x-2">
-
-
-    <Github class="w-8 h-8 shrink-0" />
+    <Github class="h-8 w-8 shrink-0" />
     <Tr t={codeContributors(contributors, t.codeContributionsBy)} />
   </div>
 
   <div class="flex items-center gap-x-2">
-    <TranslateIcon class="w-8 h-8 shrink-0" />
+    <TranslateIcon class="h-8 w-8 shrink-0" />
     <Tr t={codeContributors(translators, t.translatedBy)} />
   </div>
 
@@ -180,7 +168,6 @@
     {/each}
   </AccordionSingle>
 
-
   <div class="self-end">
     MapComplete {Constants.vNumber}
   </div>

src/UI/BigComponents/FilterPanel.svelte

@@ -48,14 +48,13 @@
 </script>
 
 <TitledPanel>
-  <div class="flex flex-wrap items-center justify-between w-full mr-10" slot="title">
+  <div class="mr-10 flex w-full flex-wrap items-center justify-between" slot="title">
     <div class="flex">
       <Filter class="h-6 w-6 pr-2" />
       <Tr t={Translations.t.general.menu.filter} />
     </div>
 
-
-    <div class="flex self-end text-sm gap-x-2 ml-2 self-end">
+    <div class="ml-2 flex gap-x-2 self-end self-end text-sm">
       <button class="small as-link" class:disabled={allEnabled} on:click={() => enableAll(true)}>
         <Tr t={Translations.t.general.filterPanel.enableAll} />
       </button>
@@ -63,24 +62,22 @@
         <Tr t={Translations.t.general.filterPanel.disableAll} />
       </button>
     </div>
-
   </div>
 
-    {#each layout.layers as layer}
-      <Filterview
-        zoomlevel={state.mapProperties.zoom}
-        filteredLayer={state.layerState.filteredLayers.get(layer.id)}
-        highlightedLayer={state.guistate.highlightedLayerInFilters}
-      />
-    {/each}
-
-    {#each layout.tileLayerSources as tilesource}
-      <OverlayToggle
-        layerproperties={tilesource}
-        state={state.overlayLayerStates.get(tilesource.id)}
-        highlightedLayer={state.guistate.highlightedLayerInFilters}
-        zoomlevel={state.mapProperties.zoom}
-      />
-    {/each}
+  {#each layout.layers as layer}
+    <Filterview
+      zoomlevel={state.mapProperties.zoom}
+      filteredLayer={state.layerState.filteredLayers.get(layer.id)}
+      highlightedLayer={state.guistate.highlightedLayerInFilters}
+    />
+  {/each}
 
+  {#each layout.tileLayerSources as tilesource}
+    <OverlayToggle
+      layerproperties={tilesource}
+      state={state.overlayLayerStates.get(tilesource.id)}
+      highlightedLayer={state.guistate.highlightedLayerInFilters}
+      zoomlevel={state.mapProperties.zoom}
+    />
+  {/each}
 </TitledPanel>

src/UI/BigComponents/IconCopyrightPanel.svelte

@@ -23,9 +23,14 @@
 </script>
 
 {#if license != undefined && license.license.indexOf("trivial") < 0}
-  <div class="flex flex-wrap border-b border-gray-300 m-2 border-box">
-    <img class={twJoin( "w-12 min-h-12 mr-2 mb-2", license["mostly_white"] && "bg-slate-400 rounded-full h-12" )}
-         src={iconPath} />
+  <div class="border-box m-2 flex flex-wrap border-b border-gray-300">
+    <img
+      class={twJoin(
+        "min-h-12 mr-2 mb-2 w-12",
+        license["mostly_white"] && "h-12 rounded-full bg-slate-400"
+      )}
+      src={iconPath}
+    />
 
     <div class="flex flex-col" style="width: calc(100% - 50px - 0.5em); min-width: 12rem;">
       <div class="font-bold">
@@ -36,7 +41,5 @@
         <a href={source} target="_blank">{sourceName(source)}</a>
       {/each}
     </div>
-
   </div>
 {/if}
-

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -73,7 +73,7 @@
   </div>
   <slot name="close-button">
     <button
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer self-center"
+      class="mt-2 h-fit shrink-0 cursor-pointer self-center rounded-full border-none p-0"
       on:click={() => state.selectedElement.setData(undefined)}
       style="border: 0 !important; padding: 0 !important;"
       use:ariaLabel={Translations.t.general.backToMap}

src/UI/BigComponents/SelectedElementView.svelte

@@ -24,7 +24,6 @@
     (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false
   )
 
-
   export let layer: LayerConfig
 
   let _metatags: Record<string, string>