diff --git a/InitUiElements.ts b/InitUiElements.ts index 61383e9..b1462d6 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/Logic/LayerUpdater.ts b/Logic/LayerUpdater.ts index 178a96c..6f1c761 100644 --- a/Logic/LayerUpdater.ts +++ b/Logic/LayerUpdater.ts @@ -30,6 +30,9 @@ export class LayerUpdater { const self = this; this.sufficentlyZoomed = State.state.locationControl.map(location => { + if(location?.zoom === undefined){ + return false; + } let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => (layer as LayerDefinition).minzoom ?? 18)); return location.zoom >= minzoom; }, [state.layoutToUse] diff --git a/Logic/Osm/Overpass.ts b/Logic/Osm/Overpass.ts index 2e5e3c3..59d4ad3 100644 --- a/Logic/Osm/Overpass.ts +++ b/Logic/Osm/Overpass.ts @@ -44,6 +44,7 @@ export class Overpass { if(json.elements === [] && json.remarks.indexOf("runtime error") > 0){ console.log("Timeout or other runtime error"); + onFail("Runtime error (timeout)") return; } // @ts-ignore diff --git a/State.ts b/State.ts index d33897d..5be3ca5 100644 --- a/State.ts +++ b/State.ts @@ -80,12 +80,9 @@ export class State { */ public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined); - public readonly zoom = QueryParameters.GetQueryParameter("z", undefined) - .syncWith(LocalStorageSource.Get("zoom")); - public readonly lat = QueryParameters.GetQueryParameter("lat", undefined) - .syncWith(LocalStorageSource.Get("lat")); - public readonly lon = QueryParameters.GetQueryParameter("lon", undefined) - .syncWith(LocalStorageSource.Get("lon")); + public readonly zoom: UIEventSource; + public readonly lat: UIEventSource; + public readonly lon: UIEventSource; public readonly featureSwitchUserbadge: UIEventSource; @@ -123,15 +120,36 @@ export class State { constructor(layoutToUse: Layout) { const self = this; - this.layoutToUse.setData(layoutToUse) + this.layoutToUse.setData(layoutToUse); + + function asFloat(source: UIEventSource): UIEventSource { + return source.map(str => { + let parsed = parseFloat(str); + return isNaN(parsed) ? undefined : parsed; + }, [], fl => { + if (fl === undefined || isNaN(fl)) { + return undefined; + } + return ("" + fl).substr(0, 6); + }) + } + + this.zoom = asFloat(QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom) + .syncWith(LocalStorageSource.Get("zoom"))); + this.lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat) + .syncWith(LocalStorageSource.Get("lat"))); + this.lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon) + .syncWith(LocalStorageSource.Get("lon"))); + + this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({ zoom: Utils.asFloat(this.zoom.data), lat: Utils.asFloat(this.lat.data), lon: Utils.asFloat(this.lon.data), }).addCallback((latlonz) => { - this.zoom.setData(latlonz.zoom?.toString()); - this.lat.setData(latlonz.lat?.toString()?.substr(0, 6)); - this.lon.setData(latlonz.lon?.toString()?.substr(0, 6)); + this.zoom.setData(latlonz.zoom); + this.lat.setData(latlonz.lat); + this.lon.setData(latlonz.lon); }); this.layoutToUse.addCallback(layoutToUse => { diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 2490e40..08e3220 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 8f9779a..d023ed7 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/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index ee6177a..28163c6 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -47,6 +47,9 @@ export class SimpleAddUI extends UIElement { const self = this; for (const layer of State.state.filteredLayers.data) { + + this.ListenTo(layer.isDisplayed); + for (const preset of layer.layerDef.presets) { let icon: string = "./assets/bug.svg"; @@ -136,6 +139,16 @@ export class SimpleAddUI extends UIElement { const userDetails = State.state.osmConnection.userDetails; if (this._confirmPreset.data !== undefined) { + + if(!this._confirmPreset.data.layerToAddTo.isDisplayed.data){ + return new Combine([ + Translations.t.general.add.layerNotEnabled.Subs({layer: this._confirmPreset.data.layerToAddTo.layerDef.name}) + .SetClass("alert"), + this.openLayerControl, + + this.cancelButton + ]).Render(); + } let tagInfo = ""; const csCount = State.state.osmConnection.userDetails.data.csCount; diff --git a/UI/TagRendering.ts b/UI/TagRendering.ts index adf7b12..54511ac 100644 --- a/UI/TagRendering.ts +++ b/UI/TagRendering.ts @@ -159,7 +159,8 @@ export class TagRendering extends UIElement implements TagDependantUIElement { this._saveButton = new SaveButton(this._questionElement.GetValue()) .onClick(save); - this._friendlyLogin = Translations.t.general.loginToStart + this._friendlyLogin = Translations.t.general.loginToStart.Clone() + .SetClass("login-button-friendly") .onClick(() => State.state.osmConnection.AttemptLogin()) this._editButton = new FixedUiElement(""); @@ -463,12 +464,10 @@ export class TagRendering extends UIElement implements TagDependantUIElement { this.ApplyTemplate(this._question).SetClass('question-text'); return "
" + new Combine([ - question.Render(), + question, "
", this._questionElement, - "", ]).Render() + "
"; } diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index b612be5..32a3f1c 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -384,6 +384,11 @@ export default class Translations { "en": "Open the layer control box", "nl": "Open de laag-instellingen" }) + , + layerNotEnabled: new T({ + "en": "The layer {layer} is not enabled. Enable this layer to add a point", + "nl": "De laag {layer} is gedeactiveerd. Activeer deze om een punt toe te voegn" + }) }, pickLanguage: new T({ en: "Choose a language", diff --git a/assets/layers/cycling_themed_object/cycling_themed_objects.json b/assets/layers/cycling_themed_object/cycling_themed_objects.json index 0497b45..7ae1d2c 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/assets/themes/bookcases/Bookcases.json b/assets/themes/bookcases/Bookcases.json index f1475f2..ad4526f 100644 --- a/assets/themes/bookcases/Bookcases.json +++ b/assets/themes/bookcases/Bookcases.json @@ -18,7 +18,7 @@ "socialImage": null, "startLat": 0, "startLon": 0, - "startZoom": 10, + "startZoom": 1, "widenFactor": 0.05, "roamingRenderings": [], "layers": [ diff --git a/index.css b/index.css index e29e1e6..a2e8d35 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;