filters are stylish

README.md

@@ -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

srcs/plugins/map_prof/mp_create_div.php

@@ -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>
-					<p>'.$value->_name.'</p>
-				</div>
 			</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>
-						<p>Éffacer</p>
-					</div>
 				</label>
 	';
 

srcs/plugins/map_prof/styles/mp_filters.css

@@ -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%;
+	width: auto;
-	overflow: visible;
 	cursor: pointer;
-
+	border-radius: 3px;
-	border: 1px solid #ba197a;
+	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 */
+#ljdp_map_filters .filter_menu_drop {
-	/* then, visibility is toogle, after x seconds, letting plainty of times for the browser to catch the 'onclick' event */
+	width: 100%;
-	/*
+	height: auto;
-	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;
 	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 .filter_menu_checkbox p {
-#ljdp_map_filters label.filter_menu_checkbox {
+	--size: 16px;
-	border-radius: 20px;
+	--left-offset: calc( var(--size) + 5px );
+	margin-left: var(--left-offset);
 }
 
-#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox {
+#ljdp_map_filters .filter_menu_checkbox p::before {
-	color: #ffffff;
+	content: "";
-	background-color: #ba197a;
+	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%;
+	}
+}
+