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

filters are stylish

Browse Source
This commit is contained in:
lenovo
2022-11-14 04:46:41 +01:00
parent 8a4870a2b3
commit 363e8a010c
3 changed files with 81 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -5,7 +5,7 @@
- [/] create links
- [/] make links having map
- [/] transform filter list in inputs
- [ ] zoom in
- [/] zoom in
- [ ] style input filters
- [ ] enlever le bandeau de scroll des menus
- [ ] effacer -> bouton carre, fond violet, ecriture blanche, en capitale, arrondis de 3px sur les coins

24
srcs/plugins/map_prof/mp_create_div.php
View File

@@ -2,11 +2,6 @@
function mp_filter_drop_down($key, &$filter) {
// // version div stick
// // version div switch
// // version div visibility
// form="ljdp_form"
$content = '
<select
form="ljdp_form"
@@ -16,7 +11,7 @@ function mp_filter_drop_down($key, &$filter) {
selected
onclick="filter_show_only_selection(this, '.json_encode(array()).', '."'".$key."'".')"
>
<p>'.$key.'</p>
'.$key.'
</option>
';
foreach ($filter as $value) {
@@ -24,7 +19,7 @@ function mp_filter_drop_down($key, &$filter) {
<option
onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".')"
>
<p>'.$value->_name.'</p>
'.$value->_name.'
</option>
';
}
@@ -37,8 +32,6 @@ function mp_filter_drop_down($key, &$filter) {
function mp_filter_buttons($key, &$filter) {
// <p onclick="filter_show_all()">TOUT DESELECTIONNER</p>
$content = '';
foreach ($filter as $value) {
$content .= '
@@ -48,14 +41,13 @@ function mp_filter_buttons($key, &$filter) {
id="checkbox_'.$value->_name.'"
class="filter_menu_checkbox"
onclick="filter_show_only_selection(this, '.json_encode($value->indexes).', '."'".$key."'".', true)"
style="display:none;"
>
<label
for="checkbox_'.$value->_name.'"
class="filter_menu_checkbox filter_menu"
class="filter_menu filter_menu_checkbox"
>
<div class="filter_menu_title filter_menu_checkbox_title" tabindex=0>
<p>'.$value->_name.'</p>
</div>
<p>'.$value->_name.'</p>
</label>
';
}
@@ -89,11 +81,9 @@ function mp_create_div(&$filters) {
>
<label
for="filter_menu_reset"
class="filter_menu_button filter_menu"
class="filter_menu filter_menu_reset"
>
<div class="filter_menu_title filter_menu_button_title">
<p>Éffacer</p>
</div>
<p>Éffacer</p>
</label>
';

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

@@ -4,7 +4,20 @@
*/
/*
#ba197a;
*/
/* **************************************
GENERAL SETTINGS
*/
/*
*/
#ljdp_map_filters,
#ljdp_map_filters * {
display: flex;
@@ -20,41 +33,15 @@
gap: 10px;
margin-bottom: 10px;
}
*/
/*
overwrite display:none to avoid html flash at begining
<div class="filter_menu" style="display:none;">
*/
/*
#ljdp_map_filters .filter_menu {
display: flex !important;
flex-direction: column;
width: 100%;
overflow: visible;
width: auto;
cursor: pointer;
border: 1px solid #ba197a;
border-radius: 3px;
white-space: nowrap;
}
#ljdp_map_filters .filter_menu * {
cursor: pointer;
}
#ljdp_map_filters .filter_menu_title {
width: 100%;
padding: 5px;
}
*/
/* display inline-block for text-align to work */
/*
#ljdp_map_filters .filter_menu_title p {
display: inline-block;
width: 100%;
text-align: center;
}
*/
@@ -63,59 +50,18 @@
*/
/*
#ljdp_map_filters .filter_menu_drop_title {
width: 100%;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop_items {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
max-height: 400px;
width: 100%;
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 */
/*
display: none;
*/
/*
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
*/
/*
display: flex;
*/
/*
opacity: 1;
visibility: visible;
}
#ljdp_map_filters .filter_menu_drop_items p {
padding: 0px 10px;
#ljdp_map_filters .filter_menu_drop {
width: 100%;
height: auto;
margin: 0px;
width: 100%;
padding: 5px;
font-size: 100%;
font-weight: 500;
color: #666;
border: 2px solid #ba197a;
}
#ljdp_map_filters .filter_menu_drop_items p:hover {
background-color: #dddddd;
}
*/
@@ -124,30 +70,69 @@
MENU CHECKBOX
*/
/*
#ljdp_map_filters label.filter_menu_checkbox {
border-radius: 20px;
#ljdp_map_filters .filter_menu_checkbox p {
--size: 16px;
--left-offset: calc( var(--size) + 5px );
margin-left: var(--left-offset);
}
#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox {
color: #ffffff;
background-color: #ba197a;
#ljdp_map_filters .filter_menu_checkbox p::before {
content: "";
position: absolute;
top: calc( 50% - var(--size) / 2 - 1px );
left: calc( var(--left-offset) * -1 );
border: 2px solid #ba197a;
border-radius: 3px;
box-sizing: border-box;
width: var(--size);
height: var(--size);
}
#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox p::before {
/*
background-color: #ba197a;
background-color: #ca1c84;
background-color: #e01f93;
background-color: #e3359e;
background-color: #e74ba9;
background-color: #ea62b3;
*/
background-color: #ed78be;
/*
background-color: #f08fc9;
background-color: #f3a5d4;
background-color: #f6bcdf;
background-color: #f9d2e9;
background-color: #fce9f4;
*/
}
*/
/* **************************************
MENU BUTTON
MENU RESET
*/
#ljdp_map_filters .filter_menu_reset {
/*
#ljdp_map_filters .filter_menu_button {
flex-shrink: 2;
white-space: nowrap;
}
*/
border: 2px solid #ba197a;
background-color: #ba197a;
color: #fff;
padding: 5px 10px;
}
@media only screen and (max-width: 700px) {
#ljdp_map_filters {
flex-wrap: wrap;
}
#ljdp_map_filters .filter_menu {
width: 100%;
}
}