Fix landscape mode

UI/Base/Ornament.ts

@@ -10,9 +10,11 @@ export default class Ornament extends UIElement {
     constructor(index = undefined) {
         super();
         index = index ?? State.state.osmConnection.GetPreference("ornament");
+
+        this.SetClass("pt-3 pb-3 flex justify-center box-border")
+
         this.ListenTo(index);
         this._index = index;
-        this.SetClass("ornament")
         const self = this;
         this.onClick(() => {
             let c = Number(index.data);

UI/Base/ScrollableFullScreen.ts

@@ -17,8 +17,8 @@ export default class ScrollableFullScreen extends UIElement {
         }
         const returnToTheMap =
             new Combine([
-                Svg.back_svg().SetClass("block sm:hidden"),
+                Svg.back_svg().SetClass("block md:hidden"),
-                Svg.close_svg().SetClass("hidden sm:block")
+                Svg.close_svg().SetClass("hidden md:block")
             ])
                 .onClick(() => {
                     ScrollableFullScreen.RestoreLeaflet();
@@ -31,19 +31,19 @@ export default class ScrollableFullScreen extends UIElement {
 
         title.SetClass("block w-full text-2xl font-bold p-2 pl-4")
         const ornament = new Combine([new Ornament().SetStyle("height:5em;")])
-            .SetClass("block sm:hidden h-5")
+            .SetClass("md:hidden h-5")
 
 
         this._component =
             new Combine([
                 new Combine([
                     new Combine([returnToTheMap, title])
-                        .SetClass("border-b-2 border-black shadow sm:shadow-none bg-white p-2 pb-0 sm: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 overflow-x-hidden flex-shrink-0 max-h-20vh"),
-                    new Combine(["<span>", content, "</span>", ornament])
+                    new Combine([content, ornament])
-                        .SetClass("block p-2 sm:pt-4 w-full h-screen landscape:h-screen  sm:h-full sm:w-full overflow-y-auto overflow-x-hidden"),
+                        .SetClass("p-2 md:pt-4 w-full h-full overflow-y-auto overflow-x-hidden 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("block flex flex-col  relative bg-white")
+                ]).SetClass("flex flex-col h-full relative bg-white")
-            ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen sm:max-h-65vh sm:w-auto sm:relative");
+            ]).SetClass("fixed top-0 left-0 right-0 h-screen w-screen md:max-h-65vh md:w-auto md:relative");
 
         this.dumbMode = false;
     }

UI/BigComponents/SearchAndGo.ts

@@ -69,7 +69,7 @@ export default class SearchAndGo extends UIElement {
                     [bb[1], bb[3]]
                 ]
             State.state.selectedElement. setData(undefined);
-                Hash.hash.setData(poi.osm_type+"_"+poi.osm_id);
+                Hash.hash.setData(poi.osm_type+"/"+poi.osm_id);
                 State.state.leafletMap.data.fitBounds(bounds);
                 self._placeholder.setData(Translations.t.general.search.search);
             },

UI/Popup/FeatureInfoBox.ts

@@ -62,7 +62,6 @@ export default class FeatureInfoBox extends UIElement {
             }
             return new EditableTagRendering(tags, tr);
         });
-        renderings[0]?.SetClass("first-rendering");
         if (!questionBoxIsUsed) {
             renderings.push(questionBox);
         }
@@ -72,7 +71,7 @@ export default class FeatureInfoBox extends UIElement {
                 ...renderings,
                 tail.SetClass("featureinfobox-tail")
             ]
-        ).SetClass("block sm:max-h-65vh")
+        ).SetClass("block")
 
     }
 

css/mobile.css

@@ -49,20 +49,6 @@ Contains tweaks for small screens
         width: 100vw;
         height: 100vh;
     }
-
-    #welcomeMessage {
-        display: inline-block;
-        background-color: var(--background-color);
-        border-radius: 0;
-        width: 100%;
-        max-width: 100%;
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        max-height: max-content;
-        box-shadow: unset;
-        overflow-y: unset;
-    }
 }
 
 @media only screen and (max-width: 600px) {

css/tagrendering.css

@@ -1,31 +1,3 @@
-@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*/
-    .landscape\:max-h-screen {
-        max-height: 100vh;
-    }
-
-    .landscape\:w-1\/2 {
-        width: 50%
-    }
-
-    .landscape\:p-2 {
-        padding: 0.5rem;
-    }
-
-    .question {
-        max-width: 48% !important;
-        padding-right: 0.3em;
-        box-sizing: border-box;
-    }
-
-    .first-rendering {
-        position: absolute;
-        left: 50%;
-        width: 94%;
-        padding-right: 0.3em;
-        box-sizing: border-box;
-    }
-}
 
 .question .form-text-field > input {
     width: 100%;

index.css

@@ -42,7 +42,7 @@
   }
 }
 
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 768px) {
     .no-transform {
         /*This is a workaround to let popup contents escape the popup on mobile - see scrollableFullScreen.ts*/
         transform: none !important;
@@ -519,24 +519,3 @@ a {
     max-width: 1em;
 }
 
-
-.ornament {
-    padding-top: 1em;
-    padding-bottom: 1em;
-    display: flex;
-    justify-content: center;
-    box-sizing: border-box;
-}
-
-.ornament svg {
-    height: 2.5em;
-    width: 100%;
-}
-
-.ornament svg path {
-    stroke: var(--subtle-detail-color-light-contrast);
-}
-
-.ornament svg polygon {
-    fill: var(--subtle-detail-color-light-contrast);
-}

index.html

@@ -50,7 +50,6 @@
         <div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
     </div>
     <div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
-    <div id="help-button-mobile"></div>
 </div>
 
 <div id="layer-selection" class="absolute bottom-3 left-3 rounded-3xl overflow-hidden clutter"></div>

tailwind.config.js

@@ -1,24 +1,32 @@
+const plugin = require('tailwindcss/plugin')
+
 module.exports = {
-  purge: [
+    purge: [
-    // './**/*.html',
+        // './**/*.html',
-    // './**/*.js',
+        // './**/*.js',
-  ],
+    ],
-  darkMode: false, // or 'media' or 'class'
+    darkMode: false, // or 'media' or 'class'
-  theme: {
+    theme: {
-    extend: {
+        extend: {
-      maxHeight: {
+            maxHeight: {
-        '65vh': '65vh',
+                '65vh': '65vh',
-        '20vh': '20vh',
+                '20vh': '20vh',
-      },
+            }
-      screens: {
+        },
-        'landscape': { 'raw': '(max-height: 600px) and (min-width: 600px)' },
-      },
     },
-  },
+    variants: {
-  variants: {
+        extend: {
-    extend: {
+            ringColor: ['hover'],
-      ringColor: ['hover'],
+        }
-    }
+    },
-  },
+    plugins: [
-  plugins: [],
+        plugin(function ({addVariant, e}) {
+            addVariant('landscape', ({modifySelectors, separator}) => {
+                modifySelectors(({className}) => {
+                    return `.${e(`landscape${separator}${className}`)}:landscape`
+                })
+            })
+        })
+
+    ]
 }