From 26f8830c1d38f5875c4b337b2f8f5307812f1d5f Mon Sep 17 00:00:00 2001 From: Bavo Vanderghote Date: Wed, 22 Jul 2020 14:57:35 +0200 Subject: [PATCH] complete styling --- UI/LayerSelection.ts | 4 ++-- index.css | 16 +++++++++++++--- index.ts | 15 ++++++++++++--- 3 files changed, 27 insertions(+), 8 deletions(-) diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts index 5c51987..37049f2 100644 --- a/UI/LayerSelection.ts +++ b/UI/LayerSelection.ts @@ -14,13 +14,13 @@ export class LayerSelection extends UIElement{ this._checkboxes.push(new CheckBox( new Combine([ ` - + `, `layer.layerDef.icon`, layer.layerDef.name]), new Combine([ ` - + `, `layer.layerDef.icon`, layer.layerDef.name]), diff --git a/index.css b/index.css index f7aa9ff..1b32331 100644 --- a/index.css +++ b/index.css @@ -274,19 +274,29 @@ form { .filter__button { outline: none; border: none; - padding: 1rem; + width: 60px; + height: 60px; border-radius: 50%; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); background-color: white; + position: relative; +} + +.filter__button--shadow { + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); +} + +.filter__button svg { + vertical-align: middle; } #filter__selection ul { background-color: white; border-radius: 15px; - padding: 15px 25px 15px 18px; + padding: 15px 25px 60px 18px; list-style: none; margin: 0; font-weight: 600; + transform: translateY(60px); } #filter__selection ul li span > span { diff --git a/index.ts b/index.ts index 0b8f091..1baa1f7 100644 --- a/index.ts +++ b/index.ts @@ -34,6 +34,7 @@ import {FixedUiElement} from "./UI/Base/FixedUiElement"; import ParkingType from "./Customizations/Questions/bike/ParkingType"; import { LayerDefinition } from "./Customizations/LayerDefinition"; import { LayerSelection } from "./UI/LayerSelection"; +import Combine from "./UI/Base/Combine"; // --------------------- Read the URL parameters ----------------- @@ -314,8 +315,8 @@ locationControl.ping(); // --------------- Setting up filter ui -------- -const filterButton = ` - `; -new CheckBox(new LayerSelection(flayers), filterButton).AttachTo("filter__selection") + +const openFilterButton = ` +`; + +new CheckBox(new Combine([new LayerSelection(flayers), openFilterButton]), closedFilterButton).AttachTo("filter__selection") \ No newline at end of file