midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Css tweaking

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-23 16:28:19 +02:00
parent 2e7b14061f
commit ef593654f4
6 changed files with 33 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Customizations/Layers/Park.ts
View file

@ -48,7 +48,7 @@ export class Park extends LayerDefinition {
constructor() {
super();
this.name = "park";
this.icon = "./assets/tree_white_background.svg";
this.icon = "";
this.overpassFilter =
new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
this.newElementTags = [new Tag("leisure", "park"),

1
UI/Base/Combine.ts
View file

@ -3,6 +3,7 @@ import Translations from "../i18n/Translations";
export default class Combine extends UIElement {
private uiElements: (string | UIElement)[];
private clas: string = undefined;
constructor(uiElements: (string | UIElement)[]) {
super(undefined);

26
UI/LayerSelection.ts
View file

@ -12,20 +12,24 @@ export class LayerSelection extends UIElement{
this._checkboxes = [];
for (const layer of layers) {
this._checkboxes.push(new CheckBox(
new Combine([
`<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
const checkbox = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7.28571L10.8261 15L23 3" stroke="#003B8B" stroke-width="4" stroke-linejoin="round"/>
</svg>`,
`<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
layer.layerDef.name]),
new Combine([
`<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
</svg>`;
let icon = "<img >";
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
icon = `<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`
}
const name = layer.layerDef.name;
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([
`<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 7.28571L10.8261 15L23 3" stroke="#ffffff" stroke-width="4" stroke-linejoin="round"/>
</svg>`,
`<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
layer.layerDef.name]),
layer.isDisplayed));
icon,
layer.layerDef.name]),
layer.isDisplayed));
}
}

4
UI/UserBadge.ts
View file

@ -75,9 +75,7 @@ export class UserBadge extends UIElement {
if (user.unreadMessages > 0) {
messageSpan = "<span id='messages' class='alert'>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
" " +
"" +
"<a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
user.unreadMessages.toString() +
"</a></span>";
}

32
index.css
View file

@ -274,20 +274,21 @@ e
position: relative;
}
.filter__button--shadow {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}
.filter__button svg {
vertical-align: middle;
}
#filter__selection{
z-index: 6000;
}
#filter__selection form {
display: flex;
flex-flow: column;
width: 100%;
background-color: #ffffff;
border-radius: 15px;
border-radius: 15px;
border-bottom-left-radius: 30px;
border: none;
font-size: 16px;
transform: translateY(60px);
@ -311,7 +312,7 @@ e
font-size: 14px;
padding: 5px;
margin: 0 15px;
max-width: 250px;
max-width: 250px;
}
#filter__selection ul {
@ -326,7 +327,6 @@ e
#filter__selection ul li span > span {
display: flex;
align-items: center;
/* padding: 10px 0; */
}
#filter__selection ul svg {
@ -351,24 +351,8 @@ e
border-radius: 15px 15px 0 0;
}
#filter__layers {
pointer-events: all;
list-style: none;
padding-left: 0;
}
.
#filter__layers li span {
display: flex;
align-items: center;
}
.checkbox__label--checked {
margin-left: .7rem;
}
.checkbox__label--unchecked {
margin-left: 2.45rem;
}
@media only screen and (max-width: 600px) {

15
index.ts
View file

@ -224,18 +224,20 @@ for (const key in BaseLayers.baseLayers) {
baseLayerOptions.push({value: {name: key, layer: BaseLayers.baseLayers[key]}, shown: key});
}
const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]);
const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers)]);
let layerControl = backgroundMapPicker;
if (flayers.length > 1) {
new CheckBox(new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers), new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]), closedFilterButton).AttachTo("filter__selection");
} else {
new CheckBox(new Combine([new DropDown(`Background map`, baseLayerOptions, bm.CurrentLayer), openFilterButton]), closedFilterButton).AttachTo("filter__selection");
layerControl = new Combine([layerSelection, backgroundMapPicker);
}
new CheckBox(layerControl, closedFilterButton).AttachTo("filter__selection");
// ------------------ Setup various UI elements ------------
new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
return new SimpleAddUI(bm.Location,
bm.LastClickLocation,
@ -304,9 +306,6 @@ new FullScreenMessageBoxHandler(fullScreenMessage, () => {
selectedElement.setData(undefined)
}).update();
// fullScreenMessage.setData(generateWelcomeMessage());
new CenterMessageBox(
minZoom,
centerMessage,