More styling

src/UI/AllThemesGui.svelte

@@ -84,22 +84,18 @@
         <Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
       </div>
 
-      <div class="flex flex-col">
+      <div class="flex flex-col link-underline">
         <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
           <Tr t={t.title} />
         </h1>
-        <p>
           <Tr
-            cls="my-4 mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
+            cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
             t={Translations.t.index.intro}
           />
-          <span class="link-underline">
             <a href="#about">
               <Tr t={Translations.t.index.learnMore} />
               <ChevronDoubleRight class="inline h-4 w-4" />
             </a>
-          </span>
-        </p>
       </div>
     </div>
 

src/UI/Base/FileSelector.svelte

@@ -79,7 +79,8 @@
   }}
 >
   <label
-    class={twMerge(cls, drawAttention ? "glowing-shadow" : "")}
+    class:focus={drawAttention}
+    class={cls}
     for={id}
     on:click|preventDefault={() => {
       inputElement.click()

src/UI/Base/FloatOver.svelte

@@ -14,13 +14,16 @@
 <div
   class="absolute top-0 left-0 h-screen w-screen"
   on:click={() => {
+    console.log("OnClose")
     dispatch("close")
   }}
   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={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"} style="z-index: 21">
-  <div class="content normal-background h-full" on:click|stopPropagation={() => {}}>
+<div class="absolute bottom-0 right-0 h-full w-screen p-4 md:p-6 pointer-events-none" style="z-index: 21" on:click={() =>{
+  console.log("Closing...")
+  dispatch("close")}}>
+  <div class="content normal-background h-full pointer-events-auto" on:click|stopPropagation={() => {}}>
     <div class="h-full rounded-xl">
       <slot />
     </div>

src/UI/Base/LoginButton.svelte

@@ -3,6 +3,8 @@
   import Translations from "../i18n/Translations.js"
   import Tr from "./Tr.svelte"
   import Login from "../../assets/svg/Login.svelte"
+  import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
+  import ArrowLeftOnRectangle from "@babeard/svelte-heroicons/solid/ArrowLeftOnRectangle"
 
   export let osmConnection: OsmConnection
   export let clss: string | undefined = undefined
@@ -13,7 +15,7 @@
 </script>
 
 <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
-  <Login class="m-1 w-12" />
+  <ArrowLeftOnRectangle class="m-1 w-12" />
   <slot>
     <Tr t={Translations.t.general.loginWithOpenStreetMap} />
   </slot>

src/UI/Base/LogoutButton.svelte

@@ -3,15 +3,17 @@
   import Logout from "../../assets/svg/Logout.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
+  import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
 
   export let osmConnection: OsmConnection
 </script>
 
 <button
+  class="as-link"
   on:click={() => {
     osmConnection.LogOut()
   }}
 >
-  <Logout class="h-6 w-6" />
+  <ArrowRightOnRectangle class="h-6 w-6" />
   <Tr t={Translations.t.general.logout} />
 </button>

src/UI/BigComponents/Filterview.svelte

@@ -9,7 +9,6 @@
   import FilterConfig from "../../Models/ThemeConfig/FilterConfig"
   import If from "../Base/If.svelte"
   import Dropdown from "../Base/Dropdown.svelte"
-  import { onDestroy } from "svelte"
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import FilterviewWithFields from "./FilterviewWithFields.svelte"
   import Tr from "../Base/Tr.svelte"
@@ -40,20 +39,11 @@
     return filteredLayer.appliedFilters.get(option.id)
   }
 
-  let mainElem: HTMLElement
-  $: onDestroy(
-    highlightedLayer.addCallbackAndRun((highlightedLayer) => {
-      if (highlightedLayer === filteredLayer.layerDef.id) {
-        mainElem?.classList?.add("glowing-shadow")
-      } else {
-        mainElem?.classList?.remove("glowing-shadow")
-      }
-    })
-  )
+
 </script>
 
 {#if filteredLayer.layerDef.name}
-  <div bind:this={mainElem} class="mb-1.5">
+  <div class:focus={$highlightedLayer === filteredLayer.layerDef.id} class="mb-1.5">
     <Checkbox selected={isDisplayed}>
       <If condition={filteredLayer.isDisplayed}>
         <ToSvelte

src/UI/BigComponents/OverlayToggle.svelte

@@ -27,9 +27,9 @@
   $: onDestroy(
     highlightedLayer.addCallbackAndRun((highlightedLayer) => {
       if (highlightedLayer === layerproperties.id) {
-        mainElem?.classList?.add("glowing-shadow")
+        mainElem?.classList?.add("focus")
       } else {
-        mainElem?.classList?.remove("glowing-shadow")
+        mainElem?.classList?.remove("focus")
       }
     })
   )

src/UI/BigComponents/ThemeButton.svelte

@@ -85,9 +85,9 @@
 </script>
 
 {#if theme.id !== personal.id || $unlockedPersonal}
-  <a class={"button theme-button w-full text-ellipsis"} href={$href}>
+  <a class={"button theme-button w-full text-ellipsis"} style="justify-content: start" href={$href}>
     <img src={theme.icon} class="m-1 mr-2 block h-11 w-11 sm:m-2 sm:mr-4" alt="" />
-    <span class="flex flex-col overflow-hidden text-ellipsis">
+    <span class="flex flex-col overflow-hidden text-ellipsis ">
       <Tr t={title} />
 
       {#if selected}

src/UI/Comparison/ComparisonAction.svelte

@@ -130,7 +130,7 @@
     {/if}
   </div>
   {#if $tags[key] && $tags[key] !== externalProperties[key]}
-    <div class:glowing-shadow={onOverwrite}>
+    <div class:focus={onOverwrite}>
       <span class="subtle">
         <Tr t={t.currentInOsmIs} />
       </span>

src/UI/Comparison/ComparisonTable.svelte

@@ -152,7 +152,7 @@
         {/if}
         {#if currentStep === "init"}
           {#each $missing as key (key)}
-            <div class:glowing-shadow={applyAllHovered} class="mx-2 rounded-2xl">
+            <div class:focus={applyAllHovered} class="mx-2 rounded-2xl">
               <ComparisonAction
                 {key}
                 {state}

src/UI/DownloadFlow/DownloadButton.svelte

@@ -68,7 +68,7 @@
     {/if}
   </Loading>
 {:else}
-  <button class="flex w-full" on:click={clicked}>
+  <button class="w-full" style="justify-content: start" on:click={clicked}>
     <slot name="image">
       <ArrowDownTrayIcon class="mr-2 h-12 w-12 shrink-0" />
     </slot>

src/UI/Map/MapLibreAdaptor.ts

@@ -73,7 +73,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
             this.location.setData({ ...this.location.data })
         }
         this.zoom = state?.zoom ?? new UIEventSource(1)
-        this.minzoom = state?.minzoom ?? new UIEventSource(0)
+        this.minzoom = state?.minzoom ?? new UIEventSource(0.5)// 0.5 is the maplibre minzoom
         this.maxzoom = state?.maxzoom ?? new UIEventSource(24)
         this.zoom.addCallbackAndRunD((z) => {
             if (z < this.minzoom.data) {

src/UI/Popup/Notes/NoteCommentElement.ts

@@ -104,8 +104,7 @@ export default class NoteCommentElement extends Combine {
         ])
         this.SetClass("flex flex-col pb-2 mb-2 border-gray-500 border-b")
         if (comment.highlighted) {
-            this.SetClass("glowing-shadow")
-            console.log(">>>", index, totalNumberOfComments)
+            this.SetClass("focus")
             if (index + 2 === totalNumberOfComments) {
                 console.log("Scrolling into view")
                 requestAnimationFrame(() => {

src/UI/Popup/NothingKnown.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  /**
+   * Displays a 'nothing is yet known' if all questions are unanswered
+   */
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+
+  export let state: SpecialVisualizationState
+  export let tags: UIEventSource<Record<string, string>>
+  export let layer: LayerConfig
+  export let text: string
+  export let cssClasses: string = ""
+  let knowableRenderings = layer.tagRenderings.filter(tr => tr.question !== undefined)
+  let hasKnownQuestion = tags.mapD(t => knowableRenderings.some(tr => tr.IsKnown(t)))
+
+</script>
+
+{#if !$hasKnownQuestion}
+  <span class={cssClasses}>
+  {text}
+  </span>
+{/if}

src/UI/Popup/SplitRoadWizard.svelte

@@ -4,7 +4,6 @@
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import Tr from "../Base/Tr.svelte"
-  import Scissors from "../../assets/svg/Scissors.svelte"
   import WaySplitMap from "../BigComponents/WaySplitMap.svelte"
   import BackButton from "../Base/BackButton.svelte"
   import SplitAction from "../../Logic/Osm/Actions/SplitAction"
@@ -13,7 +12,7 @@
   import Loading from "../Base/Loading.svelte"
   import { OsmWay } from "../../Logic/Osm/OsmObject"
   import type { WayId } from "../../Models/OsmFeature"
-  import { Utils } from "../../Utils"
+  import Scissors from "@babeard/svelte-heroicons/solid/Scissors"
 
   export let state: SpecialVisualizationState
   export let id: WayId
@@ -79,7 +78,7 @@
   {#if step === "deleted"}
     <!-- Empty -->
   {:else if step === "initial"}
-    <button on:click={() => downloadWay()}>
+    <button class="w-full" on:click={() => downloadWay()}>
       <Scissors class="h-6 w-6 shrink-0" />
       <Tr t={t.inviteToSplit} />
     </button>

src/UI/Popup/TagRendering/SpecialTranslation.svelte

@@ -24,6 +24,8 @@
   export let feature: Feature
   export let layer: LayerConfig | undefined
 
+  export let clss: string = ""
+
   let language = Locale.language
   let lang = t.actualLanguage($language)
   let txt: string = t.textFor($language)
@@ -48,7 +50,7 @@
   function createVisualisation(specpart: Exclude<RenderingSpecification, string>): BaseUIElement {
     {
       try {
-        return specpart.func.constr(state, tags, specpart.args, feature, layer)
+        return specpart.func.constr(state, tags, specpart.args, feature, layer)?.SetClass(specpart.style)
       } catch (e) {
         console.error(
           "Could not construct a special visualisation with specification",
@@ -66,16 +68,16 @@
 {#if lang === "*"}
   {#each specs as specpart}
     {#if typeof specpart === "string"}
-      <span>
+      <span class={clss}>
         {@html Utils.purify(Utils.SubstituteKeys(specpart, $tags))}
         <WeblateLink context={t.context} />
       </span>
     {:else if $tags !== undefined}
-      <ToSvelte construct={() => createVisualisation(specpart)} />
+      <ToSvelte construct={() => createVisualisation(specpart)?.SetClass(clss)} />
     {/if}
   {/each}
 {:else}
-  <span {lang}>
+  <span {lang} class={clss}>
     {#each specs as specpart}
       {#if typeof specpart === "string"}
         <span>

src/UI/Popup/TagRendering/TagRenderingAnswer.svelte

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

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -60,12 +60,13 @@
     }
     const highlighted = highlightedRendering.data
     if (config.id === highlighted) {
-      htmlElem.classList.add("glowing-shadow")
+      htmlElem.classList.add("focus")
       htmlElem.tabIndex = -1
       htmlElem.scrollIntoView({ behavior: "smooth" })
       Utils.focusOnFocusableChild(htmlElem)
     } else {
-      htmlElem.classList.remove("glowing-shadow")
+      htmlElem.classList.remove("focus")
+
     }
   }
 

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -12,6 +12,11 @@
   export let tags: UIEventSource<Record<string, string>>
   export let state: SpecialVisualizationState
   export let layer: LayerConfig
+
+  /**
+   * Css classes to apply
+   */
+  export let clss: string = ""
   export let mapping: {
     readonly then: Translation
     readonly searchTerms?: Record<string, string[]>
@@ -33,8 +38,8 @@
       icon={mapping.icon}
       clss={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}`, "mr-2")}
     />
-    <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
+    <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
   </div>
 {:else if mapping.then !== undefined}
-  <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
+  <SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
 {/if}

src/UI/Reviews/AllReviews.svelte

@@ -26,7 +26,7 @@
   })
 </script>
 
-<div class="border-2 border-dashed border-gray-300">
+<div class="border-2 border-dashed border-gray-300 p-2">
   {#if _reviews.length > 1}
     <StarsBar score={$average} />
   {/if}
@@ -35,10 +35,11 @@
       <SingleReview {review} />
     {/each}
   {:else}
+    <div class="subtle italic m-2">
     <Tr t={Translations.t.reviews.no_reviews_yet} />
+    </div>
   {/if}
   <div class="flex justify-end">
-    <Mangrove_logo class="h-12 w-12 shrink-0 p-1" />
     <Tr cls="text-sm subtle" t={Translations.t.reviews.attribution} />
   </div>
 </div>

src/UI/Reviews/ReviewsOverview.svelte

@@ -63,7 +63,7 @@
     </a>
   {/if}
   <div class="flex justify-end">
-    <Mangrove_logo class="h-12 w-12 shrink-0 p-1" />
+    <Mangrove_logo class="h-6 w-6 shrink-0 p-1" />
     <Tr cls="text-sm subtle" t={t.attribution} />
   </div>
 </LoginToggle>

src/UI/SpecialVisualisationUtils.ts

@@ -82,8 +82,8 @@ export default class SpecialVisualisationUtils {
                 }
 
                 const element: RenderingSpecification = {
-                    args: args,
-                    style: style,
+                    args,
+                    style,
                     func: knownSpecial,
                 }
                 return [...partBefore, element, ...partAfter]

src/UI/StylesheetTestGui.svelte

@@ -7,27 +7,24 @@
 </script>
 
 <main>
-  <div>
+  <div class="flex-col flex gap-y-2">
     <h1>Stylesheet testing grounds</h1>
 
     This document exists to explore the style hierarchy.
 
-    <div class="normal-background">
-      <h2>Normal background</h2>
-      There are a few styles, such as the
-      <span class="literal-code">normal-background</span>
-      -style which is used if there is nothing special going on. Some general information, with at most
-      <a href="https://example.com" target="_blank">a link to someplace</a>
-      <div class="subtle">Subtle</div>
+    <h2>Normal background</h2>
+    There are a few styles, such as the
+    <span class="literal-code">normal-background</span>
+    -style which is used if there is nothing special going on. Some general information, with at most
+    <a href="https://example.com" target="_blank">a link to someplace</a>
+    <div class="subtle">Subtle</div>
 
-      <div class="alert">Alert: something went wrong</div>
-      <div class="warning">Warning</div>
-      <div class="information">Some important information</div>
-      <div class="thanks">Thank you! Operation successful</div>
-
-      <Login class="h-12 w-12" />
-      <Loading>Loading...</Loading>
-    </div>
+    <div class="alert">Alert: something went wrong</div>
+    <div class="warning">Warning</div>
+    <div class="information">Some important information</div>
+    <div class="thanks">Thank you! Operation successful</div>
+    <Login class="h-12 w-12" />
+    <Loading>Loading...</Loading>
 
     <div class="low-interaction flex flex-col">
       <h2>Low interaction</h2>

src/UI/ThemeViewGUI.svelte

@@ -76,6 +76,7 @@
   import Github from "../assets/svg/Github.svelte"
   import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
   import Share from "@babeard/svelte-heroicons/solid/Share"
+  import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -255,12 +256,13 @@
           <img
             role="presentation"
             alt=""
-            class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8"
+            class="mr-0.5 block h-4 w-4 sm:mr-1 md:mr-2 md:h-8 md:w-8"
             src={layout.icon}
           />
           <b class="mr-1">
             <Tr t={layout.title} />
           </b>
+          <ChevronRight class="w-4 h-4"/>
         </div>
       </MapControlButton>
       <MapControlButton
@@ -328,7 +330,7 @@
           {/if}
         </If>
 
-        <div class="flex">
+        <div class="flex items-center">
           <!-- bottom left elements -->
           <If condition={state.featureSwitches.featureSwitchFilter}>
             <MapControlButton
@@ -348,13 +350,13 @@
             />
           </If>
           <a
-            class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
+            class="self-center bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl px-1 ml-1 text-white opacity-50 hover:opacity-100"
             on:click={() => {
               state.guistate.themeViewTab.setData("copyright")
               state.guistate.themeIsOpened.setData(true)
             }}
           >
-            © OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
+            © <span class="hidden sm:inline sm:pr-2 "> OpenStreetMap<span class="hidden md:inline md:pr-2 w-24">, {rasterLayerName}</span></span>
           </a>
         </div>
       </div>