responsive infowindow

README.md

@@ -20,8 +20,8 @@
 - [/] sur ordi carte hauteur 600px, sur telephone 500px
 - [/] make two infowindow size
 - [/] infowindow with date in background color purple, and croice white
-- [ ] check errors on real site
+- [/] check errors on real site
-- [ ] create action to publish all
+- [/] create action to publish all
 - [/] deal with multiplication of filters
 - [ ] deal with error double event irl and online
 - [ ] change appearance of filter according to other filters
@@ -29,8 +29,9 @@
 
 - [/] la carte ne s'affiche pas sur les pages
 - [ ] zoom sur cluster problem
-- [ ] filtes sur chrome
+- [/] filtres sur chrome
-- [ ] infowindow new design et enlever scroll border
+- [/] infowindow new design
+- [ ] infowindow enlever scroll border
 - [ ] enlever ordre alphabetique categories
 - [ ] reduire espace checkboxs
 - [ ] reduire hauteur du select menu

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -30,7 +30,7 @@ function attach_info_window(map, marker, events, infowindow) {
 
 		let view_center = map.getCenter();
 		// height must be half css value (mp_info_windows.css -> '--size: XXXpx;')
-		let window_offset = { width: 0, height: 200 };
+		let window_offset = { width: 0, height: 275 };
 
 		infowindow.setOptions({
 			//disableAutoPan: true,

srcs/plugins/map_prof/styles/mp_filters.css

@@ -110,6 +110,7 @@
 
 
 
+
 /* **************************************
 	MENU RESET
 */
@@ -127,6 +128,15 @@
 
 
 
+
+
+
+
+/* **************************************
+	RESONSIVE DESIGN
+*/
+
+
 @media only screen and (max-width: 700px) {
 	#ljdp_map_filters {
 		flex-wrap: wrap;

srcs/plugins/map_prof/styles/mp_info_windows.css

@@ -17,6 +17,7 @@
 	box-shadow: 0 2px 7px 1px rgba(0,0,0,.3);
 	box-shadow: none;
 	border-radius: 0 !important;
+	max-width: 75vw !important;
 }
 
 
@@ -59,8 +60,8 @@ button.gm-ui-hover-effect {
 
 #infowindow_limits {
 	/* height must be twice js 'height' value (mp_info_windows.js -> '{ ... height: XXX }' */
-	height: 400px;
+	height: 550px;
-	width: 380px;
+	max-width: 380px;
 	flex-direction: column;
 	pointer-events: none;
 	background-color: transparent;
@@ -124,9 +125,8 @@ button.gm-ui-hover-effect {
 }
 
 #infowindow_limits .infowindow_body {
-	padding: 0px 10px 10px 10px;
+	padding: 10px 10px 10px 10px;
 	margin: 0px;
-	margin-top: 30px;
 }
 
 #infowindow_limits .infowindow_body::after {
@@ -147,3 +147,41 @@ button.gm-ui-hover-effect {
 	color: #666;
 }
 
+
+
+
+/* **************************************
+	HIDE SCROLL BARS
+*/
+/* chrome safari opera */
+.gm-style-iw-d::-webkit-scrollbar,
+#infowindow_limits::-webkit-scrollbar,
+#infowindow_limits .infowindow::-webkit-scrollbar {
+	display: none;
+}
+
+.gm-style-iw-d,
+#infowindow_limits,
+#infowindow_limits .infowindow {
+	-ms-overflow-style: none;	/* Ie edge */
+	scrollbar-width: none;		/* firefox */
+}
+
+
+
+
+
+/* **************************************
+	MOBILE RESPONSIVE
+*/
+
+@media only screen and (max-width: 400px) {
+	#infowindow_limits .infowindow_body p,
+	#infowindow_limits .infowindow_head p {
+		font-size: 115%;
+	}
+}
+
+
+
+