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

dropdown styling

Browse source
This commit is contained in:
Bavo Vanderghote 2020-07-22 16:40:19 +02:00
parent e4f9eca9dd
commit 778ff757fc
2 changed files with 43 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.css
View file

@ -289,9 +289,35 @@ form {
vertical-align: middle; vertical-align: middle;
} }
#filter__selection form {
display: flex;
flex-flow: column;
width: 100%;
background-color: #ffffff;
border-radius: 15px 15px 0 0;
border: none;
font-size: 16px;
transform: translateY(60px);
padding: 15px 0 18px 0;
}
#filter__selection label {
display: none;
}
#filter__selection select {
background-color: #F0EFEF;
border: none;
border-radius: 5px;
font-size: 14px;
padding: 5px;
margin: 0 15px;
max-width: 250px;
}
#filter__selection ul { #filter__selection ul {
background-color: white; background-color: #ffffff;
border-radius: 15px; border-radius: 0 0 15px 15px;
padding: 15px 25px 60px 18px; padding: 15px 25px 60px 18px;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -316,6 +342,16 @@ form {
margin: 0 10px 0 18px; margin: 0 10px 0 18px;
} }
.filter__label {
font-size: 16px;
transform: translateY(60px);
background-color: #ffffff;
padding: 0 15px;
margin: 0;
color: #003B8B;
font-weight: 600;
}
#filter__layers { #filter__layers {
pointer-events: all; pointer-events: all;
list-style: none; list-style: none;

11
index.ts
View file

@ -308,6 +308,8 @@ locationControl.ping();
// --------------- Setting up filter ui -------- // --------------- Setting up filter ui --------
// buttons
const closedFilterButton = ` const closedFilterButton = `
<button id="filter__button" class="filter__button filter__button--shadow"> <button id="filter__button" class="filter__button filter__button--shadow">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -325,18 +327,15 @@ const openFilterButton = `
</svg> </svg>
</button>`; </button>`;
new CheckBox(new Combine([new LayerSelection(flayers), openFilterButton]), closedFilterButton).AttachTo("filter__selection") // basemap dropdown
// --------------- Setting up basemap dropdown --------
let baseLayerOptions = []; let baseLayerOptions = [];
Object.entries(BaseLayers.baseLayers).forEach(([key, value], i) => { Object.entries(BaseLayers.baseLayers).forEach(([key, value], i) => {
console.log(key, value, i);
baseLayerOptions.push({value: {name: key, layer: value}, shown: key}); baseLayerOptions.push({value: {name: key, layer: value}, shown: key});
}); });
console.log(bm.CurrentLayer.data); // popup
new CheckBox(new Combine([new DropDown(`label`, baseLayerOptions, bm.CurrentLayer), `<p class="filter__label">Maplayers</p>`, new LayerSelection(flayers), openFilterButton]), closedFilterButton).AttachTo("filter__selection")
new DropDown(`label`, baseLayerOptions, bm.CurrentLayer).AttachTo("filter__selection");