From cda936deb7b49563e8f70412819a74ba0400ad27 Mon Sep 17 00:00:00 2001 From: lenovo Date: Sat, 12 Nov 2022 16:11:59 +0100 Subject: [PATCH] temp version of filters drop down with toogle --- README.md | 4 + srcs/plugins/map_prof/mp_create_div.php | 64 ++++++++++- srcs/plugins/map_prof/styles/mp_filters.css | 115 +++++++++++++------- 3 files changed, 143 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 29e66d4..af5aef0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # MAP +- zoom : toujours zoomer, pour un seul marqueur pas trop, et enlever les villes +- resoudre probleme mauvais markers de pays +- faire un bouton select (afficher la seletion plutot que le nom du menu) + #### improvement suggestions: - add a field "more infos" to address - localise on map when form is filled diff --git a/srcs/plugins/map_prof/mp_create_div.php b/srcs/plugins/map_prof/mp_create_div.php index af85fec..3c50fc9 100644 --- a/srcs/plugins/map_prof/mp_create_div.php +++ b/srcs/plugins/map_prof/mp_create_div.php @@ -7,8 +7,13 @@ function mp_create_div(&$filters) { '; foreach ($filters as $key => $filter) { + + // // version div stick + // // version div switch + // // version div visibility + // $mp_map_div .= ' - '; + + // // version div title + // + // $mp_map_div .= ' + // + // '; + }; $mp_map_div .= ' @@ -35,4 +59,40 @@ function mp_create_div(&$filters) { return $mp_map_div; } + // // version input checkbox + // + // content += ` + //
+ // + // + //
+ // `; + // for (value of filters[key]) { + // content += ` + //

${value._name}

+ // `; + // } + // content += ` + //
+ //
+ // `; + + // // version select + // + // content += ` + //
+ // + //
+ // `; + ?> diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css index 180f5bd..49d3737 100644 --- a/srcs/plugins/map_prof/styles/mp_filters.css +++ b/srcs/plugins/map_prof/styles/mp_filters.css @@ -26,6 +26,9 @@ display: flex !important; flex-direction: column; width: 100%; + overflow: visible; + cursor: pointer; + border: 1px solid #ba197a; } @@ -148,7 +151,6 @@ */ /* -*/ #ljdp_map_filters .filter_menu .filter_menu_title { width: 100%; cursor: pointer; @@ -188,65 +190,102 @@ #ljdp_map_filters .filter_menu .filter_menu_drop p:hover { background-color: #dddddd; } +*/ /* ************************************** - VERSION DIV SWITCH AND CLOSE + WIP VERSION DIV TITLE */ /* -#ljdp_map_filters .filter_menu .filter_menu_title { - width: 100%; - cursor: pointer; -} - -#ljdp_map_filters .filter_menu .filter_menu_drop { +#ljdp_map_filters .filter_menu_drop { flex-direction: column; - position: absolute; - top: 100%; - left: 0px; - margin: 0px; width: 100%; - height: auto; max-height: 400px; cursor: pointer; - background-color: transparent; - overflow: scroll; - - border: 1px solid red; -} - -#ljdp_map_filters .filter_menu .filter_menu_title:focus { background-color: #ffffff; - height: auto; - top: 100%; overflow: scroll; - padding: 10px; - border: 1px solid #ba197a; + + border: 1px solid blue; } -#ljdp_map_filters .filter_menu .filter_menu_title:focus -+ .filter_menu_drop { -} - -#ljdp_map_filters .filter_menu .filter_menu_drop p:first-child { - margin-top: 100px; -} - -#ljdp_map_filters .filter_menu .filter_menu_drop:focus p:first-child { - margin-top: auto; -} - -#ljdp_map_filters .filter_menu .filter_menu_drop p { +#ljdp_map_filters .filter_menu_drop p { + display: none; + cursor: pointer; padding: 0px 10px; width: 100%; } -#ljdp_map_filters .filter_menu .filter_menu_drop p:hover { +#ljdp_map_filters .filter_menu_drop p:hover { background-color: #dddddd; } + +#ljdp_map_filters p.filter_menu_drop_title { + display: flex; + text-align: center; +} + +#ljdp_map_filters .filter_menu_drop_title:focus ~ p { + display: flex; +} */ + + + + +/* ************************************** + VERSION DIV VISIBILITY +*/ + +/* +*/ +#ljdp_map_filters .filter_menu_title { + width: 100%; + cursor: pointer; + pointer-events: none; +} + +#ljdp_map_filters .filter_menu_drop { + flex-direction: column; + position: absolute; + top: 100%; + left: 0px; + max-height: 400px; + width: 100%; + cursor: pointer; + overflow: scroll; + background-color: #ffffff; + + /* opacity is toogled instantanously, for visual confort, but element is still present and clickable */ + /* then, visibility is toogle, after x seconds, letting plainty of times for the browser to catch the 'onclick' event */ + opacity: 0; + visibility: hidden; + transition: visibility 0.5s; + + border: 1px solid #ba197a; +} + +#ljdp_map_filters .filter_menu:focus .filter_menu_title { + pointer-events: auto; +} + +#ljdp_map_filters .filter_menu:focus .filter_menu_drop { + opacity: 1; + visibility: visible; +} + +#ljdp_map_filters .filter_menu_drop p { + padding: 0px 10px; + margin: 0px; + width: 100%; +} + +#ljdp_map_filters .filter_menu_drop p:hover { + background-color: #dddddd; +} + +