infowindow style okish

README.md

@@ -17,7 +17,7 @@
 	- categories
 	- irl / online
 	- effacer
-- [ ] sur ordi carte hauteur 600px, sur telephone 500px
+- [/] 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

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -1,3 +1,4 @@
+
 function attach_info_window(map, marker, events, infowindow) {
 
 	/*
@@ -5,27 +6,31 @@ function attach_info_window(map, marker, events, infowindow) {
 	 * https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
 	 */
 
-	let window_content = '<div id="info_window">';
+	let window_content = `
+		<div id="infowindow_limits">
+			<div class="infowindow">
+				<div class="infowindow_head">
+					<p>${events[0].location.address}</p>
+					<div id="infowindow_close" onclick="g_infowindow.close()"></div>
+				</div>
+	`;
 	for (key in events) {
-		if (key > 0)
-			window_content += `<hr />`;
-		let presence = "en ligne";
-		if (events[key].irl)
-			presence = "en presentiel";
-			
 		window_content += `
-			<a href="${events[key].url}">
-				<p>${events[key].title}</p>
-			</a>
+				<a class="infowindow_body" href="${events[key].url}">
+					<p>${events[key].title}</p>
+				</a>
 		`;
 	};
-	window_content += '</div>';
+	window_content += `
+			</div>
+		</div>
+	`;
 
 	marker.addListener('click', () => {
 
 		let view_center = map.getCenter();
 		// height must be half css value (mp_info_windows.css -> '--size: XXXpx;')
-		let window_offset = { width: 0, height: 150 };
+		let window_offset = { width: 0, height: 200 };
 
 		infowindow.setOptions({
 			//disableAutoPan: true,
@@ -47,3 +52,31 @@ function attach_info_window(map, marker, events, infowindow) {
 	});
 
 }
+
+/*
+	event					: {}
+		- heure_de_debut	: "";
+		- heure_de_fin		: "";
+		- categorie			: "";
+		- date				: "";
+		- pays				: "";
+		- ville				: "";
+		- adresse			: "";
+		- prenom			: "";
+		- nom				: "";
+		- irl				: bool;
+		- id				: x;
+		- index				: x (default null);
+		- title				: "";
+		- url				: "";
+		- location			: {}
+			- street		: "";
+			- city			: "";
+			- country		: "";
+			- address		: "";
+			- approximate	: bool;
+			- coordinates	: {}
+				- lat		: x;
+				- lng		: x;
+*/
+

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -9,6 +9,7 @@ const g_init_bounds = {
 	east: 180,
 };
 let g_indexes = {};
+let g_infowindow = {};
 
 function mp_init_map() {
 
@@ -47,7 +48,7 @@ function mp_init_map() {
 
 	let map_div = document.getElementById("ljdp_map");
 	//let filters_div = document.getElementById("ljdp_map_filters");
-	let infowindow = new google.maps.InfoWindow();
+	g_infowindow = new google.maps.InfoWindow();
 
 
 	/*
@@ -55,7 +56,7 @@ function mp_init_map() {
 	 */
 
 	g_map = create_map(map_div);
-	g_markers = create_markers(g_map, locations, infowindow);
+	g_markers = create_markers(g_map, locations, g_infowindow);
 	g_marker_cluster = draw_clusters(g_map, g_markers);
 
 	//console.log("locations:");
@@ -68,7 +69,7 @@ function mp_init_map() {
 
 	// add listener to close infowindow at any click on map
 	g_map.addListener('click', function() {
-		infowindow.close();
+		g_infowindow.close();
 	});
 
 }

srcs/plugins/map_prof/styles/mp__style.css

@@ -8,12 +8,15 @@
 }
 
 #ljdp_map {
-	height: 500px;
+	height: 600px;
 	width: 100%;
 }   
 
-#temoin {
-	color: blue;
+
+@media only screen and (max-width: 700px) {
+	#ljdp_map {
+		height: 500px;
+	}   
 }
 
 

srcs/plugins/map_prof/styles/mp_info_windows.css

@@ -4,40 +4,118 @@
  */
 
 
-/*
-	window itself
-	*/
+
+
+/* **************************************
+	WINDOW ITSELF
+*/
+
 .gm-style-iw.gm-style-iw-c {
 	padding: 0px !important;
+	background-color: transparent;
+	pointer-events: none;
+	box-shadow: 0 2px 7px 1px rgba(0,0,0,.3);
+	box-shadow: none;
+	border-radius: 0 !important;
 }
 
-/*
-	triangle
-	*/
+
+
+
+/* **************************************
+	TRIANGLE
+*/
+
 .gm-style-iw-tc {
 	display: none !important;
 }
 
-/*
-	croice
-.gm-ui-hover-effect {
+
+
+
+/* **************************************
+	CROICE
+*/
+
+button.gm-ui-hover-effect {
 	display: none !important;
 }
-	*/
 
-/*
-	content
-	*/
-#info_window {
-	/* size must be double js 'height' value (mp_info_windows.js -> '{ ... height: XXX }' */
-	--size: 300px;
-	--margin: 10px;
-	--real-size: calc(var(--size) - 2 * var(--margin));
-	box-sizing: border-box;
-	margin: var(--margin);
-	padding: 5px;
-	height: var(--real-size);
-	width:  var(--real-size);
-	overflow: scroll;
+
+
+
+/* **************************************
+	CONTENT
+*/
+
+#infowindow_limits,
+#infowindow_limits * {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	margin: auto;
+	width: 100%;
+}
+
+#infowindow_limits {
+	/* height must be twice js 'height' value (mp_info_windows.js -> '{ ... height: XXX }' */
+	height: 400px;
+	width: 400px;
+	flex-direction: column;
+	pointer-events: none;
+	background-color: transparent;
+}
+
+#infowindow_limits .infowindow {
+	pointer-events: auto;
+	height: auto;
+	max-height: 400px;
+	padding: 0px;
+	overflow: scroll;
+	flex-direction: column;
+	border-radius: 5px;
+	background-color: #fff;
+}
+
+#infowindow_limits #infowindow_close {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	width: 50px;
+	height: 50px;
+	cursor: pointer;
+}
+
+#infowindow_limits .infowindow_head {
+	padding: 20px;
+	background-color: #ba197a;
+}
+
+#infowindow_limits .infowindow_head p {
+	font-size: 120%;
+	font-weight: 500;
+	color: #fff;
+	margin-right: 30px;
+}
+
+#infowindow_limits .infowindow_body {
+	padding: 20px;
+	margin-bottom: 10px;
+}
+
+#infowindow_limits .infowindow_body::after {
+	content: "";
+	position: absolute;
+	top: -5px;
+	left: 15%;
+	margin: auto;
+	width: 70%;
+	height: 1px;
+	background-color: #ba197a;
+}
+
+#infowindow_limits .infowindow_body p {
+	font-size: 120%;
+	font-weight: 500;
 }