From f544ca805afb5d1b3820cfab092344ae2252ea6c Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 17 Sep 2020 20:59:05 +0200 Subject: [PATCH] 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 d3e2ec6..b288aa0 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 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/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/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;