Small layout tweaks

Customizations/TagRendering.ts

@@ -144,14 +144,15 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
             self._questionElement.GetValue().map(
                 (tags: TagsFilter) => {
                     if (tags === undefined) {
-                        return "";
+                        return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
                     }
                     const csCount = State.state.osmConnection.userDetails.data.csCount;
                     if (csCount < State.userJourney.tagsVisibleAt) {
                         return "";
                     }
                     if (csCount < State.userJourney.tagsVisibleAndWikiLinked) {
-                        return new FixedUiElement(tags.asHumanString(false)).SetClass("subtle").Render();
+                        const tagsStr = tags.asHumanString(false);
+                        return new FixedUiElement(tagsStr).SetClass("subtle").Render();
                     }
                     return tags.asHumanString(true);
                 }
@@ -407,16 +408,18 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
         if (this.IsQuestioning() || this._editMode.data) {
             // Not yet known or questioning, we have to ask a question
 
-            const question =
-                this.ApplyTemplate(this._question).Render();
-
             return "<div class='question'>" +
-                "<span class='question-text'>" + question + "</span>" +
+                new Combine([
-                (question !== "" ? "" : "<br/>") +
+                    "<span class='question-text'>",
-                "<div>" + this._questionElement.Render() + "</div>" +
+                    this.ApplyTemplate(this._question), 
-                this._skipButton.Render() +
+                    "</span>",
-                this._saveButton.Render() +
+                    "<br/>",
-                this._appliedTags.Render() +
+                    "<div>", this._questionElement , "</div>",
+                    this._skipButton,
+                    this._saveButton,
+                    "<br/>",
+                    this._appliedTags
+                ]).Render() +
                 "</div>"
         }
 

Logic/TagsFilter.ts

@@ -1,3 +1,4 @@
+import {Utils} from "../Utils";
 
 export abstract class TagsFilter {
     abstract matches(tags: { k: string, v: string }[]): boolean
@@ -151,15 +152,23 @@ export class Tag extends TagsFilter {
     }
 
     asHumanString(linkToWiki: boolean) {
+        let v = ""
+        if (typeof (this.value) === "string") {
+           v = this.value;
+        }else{
+            // value is a regex
+            v = this.value.source;
+        }
+        v = Utils.EllipsesAfter(v, 25);
         if (linkToWiki) {
             return `<a href='https://wiki.openstreetmap.org/wiki/Key:${this.key}' target='_blank'>${this.key}</a>` +
                 `=` +
-                `<a href='https://wiki.openstreetmap.org/wiki/Tag:${this.key}%3D${this.value}' target='_blank'>${this.value}</a>`
+                `<a href='https://wiki.openstreetmap.org/wiki/Tag:${this.key}%3D${this.value}' target='_blank'>${v}</a>`
         }
 
         console.log("Humanizing", this)
         if (typeof (this.value) === "string") {
-            return this.key + (this.invertValue ? "!=": "=") + this.value;
+            return this.key + (this.invertValue ? "!=": "=") + v;
         }else{
             // value is a regex
             return this.key + "~=" + this.value.source;

UI/i18n/Translations.ts

@@ -901,6 +901,8 @@ export default class Translations {
                 nl: " of <a href='https://www.openstreetmap.org/user/new' target='_blank'>maak een nieuwe account aan</a> ",
                 fr: " ou <a href='https://www.openstreetmap.org/user/new' target='_blank'>registrez vous</a>"
             }),
+            noTagsSelected: new T({en: "No tags selected"})
+
         },
         favourite: {
             title: new T({en: "Personal theme"}),

Utils.ts

@@ -66,4 +66,11 @@ export class Utils {
         ), Locale.language);
     }
     
+    public static EllipsesAfter(str : string, l : number = 100){
+        if(str.length <= l){
+            return str;
+        }
+        return str.substr(0, l - 3)+"...";
+    }
+
 }

index.ts

@@ -76,7 +76,6 @@ if (layoutFromBase64 !== "false") {
         // layoutFromBase64 contains the name of the theme. This is partly to do tracking with goat counter
 
         const dedicatedHashFromLocalStorage = LocalStorageSource.Get("user-layout-" + layoutFromBase64.replace(" ", "_"));
-
         if(dedicatedHashFromLocalStorage.data?.length < 10){
             dedicatedHashFromLocalStorage.setData(undefined);
         }