forked from MapComplete/MapComplete
Css fixes
This commit is contained in:
parent
77e065d6e7
commit
f544ca805a
5 changed files with 51 additions and 35 deletions
|
@ -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;"
|
||||
|
||||
);
|
||||
|
|
|
@ -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(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
|
||||
}else{
|
||||
icon = new FixedUiElement(Img.checkmark);
|
||||
iconUrl = layer.layerDef.icon as string;
|
||||
iconUrlBlank = layer.layerDef.icon as string;
|
||||
}
|
||||
const icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${iconUrl}">`);
|
||||
|
||||
let iconUnselected : UIElement;
|
||||
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
|
||||
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
|
||||
}else{
|
||||
iconUnselected = new FixedUiElement("");
|
||||
}
|
||||
iconUnselected.SetStyle("opacity:0.2");
|
||||
let iconUnselected: UIElement;
|
||||
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em; opacity:0.2;" src="${iconUrl}">`);
|
||||
|
||||
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, "<del>",name,"</del>", zoomStatus]),
|
||||
new Combine([icon, name, zoomStatus]).SetStyle(style),
|
||||
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
|
||||
layer.isDisplayed)
|
||||
.SetStyle("margin:0.3em;")
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue