diff --git a/InitUiElements.ts b/InitUiElements.ts
index d3e2ec629..b288aa07c 100644
--- a/InitUiElements.ts
+++ b/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, "
",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;"),
diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts
index 2490e400d..08e3220bb 100644
--- a/UI/FullScreenMessageBoxHandler.ts
+++ b/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;"
);
diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts
index 8f9779a8d..d023ed77b 100644
--- a/UI/LayerSelection.ts
+++ b/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 icon : UIElement;
+ let iconUrl = "./asets/checkbox.svg";
+ let iconUrlBlank = "";
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
- icon = new FixedUiElement(``);
- }else{
- icon = new FixedUiElement(Img.checkmark);
+ iconUrl = layer.layerDef.icon as string;
+ iconUrlBlank = layer.layerDef.icon as string;
}
+ const icon = new FixedUiElement(``);
- let iconUnselected : UIElement;
- if (layer.layerDef.icon && layer.layerDef.icon !== "") {
- iconUnselected = new FixedUiElement(``);
- }else{
- iconUnselected = new FixedUiElement("");
- }
- iconUnselected.SetStyle("opacity:0.2");
+ let iconUnselected: UIElement;
+ iconUnselected = new FixedUiElement(``);
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([iconUnselected, "",name,"", zoomStatus]),
+ new Combine([icon, name, zoomStatus]).SetStyle(style),
+ new Combine([iconUnselected, "", name, "", zoomStatus]).SetStyle(style),
layer.isDisplayed)
.SetStyle("margin:0.3em;")
);
diff --git a/assets/layers/cycling_themed_object/cycling_themed_objects.json b/assets/layers/cycling_themed_object/cycling_themed_objects.json
index 0497b4507..7ae1d2ce4 100644
--- a/assets/layers/cycling_themed_object/cycling_themed_objects.json
+++ b/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": {
diff --git a/index.css b/index.css
index e29e1e635..a2e8d35a7 100644
--- a/index.css
+++ b/index.css
@@ -65,7 +65,8 @@ body {
}
form {
- display: inline;
+ display: inline-block;
+ max-width: 90vw;
}
.invalid {
@@ -187,8 +188,10 @@ 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;
@@ -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 */
- #topleft-tools {
- padding: 0.1em 0.1em 0.1em unset;
- }
-
-
- #userbadge-and-search {
- position: relative;
- display: inline-block;
+ #userbadge-and-search {
+ position: relative;
+ display: inline-block;
width: auto;
max-width: 50vw;
margin: 0;
@@ -237,9 +239,12 @@ body {
width: auto;
max-width: 100vw;
}
-
+ .hidden-on-mobile {
+ display: none !important;
+ }
+
#topleft-tools {
padding: 0.2em !important;
padding-top: 0.3em !important;
@@ -363,6 +368,11 @@ body {
#hidden-on-mobile {
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;