More styling

assets/layers/questions/questions.json

@@ -2653,7 +2653,6 @@
         }
       }
     },
-
     {
       "id": "qr_code",
       "labels": [
@@ -2706,6 +2705,28 @@
           "class": "subtle font-small"
         }
       }
+    },
+    {
+      "id": "nothing_known",
+      "labels": [
+        "added_by_default"
+      ],
+      "condition": {
+        "and": [
+          "_backend~*",
+          "_last_edit:passed_time>=300"
+        ]
+      },
+      "render": {
+        "special": {
+          "type": "if_nothing_known",
+          "text": {
+            "en": "Nothing is known about this place. Help by filling out the questions",
+            "nl": "Er is nog niets geweten. Help mee door de vragen te beantwoorden"
+          },
+          "cssClasses": "subtle m-4 italic flex items-center justify-center"
+        }
+      }
     }
   ]
 }

assets/svg/download.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Engr.eponce
+SPDX-License-Identifier: CC-BY-SA-4.0

assets/svg/license_info.json

@@ -359,24 +359,6 @@
     ],
     "sources": []
   },
-  {
-    "path": "download.svg",
-    "license": "CC0-1.0",
-    "authors": [
-      "Hannah Declerck"
-    ],
-    "sources": []
-  },
-  {
-    "path": "download.svg",
-    "license": "CC-BY-SA-4.0",
-    "authors": [
-      "Engr.eponce"
-    ],
-    "sources": [
-      "https://commons.wikimedia.org/wiki/File:Download-icon.svg"
-    ]
-  },
   {
     "path": "duplicate.svg",
     "license": "CC0-1.0",
@@ -735,18 +717,6 @@
     "authors": [],
     "sources": []
   },
-  {
-    "path": "logout.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
-  {
-    "path": "logout.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
   {
     "path": "mangrove_logo.svg",
     "license": "LOGO",
@@ -1117,18 +1087,6 @@
       "https://phabricator.wikimedia.org/diffusion/GOJU/browse/master/AUTHORS.txt"
     ]
   },
-  {
-    "path": "share.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
-  {
-    "path": "share.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
   {
     "path": "speech_bubble.svg",
     "license": "CC-BY-4.0",
@@ -1267,26 +1225,6 @@
     ],
     "sources": []
   },
-  {
-    "path": "up.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
-  {
-    "path": "up.svg",
-    "license": "TRIVIAL",
-    "authors": [],
-    "sources": []
-  },
-  {
-    "path": "upload.svg",
-    "license": "CC0-1.0",
-    "authors": [
-      "Pieter Vander Vennet"
-    ],
-    "sources": []
-  },
   {
     "path": "wikidata.svg",
     "license": "LOGO",

assets/svg/logout.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
-  <g id="surface1">
-    <path style="fill:none;stroke-width:2.803368;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 18.611232 277.184628 C 18.611232 277.184628 25.128526 281.985713 25.151677 283.782675 C 25.174553 285.579636 18.611232 290.396707 18.611232 290.396707 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.38125;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 24.831145 283.768067 L 9.980579 283.768067 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.210049;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 11.765414 277.999048 L 11.765414 275.983529 C 11.765414 273.642518 9.871162 273.611099 9.871162 273.611099 C 9.871162 273.611099 6.150459 273.558458 3.805038 273.558458 C 1.459342 273.558458 1.717862 275.920967 1.717862 275.920967 L 1.702152 283.850198 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-    <path style="fill:none;stroke-width:2.210049;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 11.765414 289.701073 L 11.765414 291.716592 C 11.765414 294.057879 9.871162 294.089298 9.871162 294.089298 C 9.871162 294.089298 6.150459 294.141939 3.805038 294.141939 C 1.459342 294.141939 1.647582 291.811401 1.647582 291.811401 L 1.702152 283.850198 " transform="matrix(14.173228,0,0,14.173228,0.0000135166,-3834.448583)"/>
-  </g>
-</svg>

assets/svg/share.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 
+SPDX-License-Identifier: LicenseRef-TRIVIAL

assets/svg/up.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: 
+SPDX-License-Identifier: LicenseRef-TRIVIAL

assets/svg/upload.svg.license

@@ -0,0 +1,2 @@
+SPDX-FileCopyrightText: Pieter Vander Vennet
+SPDX-License-Identifier: CC0-1.0

assets/themes/playgrounds/playgrounds.json

@@ -1,4 +1,5 @@
 {
+
   "id": "playgrounds",
   "title": {
     "en": "Playgrounds",
@@ -72,4 +73,4 @@
     }
   ],
   "widenFactor": 5
-}
+}

public/css/index-tailwind-output.css

@@ -941,11 +941,6 @@ video {
   margin-bottom: 0.25rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -956,6 +951,11 @@ video {
   margin-right: 0.25rem;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -2027,6 +2027,10 @@ video {
   row-gap: 0.25rem;
 }
 
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .gap-x-4 {
   column-gap: 1rem;
 }
@@ -2039,10 +2043,6 @@ video {
   column-gap: 0px;
 }
 
-.gap-y-2 {
-  row-gap: 0.5rem;
-}
-
 .gap-x-1 {
   column-gap: 0.25rem;
 }
@@ -2258,10 +2258,6 @@ video {
   align-self: stretch;
 }
 
-.justify-self-start {
-  justify-self: start;
-}
-
 .justify-self-end {
   justify-self: end;
 }
@@ -3453,10 +3449,6 @@ video {
   padding-right: 3rem;
 }
 
-.pl-1 {
-  padding-left: 0.25rem;
-}
-
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -3493,6 +3485,10 @@ video {
   padding-left: 0.75rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pb-1\.5 {
   padding-bottom: 0.375rem;
 }
@@ -4408,9 +4404,10 @@ video {
   --interactive-background: #dddddd;
   --interactive-foreground: black;
   --interactive-contrast: #ff00ff;
-  --button-background: #383838;
+  --button-background: #282828;
   --button-background-hover: #686868;
   --button-foreground: white;
+  --button-border-color: #F7F7F7;
   --disabled: #DBDBDB;
   /**
      * Base colour of interactive elements, mainly the 'subtle button'
@@ -4559,9 +4556,9 @@ button, .button {
   align-items: center;
   padding: 0.25rem 1rem;
   margin: 0.25rem;
-  border: 1px solid var(--foreground-color);
+  border: 1px solid var(--button-background-hover);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  border-radius: 30px;
+  border-radius: 15px;
   background: var(--background-color);
   transition: all 200ms;
 }
@@ -4578,9 +4575,14 @@ button:focus, .button:focus {
   border-color: var(--interactive-contrast);
 }
 
+.focus {
+  border: 2px solid var(--interactive-contrast);
+}
+
 button.primary, .button.primary {
   color: var(--button-foreground);
   background-color: var(--button-background);
+  border-color: var(--button-border-color);
 }
 
 button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
@@ -4592,6 +4594,12 @@ button.disabled {
   color: var(--disabled);
 }
 
+button.disabled svg path {
+  transition: all 200ms;
+  fill: var(--disabled);
+  stroke: var(--disabled);
+}
+
 button.primary.disabled, .button.primary.disabled {
   color: var(--button-foreground);
   background-color: var(--disabled);
@@ -4648,12 +4656,11 @@ label:not(.neutral-label):not(.button) {
   /**
      * Label should _contain_ the input element
      */
-  border: 2px solid var(--interactive-background);
   padding: 0.25rem;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
+  margin:0.25rem;
   border-radius: 0.5rem;
-  background-color: var(--low-interaction-background);
   width: 100%;
   box-sizing: border-box;
   transition: all 250ms;
@@ -4664,27 +4671,12 @@ label.button {
 }
 
 label:hover:not(.neutral-label) {
-  background-color: var(--catch-detail-color);
+  background-color: var(--low-interaction-background);
-  color: var(--catch-detail-foregroundcolor);
-  border: 2px solid var(--interactive-contrast);
-}
-
-label:not(.no-image-background):not(.neutral-label) img {
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  background: var(--low-interaction-background);
-}
-
-label:not(.neutral-label) svg path {
-  transition: all 250ms;
-}
-
-label:hover:not(.no-image-background):not(.neutral-label) svg path {
-  fill: var(--catch-detail-foregroundcolor) !important;
 }
 
 label.checked:not(.neutral-label) {
-  border: 2px solid var(--foreground-color);
+  color: var(--foreground-color);
+  background-color: var(--low-interaction-background);
 }
 
 textarea {
@@ -4924,10 +4916,6 @@ svg.apply-fill path {
   }
 }
 
-.glowing-shadow {
-  animation: glowing 1s ease-in-out infinite alternate;
-}
-
 /************************* LEGACY MARKER - CLEANUP BELOW ********************************/
 
 .slideshow-item img {
@@ -7170,6 +7158,10 @@ svg.apply-fill path {
     margin-bottom: 0px;
   }
 
+  .sm\:inline {
+    display: inline;
+  }
+
   .sm\:flex {
     display: flex;
   }
@@ -7269,6 +7261,10 @@ svg.apply-fill path {
     padding-right: 1rem;
   }
 
+  .sm\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
   .sm\:pt-1 {
     padding-top: 0.25rem;
   }
@@ -7335,6 +7331,10 @@ svg.apply-fill path {
     display: block;
   }
 
+  .md\:inline {
+    display: inline;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -7537,6 +7537,10 @@ svg.apply-fill path {
     padding-bottom: 2rem;
   }
 
+  .md\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
   .md\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;

public/css/tagrendering.css

@@ -1,36 +1,4 @@
 
-/**
- Some utility functions which are only used to render data
- */
-
-.question .form-text-field > input {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.question {
-    display: block;
-    margin-top: 1em;
-    background-color: var(--subtle-detail-color);
-    color: var(--subtle-detail-color-contrast);
-    padding: 1em;
-    border-radius: 0.75rem;
-    font-size: larger !important;
-    overflow-wrap: initial;
-}
-
-.question form {
-    display: inline-block;
-    max-width: 90vw;
-    width: 100%;
-}
-
-.question svg {
-    width: 100%;
-    height: 100%;
-}
-
-
 
 
 .mapping-icon-small-height {

src/Logic/MetaTagging.ts

@@ -83,15 +83,18 @@ export default class MetaTagging {
             let lastUpdateMoment = new Date()
             const tags = state?.featureProperties?.getStore(feature.properties.id)
             console.log("Binding an updater to", feature)
+            let updateCount = 0
             tags?.addCallbackD(() => {
-                console.log("Received an update! Re-calculating the metatags")
+                console.log("Received an update! Re-calculating the metatags, timediff:", new Date().getTime() - lastUpdateMoment.getTime())
 
                 if (feature !== state.selectedElement.data) {
                     return true // Unregister, we are not the selected element anymore
                 }
-                if (new Date().getTime() - lastUpdateMoment.getTime() < 250) {
+                if (new Date().getTime() - lastUpdateMoment.getTime() < (250 + updateCount * 50)) {
                     return
                 }
+
+                updateCount ++
                 lastUpdateMoment = new Date()
                 window.requestIdleCallback(() => {
                     this.updateCurrentSelectedElement()

src/Models/ThemeConfig/Conversion/PrepareLayer.ts

@@ -653,17 +653,14 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
         const specialVisualisations = ValidationUtils.getAllSpecialVisualisations(
             <any>json.tagRenderings
         )
+
         const usedSpecialFunctions = new Set(
             specialVisualisations.map((sv) =>
                 typeof sv === "string" ? undefined : sv.func.funcName
             )
         )
-        if (!allIds.has("lod")) {
+
-            json.tagRenderings.push(this._desugaring.tagRenderings.get("lod"))
+        /***** ADD TO TOP ****/
-        }
-        if (!usedSpecialFunctions.has("minimap")) {
-            json.tagRenderings.push(this._desugaring.tagRenderings.get("minimap"))
-        }
 
         if (
             this._desugaring.tagRenderings.has("just_created") &&
@@ -672,6 +669,26 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
             json.tagRenderings.unshift(this._desugaring.tagRenderings.get("just_created"))
         }
 
+        if (!allIds.has("nothing_known")) {
+            const indexFirstQuestion = json.tagRenderings.findIndex(tr => tr["question"] !== undefined)
+            json.tagRenderings.splice(indexFirstQuestion,
+                0,
+                this._desugaring.tagRenderings.get("nothing_known"))
+            console.log("aDDING",this._desugaring.tagRenderings.get("nothing_known"))
+        }
+
+
+        /***** ADD TO BOTTOM ****/
+
+
+        if (!allIds.has("lod")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("lod"))
+        }
+        if (!usedSpecialFunctions.has("minimap")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("minimap"))
+        }
+
+
         if (json.allowSplit && !usedSpecialFunctions.has("split_button")) {
             json.tagRenderings.push({
                 id: "split-button",
@@ -693,6 +710,19 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
             })
         }
 
+        if (!usedSpecialFunctions.has("favourite_status")) {
+            json.tagRenderings.push({
+                id: "favourite_status",
+                render: { "*": "{favourite_status()}" },
+            })
+        }
+        if (!allIds.has("share")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("share"))
+        }
+
+        if (!allIds.has("qr_code")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code"))
+        }
         if (
             json.source !== "special" &&
             json.source !== "special:library" &&
@@ -703,20 +733,7 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
             json.tagRenderings.push(this._desugaring.tagRenderings.get("last_edit"))
         }
 
-        if (!usedSpecialFunctions.has("favourite_status")) {
-            json.tagRenderings.push({
-                id: "favourite_status",
-                render: { "*": "{favourite_status()}" },
-            })
-        }
 
-        if (!allIds.has("qr_code")) {
-            json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code"))
-        }
-
-        if (!allIds.has("share")) {
-            json.tagRenderings.push(this._desugaring.tagRenderings.get("share"))
-        }
 
         if (!usedSpecialFunctions.has("all_tags")) {
             const trc: QuestionableTagRenderingConfigJson = {
@@ -768,6 +785,9 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
      * // should handle a simple special case
      * RewriteSpecial.convertIfNeeded({"special": {"type":"image_carousel"}}, ConversionContext.test()) // => {'*': "{image_carousel()}"}
      *
+     * // should add a class to the special element
+     * RewriteSpecial.convertIfNeeded({"special": {"type":"qr_code"}, class:"inline"}, ConversionContext.test()) // => {'*': "{qr_code():inline}"}
+     *
      * // should handle special case with a parameter
      * RewriteSpecial.convertIfNeeded({"special": {"type":"image_carousel", "image_key": "some_image_key"}}, ConversionContext.test()) // =>  {'*': "{image_carousel(some_image_key)}"}
      *
@@ -784,7 +804,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
      * // should warn for unexpected keys
      * const context = ConversionContext.test()
      * RewriteSpecial.convertIfNeeded({"special": {type: "image_carousel"}, "en": "xyz"}, context) // =>  {'*': "{image_carousel()}"}
-     * context.getAll("error")[0].message // => "The only keys allowed next to a 'special'-block are 'before' and 'after'. Perhaps you meant to put 'en' into the special block?"
+     * context.getAll("error")[0].message // => "The only keys allowed next to a 'special'-block are 'before', 'after' and 'class'. Perhaps you meant to put 'en' into the special block?"
      *
      * // should give an error on unknown visualisations
      * const context = ConversionContext.test()
@@ -863,9 +883,9 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
             return undefined
         }
         Array.from(Object.keys(input))
-            .filter((k) => k !== "special" && k !== "before" && k !== "after")
+            .filter((k) => k !== "special" && k !== "before" && k !== "after" && k !== "class")
             .map((k) => {
-                return `The only keys allowed next to a 'special'-block are 'before' and 'after'. Perhaps you meant to put '${k}' into the special block?`
+                return `The only keys allowed next to a 'special'-block are 'before', 'after' and 'class'. Perhaps you meant to put '${k}' into the special block?`
             })
             .forEach((e) => context.err(e))
 
@@ -917,6 +937,8 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
 
         const before = Translations.T(input.before)
         const after = Translations.T(input.after)
+        const clss: string = input.class !== undefined ? ":"+input.class : ""
+
 
         for (const ln of Object.keys(before?.translations ?? {})) {
             foundLanguages.add(ln)
@@ -930,7 +952,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
                 .map((nm) => RewriteSpecial.escapeStr(special[nm] ?? ""))
                 .join(",")
             return {
-                "*": `{${type}(${args})}`,
+                "*": `{${type}(${args})${clss}}`,
             }
         }
 
@@ -955,7 +977,7 @@ export class RewriteSpecial extends DesugaringStep<TagRenderingConfigJson> {
             }
             const beforeText = before?.textFor(ln) ?? ""
             const afterText = after?.textFor(ln) ?? ""
-            result[ln] = `${beforeText}{${type}(${args.map((a) => a).join(",")})}${afterText}`
+            result[ln] = `${beforeText}{${type}(${args.map((a) => a).join(",")})${clss}}${afterText}`
         }
         return result
     }

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="absolute bottom-0 right-0 h-full w-screen p-4 md:p-6 pointer-events-none" style="z-index: 21" on:click={() =>{
-  <div class="content normal-background h-full" on:click|stopPropagation={() => {}}>
+  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")
+            this.SetClass("focus")
-            console.log(">>>", index, totalNumberOfComments)
             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,
+                    args,
-                    style: style,
+                    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>
-      <h2>Normal background</h2>
+    There are a few styles, such as the
-      There are a few styles, such as the
+    <span class="literal-code">normal-background</span>
-      <span class="literal-code">normal-background</span>
+    -style which is used if there is nothing special going on. Some general information, with at most
-      -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>
-      <a href="https://example.com" target="_blank">a link to someplace</a>
+    <div class="subtle">Subtle</div>
-      <div class="subtle">Subtle</div>
 
-      <div class="alert">Alert: something went wrong</div>
+    <div class="alert">Alert: something went wrong</div>
-      <div class="warning">Warning</div>
+    <div class="warning">Warning</div>
-      <div class="information">Some important information</div>
+    <div class="information">Some important information</div>
-      <div class="thanks">Thank you! Operation successful</div>
+    <div class="thanks">Thank you! Operation successful</div>
-
+    <Login class="h-12 w-12" />
-      <Login class="h-12 w-12" />
+    <Loading>Loading...</Loading>
-      <Loading>Loading...</Loading>
-    </div>
 
     <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>

src/index.css

@@ -35,10 +35,11 @@
   --interactive-foreground: black;
   --interactive-contrast: #ff00ff;
 
-  --button-background: #383838;
+  --button-background: #282828;
   --button-background-hover: #686868;
   --button-foreground: white;
-    --disabled: #DBDBDB;
+  --button-border-color: #F7F7F7;
+  --disabled: #DBDBDB;
 
   /**
      * Base colour of interactive elements, mainly the 'subtle button'
@@ -191,9 +192,9 @@ button, .button {
     margin: 0.25rem;
 
     background: var(--background-color);
-    border: 1px solid var(--foreground-color);
+    border: 1px solid var(--button-background-hover);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    border-radius: 30px;
+    border-radius: 15px;
 
     background: var(--background-color);
     transition: all 200ms;
@@ -213,9 +214,14 @@ button:focus, .button:focus {
     border-color: var(--interactive-contrast);
 }
 
+.focus {
+    border: 2px solid var(--interactive-contrast);
+}
+
 button.primary, .button.primary {
     color: var(--button-foreground);
     background-color: var(--button-background);
+    border-color: var(--button-border-color);
 }
 
 button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
@@ -226,6 +232,14 @@ button.disabled {
     border-color: var(--disabled);
     color: var(--disabled);
 }
+button.disabled svg path {
+    transition: all 200ms;
+}
+button.disabled svg path {
+    fill: var(--disabled);
+    stroke: var(--disabled);
+}
+
 
 button.primary.disabled, .button.primary.disabled {
     color: var(--button-foreground);
@@ -284,12 +298,11 @@ label:not(.neutral-label):not(.button) {
   /**
      * Label should _contain_ the input element
      */
-  border: 2px solid var(--interactive-background);
   padding: 0.25rem;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
+  margin:0.25rem;
   border-radius: 0.5rem;
-  background-color: var(--low-interaction-background);
   width: 100%;
   box-sizing: border-box;
   transition: all 250ms;
@@ -300,27 +313,13 @@ label.button {
 }
 
 label:hover:not(.neutral-label) {
-  background-color: var(--catch-detail-color);
+  background-color: var(--low-interaction-background);
-  color: var(--catch-detail-foregroundcolor);
-  border: 2px solid var(--interactive-contrast);
 }
 
-label:not(.no-image-background):not(.neutral-label) img {
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  background: var(--low-interaction-background);
-}
-
-label:not(.neutral-label) svg path {
-  transition: all 250ms;
-}
-
-label:hover:not(.no-image-background):not(.neutral-label) svg path {
-  fill: var(--catch-detail-foregroundcolor) !important;
-}
 
 label.checked:not(.neutral-label) {
-  border: 2px solid var(--foreground-color);
+    color: var(--foreground-color);
+    background-color: var(--low-interaction-background);
 }
 
 textarea {
@@ -566,20 +565,7 @@ svg.apply-fill path {
   }
 }
 
-.glowing-shadow {
-  -webkit-animation: glowing 1s ease-in-out infinite alternate;
-  -moz-animation: glowing 1s ease-in-out infinite alternate;
-  animation: glowing 1s ease-in-out infinite alternate;
-}
 
-@-webkit-keyframes glowing {
-  from {
-    box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25;
-  }
-  to {
-    box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25;
-  }
-}
 
 /************************* LEGACY MARKER - CLEANUP BELOW ********************************/