More styling tweaks and bug fixes

Models/Constants.ts

@@ -2,7 +2,7 @@ import {Utils} from "../Utils";
 
 export default class Constants {
 
-    public static vNumber = "0.15.2";
+    public static vNumber = "0.15.3";
     
     public static ImgurApiKey = '7070e7167f0a25a'
     public static readonly mapillary_client_token_v4 = "MLY|4441509239301885|b40ad2d3ea105435bd40c7e76993ae85"

UI/Base/ScrollableFullScreen.ts

@@ -91,10 +91,8 @@ export default class ScrollableFullScreen extends UIElement {
     private BuildComponent(title: BaseUIElement, content: BaseUIElement, isShown: UIEventSource<boolean>) {
         const returnToTheMap =
             new Combine([
-                new Img(Svg.back.replace(/#000000/g, "#cccccc"), true)
+                Svg.back_svg().SetClass("block md:hidden w-12 h-12 p-2 svg-foreground"),
-                    .SetClass("block md:hidden w-12 h-12 p-2"),
+                Svg.close_svg()                    .SetClass("hidden md:block  w-12 h-12  p-3 svg-foreground")
-                new Img(Svg.close.replace(/#000000/g, "#cccccc"), true)
-                    .SetClass("hidden md:block  w-12 h-12  p-3")
             ]).SetClass("rounded-full p-0 flex-shrink-0 self-center")
 
         returnToTheMap.onClick(() => {

UI/BigComponents/UserBadge.ts

@@ -34,7 +34,7 @@ export default class UserBadge extends Toggle {
                 const homeButton = new VariableUiElement(
                     userDetails.map((userinfo) => {
                         if (userinfo.home) {
-                            return Svg.home_ui();
+                            return Svg.home_svg();
                         }
                         return " ";
                     })

UI/ImportFlow/RequestFile.ts

@@ -9,6 +9,7 @@ import BaseUIElement from "../BaseUIElement";
 import FileSelectorButton from "../Input/FileSelectorButton";
 import {FlowStep} from "./FlowStep";
 import {parse} from "papaparse";
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 class FileSelector extends InputElementMap<FileList, { name: string, contents: Promise<string> }> {
     constructor(label: BaseUIElement) {
@@ -139,7 +140,15 @@ export class RequestFile extends Combine implements FlowStep<any> {
             if (v?.error === undefined) {
                 return undefined;
             }
-            return v.error.Clone().SetClass("alert");
+            let err: BaseUIElement;
+            if(typeof v.error === "string"){
+                err = new FixedUiElement(v.error)
+            }else if(v.error.Clone !== undefined){
+                err = v.error.Clone()
+            }else{
+                err = v.error
+            }
+            return err.SetClass("alert");
         }))
 
         super([

UI/Input/RadioButton.ts

@@ -143,10 +143,10 @@ export class RadioButton<T> extends InputElement<T> {
                 block.classList.add(
                     "m-1",
                     "border",
-                    "rounded-3xl",
+                    "border-gray-400"
-                    "border-gray-400",
                 )
             }
+            block.style.borderRadius = "1.5rem"
             wrappers.push(block);
 
             form.appendChild(block);
@@ -161,10 +161,10 @@ export class RadioButton<T> extends InputElement<T> {
 
                 if (input.checked) {
                     wrappers[i].classList.remove("border-gray-400");
-                    wrappers[i].classList.add("border-black");
+                    wrappers[i].classList.add("border-attention");
                 } else {
                     wrappers[i].classList.add("border-gray-400");
-                    wrappers[i].classList.remove("border-black");
+                    wrappers[i].classList.remove("border-attention");
                 }
             }
         });

assets/layers/nature_reserve/nature_reserve.json

@@ -391,14 +391,7 @@
         "fr": "Superficie : {_surface:ha} ha",
         "de": "Grundfläche: {_surface:ha}ha"
       },
-      "mappings": [
+      "condition": "_surface:ha!=0",
-        {
-          "if": "_surface:ha=0",
-          "then": {
-            "*": ""
-          }
-        }
-      ],
       "id": "Surface area"
     },
     "wikipedia"

assets/layers/observation_tower/observation_tower.json

@@ -139,6 +139,44 @@
       },
       "id": "Payment methods"
     },
+    {
+      "id": "step_count",
+      "question": {
+        "en": "How much individual steps does one have to climb to reach the top of this tower?",
+        "nl": "Hoeveel treden moet men beklimmen op de top van de toren te bereiken?"
+      },
+      "freeform": {
+        "key": "step_count",
+        "type": "pnat"
+      },
+      "render": {
+        "en": "This tower has {step_count} steps to reach the top",
+        "nl": "Deze toren heeft {step_count} traptredes"
+      }
+    },
+    {
+      "id": "elevator",
+      "question": {
+        "en": "Does this tower have an elevator?",
+        "nl": "Heeft deze toren een lift?"
+      },
+      "mappings": [
+        {
+          "if": "elevator=yes",
+          "then": {
+            "en": "This tower has an elevator which takes visitors to the top",
+            "nl": "Deze toren heeft een lift die bezoekers naar de top van de toren brengt"
+          }
+        },
+        {
+          "if": "elevator=no",
+          "then": {
+            "en": "This tower does not have an elevator",
+            "nl": "Deze toren heeft geen lift"
+          }
+        }
+      ]
+    },
     "wheelchair-access",
     "wikipedia"
   ],

assets/themes/natuurpunt/natuurpunt.css

@@ -59,4 +59,16 @@ h1, h2, h3, h4 {
 .tab-non-active svg path {
     fill: white !important;
     stroke: white !important;
+}
+
+.md\:rounded-xl {
+    border-radius: unset !important;
+}
+
+.rounded-lg {
+     border-radius: unset !important;
+}
+
+.rounded-3xl {
+    border-radius: unset !important;
 }

css/index-tailwind-output.css

@@ -1353,6 +1353,10 @@ video {
   border-radius: 1.5rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1361,10 +1365,6 @@ video {
   border-radius: 0.75rem;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-sm {
   border-radius: 0.125rem;
 }
@@ -1869,6 +1869,26 @@ svg, img {
   height: 100%;
 }
 
+.svg-catch svg path {
+  fill: var(--catch-detail-color) !important;
+  stroke: var(--catch-detail-color) !important;
+}
+
+.svg-unsubtle svg path {
+  fill: var(--unsubtle-detail-color) !important;
+  stroke: var(--unsubtle-detail-color) !important;
+}
+
+.svg-subtle svg path {
+  fill: var(--subtle-detail-color) !important;
+  stroke: var(--subtle-detail-color) !important;
+}
+
+.svg-foreground svg path {
+  fill: var(--foreground-color) !important;
+  stroke: var(--foreground-color) !important;
+}
+
 .no-images img {
   display: none;
 }
@@ -2267,7 +2287,6 @@ li::marker {
   width: 40em;
   max-height: calc(100vh - 15em);
   overflow-y: auto;
-  border-radius: 1em;
   background-color: var(--background-color);
   color: var(--foreground-color);
 }

index.css

@@ -102,6 +102,26 @@ svg, img {
     height: 100%;
 }
 
+.svg-catch svg path {
+    fill: var(--catch-detail-color) !important;
+    stroke: var(--catch-detail-color) !important;
+}
+
+.svg-unsubtle svg path {
+    fill: var(--unsubtle-detail-color) !important;
+    stroke: var(--unsubtle-detail-color) !important;
+}
+
+.svg-subtle svg path {
+    fill: var(--subtle-detail-color) !important;
+    stroke: var(--subtle-detail-color) !important;
+}
+
+.svg-foreground svg path {
+    fill: var(--foreground-color) !important;
+    stroke: var(--foreground-color) !important;
+}
+
 .no-images img {
     display: none;
 }
@@ -451,7 +471,6 @@ li::marker {
     width: 40em;
     max-height: calc(100vh - 15em);
     overflow-y: auto;
-    border-radius: 1em;
     background-color: var(--background-color);
     color: var(--foreground-color);
 }