From 3113afb39dd7d48f60793777ab8e9ea07cafc260 Mon Sep 17 00:00:00 2001 From: Bavo Vanderghote Date: Wed, 22 Jul 2020 13:33:26 +0200 Subject: [PATCH] basic styling: design implementation --- UI/LayerSelection.ts | 14 ++++++++++++-- index.css | 28 ++++++++++++++++++++++------ index.html | 11 +---------- index.ts | 11 ++++++++++- 4 files changed, 45 insertions(+), 19 deletions(-) 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.icon`]), - layer.layerDef.name, + new Combine([ + ` + + `, + `layer.layerDef.icon`, + layer.layerDef.name]), + new Combine([ + ` + + `, + `layer.layerDef.icon`, + 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