pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip drop down menu

Browse Source
This commit is contained in:
lenovo
2022-11-10 23:49:00 +01:00
parent 489697a0f2
commit cb0dcdddad
2 changed files with 60 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
srcs/plugins/map_prof/scripts/mp_create_filters.js
View File

@@ -39,12 +39,18 @@ function fill_filters(filters_div) {
let content = "";
let keys = Object.keys(filters);
keys.forEach((key) => {
//content += `
// <div class="filter_menu">
// <input id="filter_menu_title_${key}" class="filter_menu_title" type="checkbox">
// <label for="filter_menu_title_${key}" class="filter_menu_title"><p>${key}</p></label>
// <div class="filter_menu_drop">
//`;
content += `
<div class="filter_menu">
<div class="filter_menu_title">
<div class="filter_menu_title" tabindex=0>
<p>${key}</p>
</div>
<div class="filter_menu_drop">
<div class="filter_menu_drop" tabindex=0>
`;
for (value of filters[key]) {
content += `

69
srcs/plugins/map_prof/styles/mp_filters.css
View File

@@ -4,9 +4,15 @@
*/
#ljdp_map_filters {
#ljdp_map_filters,
#ljdp_map_filters * {
display: flex;
flex-direction: row;
position: relative;
margin: auto;
}
#ljdp_map_filters {
position: relative;
border: 1px solid red;
width: 100%;
@@ -14,45 +20,74 @@
}
#ljdp_map_filters .filter_menu {
display: flex;
flex-direction: column;
position: relative;
margin: auto;
width: 100%;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu:hover .filter_menu_drop {
display: flex;
/*
#ljdp_map_filters .filter_menu input.filter_menu_title {
display: none;
}
#ljdp_map_filters .filter_menu label.filter_menu_title {
width: 100%;
border: 1px solid green;
}
*/
#ljdp_map_filters .filter_menu .filter_menu_title {
display: flex;
position: relative;
margin: auto;
width: auto;
width: 100%;
cursor: pointer;
border: 1px solid green;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
/*
display: none;
*/
flex-direction: column;
position: absolute;
top: 100%;
top: 0%;
left: 0px;
margin: auto;
padding: 10px 0px;
margin: 0px;
width: 100%;
max-height: 400px;
overflow-y: scroll;
background-color: white;
cursor: pointer;
border: 1px solid pink;
/* padding-top must be sufficient to hide the menu */
padding: 100px 0px 0px 0px;
height: 0px;
background-color: transparent;
overflow: hidden;
border: none;
/*
overflow: visible;
*/
}
/*
#ljdp_map_filters .filter_menu input.filter_menu_title:checked
~ .filter_menu_drop {
display: flex;
}
*/
#ljdp_map_filters .filter_menu .filter_menu_drop:focus {
top: 100%;
background-color: #ffffff;
overflow: scroll;
height: auto;
padding: 10px 0px;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
display: flex;
position: relative;
margin: 0px auto 0px 0px;
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}