Css tweaking

Customizations/Layers/Park.ts

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

UI/Base/Combine.ts

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

UI/LayerSelection.ts

@@ -12,18 +12,22 @@ 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]),
+            </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="">`,
+                  icon,
                   layer.layerDef.name]),
               layer.isDisplayed));
       }

UI/UserBadge.ts

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

index.css

@@ -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-bottom-left-radius: 30px;
     border: none;
     font-size: 16px;
     transform: translateY(60px);
@@ -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) {

index.ts

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