Optimizing the layout for small screens

UI/Base/ScrollableFullScreen.ts

@@ -27,9 +27,9 @@ export default class ScrollableFullScreen extends UIElement {
                     } else {
                         console.error("WARNING: onClose is not defined")
                     }
-                }).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5")
+                }).SetClass("mb-2 bg-blue-50 rounded-full w-12 h-12 p-1.5 flex-shrink-0")
 
-        title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
+        title.SetClass("block text-l sm:text-xl md:text-2xl w-full font-bold p-2 pl-4 max-h-20vh overflow-y-auto")
         const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
             .SetClass("md:hidden h-5")
 
@@ -38,9 +38,9 @@ export default class ScrollableFullScreen extends UIElement {
             new Combine([
                 new Combine([
                     new Combine([returnToTheMap, title])
-                        .SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex overflow-x-hidden flex-shrink-0 max-h-20vh"),
+                        .SetClass("border-b-2 border-black shadow md:shadow-none bg-white p-2 pb-0 md:p-0 flex flex-shrink-0"),
                     new Combine([content, ornament])
-                        .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto overflow-x-hidden md:max-h-65vh"),
+                        .SetClass("block p-2 md:pt-4 w-full h-full overflow-y-auto md:max-h-65vh"),
                     // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
                 ]).SetClass("flex flex-col h-full relative bg-white")
             ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");

UI/Image/ImageCarousel.ts

@@ -33,6 +33,7 @@ export class ImageCarousel extends UIElement{
 
         this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
         this.SetClass("block w-full");
+        this.slideshow.SetClass("w-full");
     }
 
     /***

UI/Image/ImageUploadFlow.ts

@@ -35,7 +35,9 @@ export class ImageUploadFlow extends UIElement {
                 {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
                 {value: "CC-BY 4.0", shown: Translations.t.image.ccb}
             ],
-            State.state.osmConnection.GetPreference("pictures-license")
+            State.state.osmConnection.GetPreference("pictures-license"),
+            "","",
+            "flex flex-col sm:flex-row"
         );
         licensePicker.SetStyle("float:left");
 

UI/Input/DropDown.ts

@@ -13,13 +13,16 @@ export class DropDown<T> extends InputElement<T> {
     public IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private readonly _label_class: string;
     private readonly _select_class: string;
+    private _form_style: string;
 
     constructor(label: string | UIElement,
                 values: { value: T, shown: string | UIElement }[],
                 value: UIEventSource<T> = undefined,
                 label_class: string = "",
-                select_class: string = "") {
+                select_class: string = "",
+                form_style: string = "flex") {
         super(undefined);
+        this._form_style = form_style;
         this._value = value ?? new UIEventSource<T>(undefined);
         this._label = Translations.W(label);
         this._label_class = label_class || '';
@@ -62,7 +65,7 @@ export class DropDown<T> extends InputElement<T> {
             options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
         }
 
-        return `<form class="flex">` +
+        return `<form class="${this._form_style}">` +
             `<label class='${this._label_class}' for='dropdown-${this.id}'>${this._label.Render()}</label>` +
             `<select class='${this._select_class}' name='dropdown-${this.id}' id='dropdown-${this.id}'>` +
             options +

UI/Popup/EditableTagRendering.ts

@@ -29,7 +29,7 @@ export default class EditableTagRendering extends UIElement {
         this.ListenTo(State.state?.osmConnection?.userDetails)
 
         this._answer = new TagRenderingAnswer(tags, configuration);
-        this._answer.SetStyle("width:100%;")
+        this._answer.SetClass("w-full")
         this._question = this.GenerateQuestion();
         this.dumbMode = false;
 

UI/Popup/FeatureInfoBox.ts

@@ -46,14 +46,16 @@ export default class FeatureInfoBox extends UIElement {
     private static GenerateTitleBar(tags: UIEventSource<any>,
                                     layerConfig: LayerConfig): UIElement {
         const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
-            .SetClass("text-2xl break-words font-bold p-2");
+            .SetClass("break-words font-bold sm:p-0.5 md:p-1 sm:p-1.5 md:p-2");
         const titleIcons = new Combine(
-            layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)
+            layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon, 
-                .SetClass("block w-8 h-8 align-baseline box-content p-0.5")))
+                "block w-8 h-8 align-baseline box-content sm:p-0.5", "width: 2rem !important;")
-            .SetClass("flex flex-row flex-wrap pt-1 items-center mr-2");
+                .HideOnEmpty(true)
+            ))
+            .SetClass("flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2")
 
         return new Combine([
-            new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
+            new Combine([title, titleIcons]).SetClass("flex flex-col sm:flex-row flex-grow justify-between")
         ])
     }
 

UI/Popup/TagRenderingAnswer.ts

@@ -13,15 +13,20 @@ export default class TagRenderingAnswer extends UIElement {
     private readonly _tags: UIEventSource<any>;
     private _configuration: TagRenderingConfig;
     private _content: UIElement;
+    private readonly _contentClass: string;
+    private _contentStyle: string;
 
-    constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig) {
+    constructor(tags: UIEventSource<any>, configuration: TagRenderingConfig, contentClasses: string = "", contentStyle: string = "") {
         super(tags);
         this._tags = tags;
         this._configuration = configuration;
+        this._contentClass = contentClasses;
+        this._contentStyle = contentStyle;
         if (configuration === undefined) {
             throw "Trying to generate a tagRenderingAnswer without configuration..."
         }
         this.SetClass("flex items-center flex-row text-lg")
+        this.SetStyle("word-wrap: anywhere;");
     }
 
     InnerRender(): string {
@@ -58,16 +63,15 @@ export default class TagRenderingAnswer extends UIElement {
                     ])
 
                 }
-                return this._content.Render();
+                return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
             }
         }
         
         const tr = this._configuration.GetRenderValue(tags);
         if (tr !== undefined) {
             this._content = SubstitutedTranslation.construct(tr, this._tags);
-            return this._content.Render();
+            return this._content.SetClass(this._contentClass).SetStyle(this._contentStyle).Render();
         }
-
        
         return "";
 

UI/SpecialVisualizations.ts

@@ -163,7 +163,7 @@ export default class SpecialVisualizations {
                         if (url === "") {
                             url = window.location.href
                         }
-                        return new ShareButton(Svg.share_svg(), {
+                        return new ShareButton(Svg.share_ui(), {
                             title: name,
                             url: url,
                             text: state.layoutToUse.data.shortDescription.txt

UI/SubstitutedTranslation.ts

@@ -30,7 +30,6 @@ export class SubstitutedTranslation extends UIElement {
             self.Update();
         });
         this.SetClass("w-full")
-
     }
 
     public static construct(

UI/UIElement.ts

@@ -79,7 +79,7 @@ export abstract class UIElement extends UIEventSource<string> {
             if (element.innerHTML === "") {
                 element.parentElement.style.display = "none";
             } else {
-                element.parentElement.style.display = "block";
+                element.parentElement.style.display = "";
             }
         }
 
@@ -129,7 +129,7 @@ export abstract class UIElement extends UIEventSource<string> {
         if (this.clss.size > 0) {
             clss = `class='${Array.from(this.clss).join(" ")}' `;
         }
-        return `<span ${clss}${style}id='${this.id}'>${this.lastInnerRender}</span>`
+        return `<span ${clss}${style}id='${this.id}' gen="${this.constructor.name}">${this.lastInnerRender}</span>`
     }
 
     AttachTo(divId: string) {

css/userbadge.css

@@ -8,6 +8,8 @@
     min-width: 20em;
     pointer-events: all;
     border-radius: 999em;
+    max-width: 100vw;
+    overflow-x: hidden;
 }
 
 #userbadge a {
@@ -104,4 +106,6 @@
 #userbadge-and-search {
     display: inline-block;
     width: min-content;
+    overflow-x: hidden;
+    max-width: 100vw;
 }

index.css

@@ -119,7 +119,7 @@ svg, img {
 
 
 a {
-    color: var(--foreground-color)
+    color: var(--foreground-color);
 }
 
 .slick-prev:before, .slick-next:before {