Stuff more or less works

UI/Base/LazyElement.ts

@@ -28,9 +28,7 @@ export default class LazyElement<T extends UIElement> extends UIElement {
         if (this._content === undefined) {
             return this._loadingContent;
         }
-        return this._content.InnerRender();
+        return this._content.Render();
     }
-    
-
 
 }

UI/Base/ScrollableFullScreen.ts

@@ -8,21 +8,13 @@ import Ornament from "./Ornament";
  */
 export default class ScrollableFullScreen extends UIElement {
     private static _isInited = false;
-    private title: UIElement;
-    private content: UIElement;
     private _component: UIElement;
 
     constructor(title: UIElement, content: UIElement, onClose: (() => void)) {
         super();
-        this.content = content;
-        this.title = title;
         if (!ScrollableFullScreen._isInited) {
             ScrollableFullScreen._isInited = ScrollableFullScreen.PreparePatchesForFullscreen();
         }
-        if (onClose === undefined) {
-            console.error("ScrollableFullScreen initialized without onClose!")
-        }
-        this.dumbMode = false;
         const returnToTheMap =
             new Combine([
                 Svg.back_svg().SetClass("block sm:hidden"),
@@ -54,6 +46,7 @@ export default class ScrollableFullScreen extends UIElement {
                 ]).SetClass("block flex flex-col  relative bg-white")
             ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto sm:relative");
 
+        this.dumbMode = false;
     }
 
     private static HideClutter(htmlElement: HTMLElement) {
@@ -113,7 +106,7 @@ export default class ScrollableFullScreen extends UIElement {
 
     }
 
-    private static RestoreLeaflet() {
+    public static RestoreLeaflet() {
         console.log("Restoring")
         const noTransf = document.getElementsByClassName("scrollable-fullscreen-no-transform");
         for (let i = 0; i < noTransf.length; ++i) {
@@ -134,12 +127,6 @@ export default class ScrollableFullScreen extends UIElement {
         return this._component.Render();
     }
     
-    Update() {
-        console.log("Updating  the scrollableFullScreen")
-        super.Update();
-        this._component.Update();
-    }
-
     public PrepFullscreen(htmlElement = undefined) {
         ScrollableFullScreen.PatchLeaflet(htmlElement);
 
@@ -149,9 +136,15 @@ export default class ScrollableFullScreen extends UIElement {
     }
 
     protected InnerUpdate(htmlElement: HTMLElement) {
+        console.log("Inner updating scrollale", this.id)
         this.PrepFullscreen(htmlElement)
         super.InnerUpdate(htmlElement);
     }
+    
+    Update() {
+        console.log("Updating scrollable", this.id)
+        super.Update();
+    }
 
 
 }

UI/BigComponents/UserBadge.ts

@@ -50,9 +50,9 @@ export default class UserBadge extends UIElement {
         this._homeButton = new VariableUiElement(
             this._userDetails.map((userinfo) => {
                 if (userinfo.home) {
-                    return Svg.home_svg().Render();
+                    return Svg.home_ui().Render();
                 }
-                return "";
+                return " ";
             })
         ).onClick(() => {
             const home = State.state.osmConnection.userDetails.data?.home;

UI/Popup/FeatureInfoBox.ts

@@ -9,25 +9,29 @@ import State from "../../State";
 import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
 import ScrollableFullScreen from "../Base/ScrollableFullScreen";
 
-export default class FeatureInfoBox extends ScrollableFullScreen {
+export default class FeatureInfoBox extends UIElement {
+    private _component: ScrollableFullScreen;
 
     constructor(
         tags: UIEventSource<any>,
         layerConfig: LayerConfig,
         onClose: () => void
     ) {
-        super(
+        super();
-            FeatureInfoBox.GenerateTitleBar(tags, layerConfig),
-            FeatureInfoBox.GenerateContent(tags, layerConfig),
-            onClose
-        );
         if (layerConfig === undefined) {
             throw "Undefined layerconfig"
         }
+        const title = FeatureInfoBox.GenerateTitleBar(tags, layerConfig);
+        const contents = FeatureInfoBox.GenerateContent(tags, layerConfig);
+        this._component = new ScrollableFullScreen(title, contents, onClose)
     }
     
-    private static GenerateTitleBar( tags: UIEventSource<any>,
+    InnerRender(): string {
-                                     layerConfig: LayerConfig): UIElement{
+        return this._component.Render();
+    }
+
+    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");
         const titleIcons = new Combine(
@@ -35,14 +39,13 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
                 .SetClass("block w-8 h-8 align-baseline box-content p-0.5")))
             .SetClass("flex flex-row flex-wrap pt-1 items-center mr-2");
 
-      return new Combine([
+        return new Combine([
             new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
         ])
     }
-    
-    private static GenerateContent(tags: UIEventSource<any>,
-                                   layerConfig: LayerConfig): UIElement{
 
+    private static GenerateContent(tags: UIEventSource<any>,
+                                   layerConfig: LayerConfig): UIElement {
 
 
         let questionBox: UIElement = undefined;
@@ -69,8 +72,10 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
                 ...renderings,
                 tail.SetClass("featureinfobox-tail")
             ]
-        )
+        ).SetClass("block sm:max-h-65vh")
 
     }
 
+  
+
 }

UI/ShowDataLayer.ts

@@ -11,6 +11,9 @@ import Hash from "../Logic/Web/Hash";
 import {GeoOperations} from "../Logic/GeoOperations";
 import FeatureInfoBox from "./Popup/FeatureInfoBox";
 import LayoutConfig from "../Customizations/JSON/LayoutConfig";
+import {UIElement} from "./UIElement";
+import Combine from "./Base/Combine";
+import ScrollableFullScreen from "./Base/ScrollableFullScreen";
 
 
 export default class ShowDataLayer {
@@ -126,15 +129,16 @@ export default class ShowDataLayer {
 
 
         const tags = State.state.allElements.getEventSourceFor(feature);
-        const uiElement: LazyElement<FeatureInfoBox> = new LazyElement(() => new FeatureInfoBox(tags, layer, () => {
+        const uiElement: LazyElement<UIElement> = new LazyElement(() =>new Combine([ new FeatureInfoBox(tags, layer, () => {
                 console.log("Closing the popup!")
                 State.state.selectedElement.setData(undefined);
                 popup.remove();
 
-            }),
+            })]),
             "<div style='height: 90vh'>Rendering</div>");
         popup.setContent(uiElement.Render());
         popup.on('remove', () => {
+            ScrollableFullScreen.RestoreLeaflet(); // Just in case...
             if (!popup.isOpen()) {
                 return;
             }
@@ -159,7 +163,7 @@ export default class ShowDataLayer {
                 return;
             }
             leafletLayer.openPopup();
-            uiElement.Activate(e => e.PrepFullscreen());
+            uiElement.Activate();
             State.state.selectedElement.setData(feature);
         }
         this._onSelectedTrigger[feature.properties.id.replace("/", "_")] = this._onSelectedTrigger[id];
@@ -167,7 +171,7 @@ export default class ShowDataLayer {
             // This element is in the URL, so this is a share link
             // We open the relevant popup straight away
             console.log("Opening the popup due to sharelink")
-            uiElement.Activate(e => e.PrepFullscreen());
+            uiElement.Activate(     );
             popup.setContent(uiElement.Render());
 
             const center = GeoOperations.centerpoint(feature).geometry.coordinates;

index.html

@@ -55,7 +55,7 @@
 
 <div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden clutter"></div>
 
-<div id="centermessage" class="absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
+<div id="centermessage" class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
     Loading MapComplete, hang on...
 </div>