diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts
index 25b9684c8..5c51987ee 100644
--- a/UI/LayerSelection.ts
+++ b/UI/LayerSelection.ts
@@ -12,8 +12,18 @@ export class LayerSelection extends UIElement{
this._checkboxes = [];
for (const layer of layers) {
this._checkboxes.push(new CheckBox(
- new Combine([layer.layerDef.name, `
`]),
- layer.layerDef.name,
+ new Combine([
+ ``,
+ ``,
+ layer.layerDef.name]),
+ new Combine([
+ ``,
+ ``,
+ layer.layerDef.name]),
layer.isDisplayed));
}
}
diff --git a/index.css b/index.css
index e091fbcba..f7aa9ffc4 100644
--- a/index.css
+++ b/index.css
@@ -264,15 +264,11 @@ form {
/* filter ui */
.filter__popup {
- display: none;
position: absolute;
bottom: 0;
z-index: 500;
padding-left: 10px;
padding-bottom: 10px;
- display: flex;
- flex-flow: column-reverse;
- align-items: start;
}
.filter__button {
@@ -284,10 +280,30 @@ form {
background-color: white;
}
-.filter__content {
+#filter__selection ul {
background-color: white;
border-radius: 15px;
- padding: 0 15px;
+ padding: 15px 25px 15px 18px;
+ list-style: none;
+ margin: 0;
+ font-weight: 600;
+}
+
+#filter__selection ul li span > span {
+ display: flex;
+ align-items: center;
+ /* padding: 10px 0; */
+}
+
+#filter__selection ul svg {
+ padding: 10px 14px 10px 0;
+ border-right: 1px solid #003B8B;
+}
+
+#filter__selection ul img {
+ width: 20px;
+ height: auto;
+ margin: 0 10px 0 18px;
}
#filter__layers {
diff --git a/index.html b/index.html
index 8644f8c30..5be300171 100644
--- a/index.html
+++ b/index.html
@@ -45,16 +45,7 @@
diff --git a/index.ts b/index.ts
index ed8f1d2e0..0b8f09102 100644
--- a/index.ts
+++ b/index.ts
@@ -314,6 +314,15 @@ locationControl.ping();
// --------------- Setting up filter ui --------
-new CheckBox(new LayerSelection(flayers), `Click here`).AttachTo("filter__selection")
+const filterButton = `
+
+`;
+new CheckBox(new LayerSelection(flayers), filterButton).AttachTo("filter__selection")
\ No newline at end of file