From f544ca805afb5d1b3820cfab092344ae2252ea6c Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 17 Sep 2020 20:59:05 +0200 Subject: [PATCH 1/2] Css fixes --- InitUiElements.ts | 6 ++- UI/FullScreenMessageBoxHandler.ts | 4 +- UI/LayerSelection.ts | 29 ++++++------ .../cycling_themed_objects.json | 2 +- index.css | 45 ++++++++++++------- 5 files changed, 51 insertions(+), 35 deletions(-) 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; From 16394bb08f357764f3ed9fc8dc85df1fbcad9996 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 17 Sep 2020 21:10:35 +0200 Subject: [PATCH 2/2] Add check to new points as not to add points for disabled layers --- UI/SimpleAddUI.ts | 12 ++++++++++++ UI/i18n/Translations.ts | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/UI/SimpleAddUI.ts b/UI/SimpleAddUI.ts index a0f9409cb..90cb2db14 100644 --- a/UI/SimpleAddUI.ts +++ b/UI/SimpleAddUI.ts @@ -46,6 +46,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"; @@ -130,6 +133,15 @@ 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.cancelButton + ]).Render(); + } let tagInfo = ""; const csCount = State.state.osmConnection.userDetails.data.csCount; diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index 0887dd6d0..322e3ef0a 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -379,6 +379,10 @@ export default class Translations { fr: "Ajouter un/une {category} ici", gl: "Engadir {category} aquí", de: "Hier eine {category} hinzufügen" + }), + 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({