Css fixes

This commit is contained in:
Pieter Vander Vennet 2020-09-17 20:59:05 +02:00
parent 77e065d6e7
commit f544ca805a
5 changed files with 51 additions and 35 deletions

View file

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

View file

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

View file

@ -16,37 +16,34 @@ export class LayerSelection extends UIElement {
this._checkboxes = []; this._checkboxes = [];
for (const layer of State.state.filteredLayers.data) { 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 !== "") { 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() const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;margin-left: 0.5em;"); .SetStyle("font-size:large;margin-left: 0.5em;");
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => { 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 return Translations.t.general.zoomInToSeeThisLayer
.SetClass("alert") .SetClass("alert")
.SetStyle("display: block ruby;width:min-content;")
.Render(); .Render();
} }
return "" return ""
})) }))
const style = "display:flex;align-items:center;"
this._checkboxes.push(new CheckBox( 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) layer.isDisplayed)
.SetStyle("margin:0.3em;") .SetStyle("margin:0.3em;")
); );

View file

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

View file

@ -65,7 +65,8 @@ body {
} }
form { form {
display: inline; display: inline-block;
max-width: 90vw;
} }
.invalid { .invalid {
@ -187,9 +188,11 @@ body {
} }
#hidden-on-mobile { #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 { .add-popup-all-buttons {
max-height: 50vh; max-height: 50vh;
display: inline-block; display: inline-block;
@ -197,21 +200,20 @@ body {
width: 100%; 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; width: auto;
max-width: 50vw; max-width: 50vw;
margin: 0; margin: 0;
@ -239,6 +241,9 @@ body {
} }
.hidden-on-mobile {
display: none !important;
}
#topleft-tools { #topleft-tools {
padding: 0.2em !important; padding: 0.2em !important;
@ -364,6 +369,11 @@ body {
display: block; display: block;
} }
.hidden-on-mobile {
display: none !important;
}
#messagesbox-wrapper { #messagesbox-wrapper {
display: none; display: none;
} }
@ -435,6 +445,11 @@ body {
display: unset; display: unset;
} }
.hidden-on-mobile {
display: none !important;
}
#messagesboxmobile { #messagesboxmobile {
position: absolute; position: absolute;
display: block; display: block;