More layout tweaks

langs/en.json

@@ -65,7 +65,8 @@
             "title": "Missing items"
         },
         "noDataLoaded": "The external website has no linked data that could be loaded",
-        "overwrite": "Overwrite in OpenStreetMap"
+        "overwrite": "Overwrite in OpenStreetMap",
+        "title": "Structured data loaded from the external website"
     },
     "favourite": {
         "loginNeeded": "<h3>Log in</h3>A personal layout is only available for OpenStreetMap users",

public/css/tagrendering.css

@@ -22,6 +22,21 @@
     width: unset;
 }
 
+
+
+.mapping-icon-small-width {
+    width: 1.5rem;
+}
+
+.mapping-icon-medium-width {
+    width: 3rem;
+}
+
+.mapping-icon-large-width {
+    width: 5rem;
+}
+
+
 .mapping-icon-small {
     /* A mapping icon type */
     width: 1.5rem;

src/UI/BigComponents/UserProfile.svelte

@@ -41,13 +41,13 @@
         class="link-no-underline flex items-center self-end"
       >
         <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
-        <Tr slot="message" t={Translations.t.userinfo.editDescription} />
+        <Tr t={Translations.t.userinfo.editDescription} />
       </a>
     {:else}
       <Tr t={Translations.t.userinfo.noDescription} />
       <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
-        <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
+        <Pencil class="h-8 w-8 p-2" />
-        <Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
+        <Tr t={Translations.t.userinfo.noDescriptionCallToAction} />
       </a>
     {/if}
   </div>

src/UI/Comparison/ComparisonTool.svelte

@@ -13,6 +13,7 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
+  import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
 
   export let externalData: Store<
     | { success: { content: Record<string, string> } }
@@ -40,7 +41,10 @@
   </div>
 {:else if $externalData["success"] !== undefined}
   <AccordionSingle>
-    <span slot="header">Structured data from the website</span>
+    <span slot="header" class="flex">
+      <GlobeAlt class="w-6 h-6"/>
+      <Tr t={Translations.t.external.title}/>
+    </span>
   <ComparisonTable
     externalProperties={$externalData["success"]}
     {state}

src/UI/Image/UploadImage.svelte

@@ -93,7 +93,7 @@
         <Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
       </button>
       <br />
-      <Tr t={t.respectPrivacy} />
+      <Tr cls="subtle italic" t={t.respectPrivacy} />
     </div>
   </div>
 </LoginToggle>

src/UI/Map/Marker.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
   import Icon from "./Icon.svelte"
+  import { twMerge } from "tailwind-merge"
 
   /**
    * Renders a 'marker', which consists of multiple 'icons'
    */
   export let icons: { icon: string; color: string }[]
+  /**
+   * Class which is applied onto the individual icons
+   */
+  export let clss = ""
+  export let size = "w-full h-full"
 </script>
 
 {#if icons !== undefined && icons.length > 0}
-  <div class="relative h-full w-full">
+  <div class={twMerge("relative", size)}>
     {#each icons as icon}
       <div class="absolute top-0 left-0 h-full w-full">
-        <Icon icon={icon.icon} color={icon.color} />
+        <Icon icon={icon.icon} color={icon.color} {clss} />
       </div>
     {/each}
   </div>

src/UI/Popup/TagRendering/TagRenderingAnswer.svelte

@@ -28,11 +28,12 @@
 </script>
 
 {#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
-  <div {id} class={twMerge("link-underline inline-block w-full h-full", extraClasses)}>
+  <div {id} class={twMerge("link-underline flex flex-col w-full", extraClasses)}>
     {#if $trs.length === 1}
-      <TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} clss={config?.classes?.join(" ") ?? ""}/>
+      <TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer}
+                           clss={config?.classes?.join(" ") ?? ""} />
     {/if}
-    {#if $trs.length > 1}
+        {#if $trs.length > 1}
       <ul>
         {#each $trs as mapping}
           <li>

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -106,7 +106,7 @@
         </button>
       </TagRenderingQuestion>
     {:else}
-      <div class="low-interaction flex items-center justify-between overflow-hidden rounded px-2">
+      <div class="low-interaction flex items-center justify-between overflow-hidden rounded pl-2">
         <TagRenderingAnswer id={answerId} {config} {tags} {selectedElement} {state} {layer} />
         <EditButton
           arialabel={config.editButtonAriaLabel}

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -7,6 +7,7 @@
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import { twJoin } from "tailwind-merge"
   import Icon from "../../Map/Icon.svelte"
+  import Marker from "../../Map/Marker.svelte"
 
   export let selectedElement: Feature
   export let tags: UIEventSource<Record<string, string>>
@@ -30,13 +31,22 @@
       | "large-height"
       | string
   }
+  function iconToMarker(spec: string) {
+    return spec.split(";").map(subspec => {
+      const [icon, color] = subspec.split(":")
+      return {
+        icon, color: color ?? "black"
+      }
+    })
+  }
 </script>
 
 {#if mapping.icon !== undefined}
   <div class="inline-flex items-center">
-    <Icon
+    <Marker
-      icon={mapping.icon}
+      icons={iconToMarker(mapping.icon)}
-      clss={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}`, "mr-2")}
+      size={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${mapping.iconClass ?? "small"}-width`, "mr-2", "shrink-0 mx-2")}
+      clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
     />
     <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
   </div>

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -325,6 +325,8 @@
           </div>
 
           {#if config.questionhint}
+            <span class="italic">
+
             {#if config.questionHintIsMd}
               <Markdown srcWritable={config.questionhint.current} />
             {:else}
@@ -338,6 +340,7 @@
                 />
               </div>
             {/if}
+            </span>
           {/if}
         </legend>