Migrate featurebox-title (…) to Tailwind

UI/Base/ScrollableFullScreen.ts

@@ -18,11 +18,11 @@ export default class ScrollableFullScreen extends UIElement {
             State.state.selectedElement.setData(undefined);
         }).SetClass("only-on-mobile")
             .SetClass("featureinfobox-back-to-the-map")
-        title.SetStyle("width: 100%; display: block;")
+        title.SetClass("block w-full")
         const ornament = new Combine([new Ornament().SetStyle("height:5em;")]).SetClass("only-on-mobile")
 
         this._component = new Combine([
-            new Combine([returnToTheMap, title]).SetClass("featureinfobox-titlebar"),
+            new Combine([returnToTheMap, title]).SetClass("border-b-2 border-black shadow sm:shadow-none fixed sm:relative top-0 left-0 right-0 z-50 bg-white p-2 sm:p-0 flex overflow-hidden"),
             new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
             // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
         ])

UI/BigComponents/LayerControlPanel.ts

@@ -29,7 +29,7 @@ export default class LayerControlPanel extends UIElement {
         }
 
 
-        const title =Translations.t.general.layerSelection.title.SetClass("featureinfobox-title")
+        const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
 
         this._panel = new ScrollableFullScreen(title, layerControlPanel);
     }

UI/FullScreenMessageBoxHandler.ts

@@ -25,9 +25,6 @@ export default class FullScreenMessageBox extends UIElement {
 
     protected InnerUpdate(htmlElement: HTMLElement) {
         super.InnerUpdate(htmlElement);
-        // This is a bit out of place, and it is a fix specifically for the featureinfobox-titlebar
-        const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
-        htmlElement.style.setProperty("--variable-title-height", height + "px")
     }
 
 

UI/Popup/FeatureInfoBox.ts

@@ -13,7 +13,7 @@ export default class FeatureInfoBox extends UIElement {
     private _component: UIElement;
 
     public title: UIElement ;
-    
+
     constructor(
         tags: UIEventSource<any>,
         layerConfig: LayerConfig
@@ -25,11 +25,11 @@ export default class FeatureInfoBox extends UIElement {
 
 
         const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI", undefined))
-            .SetClass("featureinfobox-title");
+            .SetClass("text-2xl break-words font-bold p-2");
         this.title = title;
         const titleIcons = new Combine(
             layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
-            .SetClass("featureinfobox-icons");
+            .SetClass("h-8 w-8 pt-2 box-content");
 
         let questionBox: UIElement = undefined;
         if (State.state.featureSwitchUserbadge.data) {
@@ -57,7 +57,7 @@ export default class FeatureInfoBox extends UIElement {
             ]
         )
         const titleBar = new Combine([
-            new Combine([title, titleIcons]).SetClass("featureinfobox-titlebar-title")
+            new Combine([title, titleIcons]).SetClass("flex flex-grow justify-between")
         ])
 
         this._component = new ScrollableFullScreen(titleBar, content)

css/fullscreenmessagebox.css

@@ -26,18 +26,6 @@
     justify-content: space-between
 }
 
-.fullscreenmessage-content .featureinfobox-titlebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10001;
-    background-color: var(--background-color);
-    padding: 0.5em;
-    width: 100%;
-    box-sizing: border-box;
-
-}
-
 .fullscreenmessage-content .featureinfobox-tail {
     /*THe ornament to give the URL bar some room...*/
 }

css/tagrendering.css

@@ -4,11 +4,6 @@
     flex-direction: column;
 }
 
-.featureinfobox-title {
-    font-size: xx-large;
-    word-break: break-word;
-}
-
 .featureinfobox-icons img {
     max-height: 1.5em;
     width: 1.5em;
@@ -23,24 +18,6 @@
     padding-right: 0.1em;
 }
 
-.featureinfobox-titlebar {
-    border-bottom: 2px solid var(--foreground-color);
-    box-shadow: 0 10px 10px -10px var(--shadow-color);
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    overflow-x: hidden;
-}
-
-.featureinfobox-titlebar-title {
-    font-size: large;
-    font-weight: bold;
-    display: flex;
-    justify-content: space-between;
-    flex-grow: 2;
-    word-break: break-all;
-}
-
 .featureinfobox-back-to-the-map {
     padding: 0.5em;
     border-radius: 999em;