diff --git a/srcs/plugins/map_prof/scripts/mp_create_filters.js b/srcs/plugins/map_prof/scripts/mp_create_filters.js index fc01daf..bbc355e 100644 --- a/srcs/plugins/map_prof/scripts/mp_create_filters.js +++ b/srcs/plugins/map_prof/scripts/mp_create_filters.js @@ -37,13 +37,25 @@ function fill_filters(filters_div) { */ let content = ""; - for (key in filters) { - if (! filters.hasOwnProperty(key)) - continue; - content += '
'; - } + let keys = Object.keys(filters); + keys.forEach((key) => { + content += ` + + `; + }); filters_div.innerHTML = content; } diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css index 09405c2..6b4b233 100644 --- a/srcs/plugins/map_prof/styles/mp_filters.css +++ b/srcs/plugins/map_prof/styles/mp_filters.css @@ -6,15 +6,53 @@ #ljdp_map_filters { display: flex; + flex-direction: row; + position: relative; border: 1px solid red; width: 100%; -} + z-index: 1; +} -#ljdp_map_filters > .filter_menu { +#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 .filter_menu_title { + display: flex; + position: relative; margin: auto; width: auto; - border: 1px solid blue; -} + border: 1px solid green; +} +#ljdp_map_filters .filter_menu .filter_menu_drop { + display: none; + flex-direction: column; + position: absolute; + top: 100%; + left: 0px; + margin: auto; + padding: 10px 0px; + width: 100%; + max-height: 400px; + overflow-y: scroll; + background-color: white; + border: 1px solid pink; +} + +#ljdp_map_filters .filter_menu .filter_menu_drop p { + display: flex; + position: relative; + margin: 0px auto 0px 0px; + padding: 0px 10px; +}