contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Css fixes

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
InitUiElements.ts
View file

@ -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, "<br/>",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;"),

4
UI/FullScreenMessageBoxHandler.ts
View file

@ -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;"
);

29
UI/LayerSelection.ts
View file

@ -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;")
);

2
assets/layers/cycling_themed_object/cycling_themed_objects.json
View file

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

45
index.css
View file

@ -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;