Migrate featureinfobox to Tailwind

- migrate featureinfobox to Tailwind
- migrate featureinfobox-content to Tailwind
- migrate fullscreenmessage-content to Tailwind so we can delete css/fullscreenmessagebox.css

The landscape-mode is somethign that Tailwind does not support AFAIK. Instead, I migrated the one css-definition that was left over but required to a tailwind-like class name `.landscape\:max-h-screen`. Note the escaped colon with is required so css supports colon based class names.

UI/Base/ScrollableFullScreen.ts

@@ -16,17 +16,17 @@ export default class ScrollableFullScreen extends UIElement {
         const returnToTheMap = Svg.back_svg().onClick(() => {
             State.state.fullScreenMessage.setData(undefined);
             State.state.selectedElement.setData(undefined);
-        }).SetClass("only-on-mobile")
+        }).SetClass("featureinfobox-back-to-the-map only-on-mobile mb-2")
-            .SetClass("featureinfobox-back-to-the-map")
         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("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([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 pb-0 sm:p-0 flex overflow-hidden"),
-            new Combine(["<span>",content,"</span>", ornament]).SetClass("featureinfobox-content"),
+            new Combine(["<span>", content, "</span>", ornament])
+                .SetClass("block relative pt-16 sm:pt-4 w-full max-h-screen sm:max-h-65vh landscape:max-h-screen overflow-y-auto overflow-x-hidden"),
             // We add an ornament which takes around 5em. This is in order to make sure the Web UI doesn't hide
         ])
-        this.SetClass("featureinfobox");
+        this.SetClass("block flex flex-col");
 
     }
 

UI/BigComponents/FullWelcomePaneWithTabs.ts

@@ -74,7 +74,7 @@ export default class FullWelcomePaneWithTabs extends UIElement {
         const backButton = new Combine([
             new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
                 .SetClass("to-the-map-inner")
-                
+
         ]).SetClass("only-on-mobile")
             .onClick(() => State.state.fullScreenMessage.setData(undefined));
 

UI/FullScreenMessageBoxHandler.ts

@@ -20,7 +20,7 @@ export default class FullScreenMessageBox extends UIElement {
             return "";
         }
         this._content = State.state.fullScreenMessage.data.content;
-        return new Combine([this._content]).SetClass("fullscreenmessage-content").Render();
+        return new Combine([this._content]).SetClass("block max-h-screen h-screen overflow-x-hidden overflow-y-auto bg-white p-2").Render();
     }
 
     protected InnerUpdate(htmlElement: HTMLElement) {

css/fullscreenmessagebox.css

@@ -1,32 +0,0 @@
-.fullscreenmessage-content {
-    max-height: calc(100vh);
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: var(--background-color);
-    display: block;
-}
-
-.fullscreenmessage-content .featureinfobox {
-    padding-top: 1em;
-    position: relative;
-}
-
-.fullscreenmessage-content .featureinfobox-content {
-    padding: 1em;
-    top: var(--variable-title-height);
-    max-height: calc(100vh - var(--variable-title-height)) !important;
-    min-height: calc(100vh - var(--variable-title-height)) !important;
-    position: absolute;
-    overflow-y: auto;
-    box-sizing: border-box;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between
-}
-
-.fullscreenmessage-content .featureinfobox-tail {
-    /*THe ornament to give the URL bar some room...*/
-}
-

css/tagrendering.css

@@ -1,9 +1,4 @@
 
-.featureinfobox {
-    display: flex;
-    flex-direction: column;
-}
-
 .featureinfobox-back-to-the-map {
     padding: 0.5em;
     border-radius: 999em;
@@ -25,31 +20,10 @@
     stroke: var(--subtle-detail-color-contrast) !important;
 }
 
-.featureinfobox-content {
-    display: block;
-    max-height: 75vh;
-    overflow-y: auto;
-    padding-top: 1em;
-    width:100%;
-    overflow-x: hidden;
-}
-
-@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
-    .featureinfobox-content {
-        display: block;
-        max-height: unset !important;
-        overflow-y: auto;
-    }
-}
-
 @media only screen and (max-height: 600px) and (min-width: 600px) {
     /* landscape mode: the first tagrendering of the infobox gets a special treatment and is placed on the right*/
-    .featureinfobox-content {
+    .landscape\:max-h-screen {
-        position: relative;
+        max-height: 100vh;
-        width: 100% !important;
-        max-width: unset !important;
-        max-height: unset !important;
-        height: 100vh;
     }
 
     .answer {

index.html

@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="./css/openinghourstable.css"/>
     <link rel="stylesheet" href="./css/tagrendering.css"/>
     <link rel="stylesheet" href="./css/imageUploadFlow.css"/>
-    <link rel="stylesheet" href="./css/fullscreenmessagebox.css"/>
+
     <link href="css/ReviewElement.css" rel="stylesheet"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.css"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>