Css fixes

InitUiElements.ts

@@ -355,11 +355,12 @@ export class InitUiElements {
         let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
             return {value: layer, shown: layer.name}
         });
-        let layerControlPanel = new Combine([new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
+        let layerControlPanel = new Combine(
+            [new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
         layerControlPanel.SetStyle("margin:1em");
         if (State.state.filteredLayers.data.length > 1) {
             const layerSelection = new LayerSelection();
-            layerControlPanel = new Combine([layerSelection, layerControlPanel]);
+            layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]);
         }
         return layerControlPanel;
     }
@@ -375,6 +376,7 @@ export class InitUiElements {
                 new Combine([
                     closeButton,
                     layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
+                    .SetClass("hidden-on-mobile")
                 ,
                 new Combine([Img.closedFilterButton])
                     .SetStyle("display:block;border-radius:50%;background:white;padding:1em;"),

UI/FullScreenMessageBoxHandler.ts

@@ -23,11 +23,13 @@ export class FullScreenMessageBox extends UIElement {
             this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
                 "display:block;"+
                 "padding: 1em;"+
-                "padding-bottom:5em;"+
+                "padding-bottom:6em;"+
                 `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
                 "box-sizing:border-box;"+
                 `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
                 "overflow-y: auto;" +
+                "max-width:100vw;" +
+                "overflow-x:hidden;" +
                 "background:white;"
 
             );

UI/LayerSelection.ts

@@ -16,37 +16,34 @@ export class LayerSelection extends UIElement {
         this._checkboxes = [];
 
         for (const layer of State.state.filteredLayers.data) {
-            const checkbox = Img.checkmark;
+            let iconUrl = "./asets/checkbox.svg";
-            let icon : UIElement;
+            let iconUrlBlank = "";
             if (layer.layerDef.icon && layer.layerDef.icon !== "") {
-                icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
+                iconUrl = layer.layerDef.icon as string;
-            }else{
+                iconUrlBlank = layer.layerDef.icon as string;
-                icon = new FixedUiElement(Img.checkmark);
             }
+            const icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${iconUrl}">`);
 
-            let iconUnselected : UIElement;
+            let iconUnselected: UIElement;
-            if (layer.layerDef.icon && layer.layerDef.icon !== "") {
+                iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em; opacity:0.2;" src="${iconUrl}">`);
-                iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
-            }else{
-                iconUnselected = new FixedUiElement("");
-            }
-            iconUnselected.SetStyle("opacity:0.2");
             
             const name = Translations.WT(layer.layerDef.name).Clone()
                 .SetStyle("font-size:large;margin-left: 0.5em;");
 
 
             const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
-                if(location.zoom < layer.layerDef.minzoom){
+                if (location.zoom < layer.layerDef.minzoom) {
                     return Translations.t.general.zoomInToSeeThisLayer
                         .SetClass("alert")
+                        .SetStyle("display: block ruby;width:min-content;")
                         .Render();
                 }
                 return ""
             }))
+            const style = "display:flex;align-items:center;"
             this._checkboxes.push(new CheckBox(
-                new Combine([icon, name, zoomStatus]),
+                new Combine([icon, name, zoomStatus]).SetStyle(style),
-                new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]),
+                new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
                 layer.isDisplayed)
                 .SetStyle("margin:0.3em;")
             );

assets/layers/cycling_themed_object/cycling_themed_objects.json

@@ -5,7 +5,7 @@
     "nl": "Fietsgerelateerd object",
     "fr": "Objet cycliste"
   },
-  "minzoom": 14,
+  "minzoom": 13,
   "overpassTags": "theme~cycling|bicycle",
   "title": {
     "render": {

index.css

@@ -65,7 +65,8 @@ body {
 }
 
     form {
-        display: inline;
+        display: inline-block;
+        max-width: 90vw;
     }
 
     .invalid {
@@ -187,9 +188,11 @@ body {
     }
 
     #hidden-on-mobile {
-        display: none; /*Only shown on small screens*/
+        display: none; /*Only shown on small screens - this is probably named wrongly*/
     }
     
+    
+
     .add-popup-all-buttons {
         max-height: 50vh;
         display: inline-block;
@@ -197,21 +200,20 @@ body {
         width: 100%;
     }
 
-    @media only screen and (max-height: 600px) and (not (max-width:
+@media only screen and (max-height: 600px) and (not (max-width:700px)) {
 
-    700px
+    /* Landscape and portrait */
+    #topleft-tools {
+        padding: 0.1em 0.1em 0.1em unset;
+    }
 
-    )) {
+    .hidden-on-mobile {
+        display: none !important;
+    }
 
-        /* Landscape and portrait */
+    #userbadge-and-search {
-        #topleft-tools {
+        position: relative;
-            padding: 0.1em 0.1em 0.1em unset;
+        display: inline-block;
-        }
-
-
-        #userbadge-and-search {
-            position: relative;
-            display: inline-block;
             width: auto;
             max-width: 50vw;
             margin: 0;
@@ -239,6 +241,9 @@ body {
         }
 
 
+        .hidden-on-mobile {
+            display: none !important;
+        }
 
         #topleft-tools {
             padding: 0.2em !important;
@@ -364,6 +369,11 @@ body {
         display: block;
     }
 
+
+    .hidden-on-mobile {
+        display: none !important;
+    }
+  
     #messagesbox-wrapper {
         display: none;
     }
@@ -435,6 +445,11 @@ body {
             display: unset;
         }
 
+
+        .hidden-on-mobile {
+            display: none !important;
+        }
+
         #messagesboxmobile {
             position: absolute;
             display: block;