New Tooltip interface

inc/spot.php

@@ -608,7 +608,18 @@ class Spot extends Main
 		//Seconds
 		$fSecond = round($dLeft * 3600, 1);
 
-		return $iDegree.'°'.$iMinute."'".$fSecond.'"'.$sDirection;
+		return
+			$iDegree.'°'.
+			self::getNumberWithLeadingZeros($iMinute, 2, 0)."'".
+			self::getNumberWithLeadingZeros($fSecond, 2, 1).'"'.
+			$sDirection;
+	}
+
+	public static function getNumberWithLeadingZeros($fValue, $iNbLeadingZeros, $iNbDigits){
+		$sDecimalSeparator = ".";
+		if($iNbDigits > 0) $iNbLeadingZeros += mb_strlen($sDecimalSeparator) + $iNbDigits;
+		$sPattern = '%0'.$iNbLeadingZeros.$sDecimalSeparator.$iNbDigits.'f';
+		return sprintf($sPattern, $fValue);
 	}
 
 	public function getTimeFormat($iTime, $sTimeZone='') {

masks/project.html

@@ -411,8 +411,8 @@ function initSpotMessages(aoMessages, aoTracks) {
 
 	//Controls: Elevation
 	if(!isMobile()) {
-		var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'Elevation'}};
-		var aoLegend = {Elevation: {}};
+		var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'trackType'}};
+		var aoLegend = {trackType: {}};
 		for(var i in aoTracks.features) {
 			if(aoTracks.features[i].properties.type != 'hitchhiking') {
 				//Feature
@@ -422,7 +422,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 				aoElevTracks.features.push(oTrack);
 
 				//Legend
-				aoLegend.Elevation[sType] = {text: oSpot.lang('track_'+sType), color: self.tmp(['track-type-styles', sType, 'color'])};
+				aoLegend.trackType[sType] = {text: oSpot.lang('track_'+sType), color: self.tmp(['track-type-styles', sType, 'color'])};
 			}
 		}
 		var oElev = L.control.heightgraph({
@@ -476,7 +476,10 @@ function initSpotMessages(aoMessages, aoTracks) {
 		onEachFeature: function(feature, oLayer) {
 			var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
-			$('<p>', {'class':'name', 'title':asProperties.name}).addIcon('fa-track-'+asProperties.type+' fa-fw', true).append(asProperties.name).appendTo($Tooltip);
+			$('<h1>', {'title':asProperties.name})
+				.addIcon('fa-track-'+asProperties.type+' fa-fw', true)
+				.append(asProperties.name)
+				.appendTo($Tooltip);
 
 			var $TooltipDetails = $('<div>', {'class':'details'});
 			if(asProperties.Name != asProperties.description && asProperties.description != '') {
@@ -567,6 +570,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 	else oMap.fitBounds(self.tmp('track').getBounds(), {paddingTopLeft: L.point(5, self.tmp('marker_size').height + 5), paddingBottomRight: L.point(5 + iPanelWidth, 5)});
 
 	//Spot Messages
+	var iWorkSpaceMinWidth = self.tmp('$Projects').width() - self.tmp('$Feed').outerWidth(true) - self.tmp('$Settings').outerWidth(true);
 	$.each(aoMessages, function(iKey, oMsg){
 
 		//Marker
@@ -579,13 +583,16 @@ function initSpotMessages(aoMessages, aoTracks) {
 		//Tooltip
 		$Tooltip = $('<div>', {'class':'info-window'})
 			.append($('<h1>')
-				.addIcon('fa-message fa-fw fa-lg')
-				.append('Message '+oMsg.type+' '+oSpot.lang('counter', oMsg.displayed_id)))
+				.addIcon('fa-message fa-lg push')
+				.append($('<span>').text('Message '+oSpot.lang('counter', oMsg.displayed_id)))
+				.append($('<span>', {'class':'message-type'}).text('('+oMsg.type+')'))
+			)
+			.append($('<div>', {'class':'separator'}))
 			.append($('<p>', {'class':'coordinates'})
-				.addIcon('fa-coords fa-fw fa-lg', false)
+				.addIcon('fa-coords fa-fw fa-lg', true)
 				.append(getGoogleMapsLink(oMsg)))
 			.append($('<p>', {'class':'time'})
-				.addIcon('fa-time fa-fw fa-lg')
+				.addIcon('fa-time fa-fw fa-lg', true)
 				.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')));
 
 		//Tooltip: Time Zone
@@ -601,13 +608,11 @@ function initSpotMessages(aoMessages, aoTracks) {
 			$.each(oMsg.medias, function(iKey, asMedia) {
 				$Medias.append(getMediaLink(asMedia, 'marker'));
 			});
-			$Tooltip
-				.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('images')))
-				.append($Medias);
+			$Tooltip.append($Medias);
 		}
 
 		oMarker.bindPopup($Tooltip[0], {
-			maxWidth: self.tmp('$Projects').width(),
+			maxWidth: iWorkSpaceMinWidth,
 			autoPan: false,
 			closeOnClick: true,
 			offset: new L.Point(0, -30)

style/_leaflet.scss

@@ -20,9 +20,12 @@ $stroke-width-axis : 2;
 .leaflet-popup {
 	.leaflet-popup-content-wrapper {
 		border-radius: 5px;
+		padding: 0;
 
 		.leaflet-popup-content {
-			margin: 1rem;
+			margin: 0;
+			padding: 1rem;
+			box-sizing: border-box;
 		}
 	}
 }

style/_mask_project.scss

@@ -1,4 +1,5 @@
 //Feed width
+$elem-spacing: 0.5rem;
 $block-spacing: 1rem;
 $panel-width: 30%;
 $panel-width-max: "400px + 3 * #{$block-spacing}";
@@ -110,39 +111,104 @@ $legend-color: $post-color;
 		bottom: 0;
 		width: 100%;
 
+		/* Leaflet Popup */
+		.leaflet-popup-content {
+
+			h1 {
+				font-size: 1.4em;
+				margin: 0;
+				font-weight: bold;
+			}
+
+			.separator {
+				border-top: 1px solid #CCC;
+				margin: $elem-spacing 0 $block-spacing 0;
+			}
+
+			/* Marker Popup */
+			.info-window {
+				h1 .message-type {
+					color: #CCC;
+					font-weight: normal;
+					font-size: calc(1em / 1.4);
+					margin-left: 0.5em;
+					vertical-align: text-bottom;
+				}
+
+				p {
+					font-size: 1.0em;
+					margin: $elem-spacing 0 0 0;
+
+					a {
+						color: $post-color;
+					}
+				}
+
+				.medias {
+					line-height: 0;
+
+					a {
+						display: inline-block;
+
+						margin: $block-spacing $block-spacing 0 0;
+						&:last-child {
+							margin-right: 0;
+						}
+
+						&.drill {
+							font-size: 2em;
+
+							.fa-drill-image {
+								color: transparent;
+							}
+							.fa-drill-video {
+								color: rgba(255, 255, 255, 0.5);
+							}
+
+							&:hover {
+								.fa-drill-video, .fa-drill-image {
+									color: rgba(255, 255, 255, 0.75);
+								}
+							}
+						}
+
+						img {
+							max-width: 200px;
+							max-height: 100px;
+							border-radius: 3px;
+							image-orientation: from-image;
+							transition: All 0.2s;
+						}
+					}
+				}
+			}
+
+			/* Track Popup */
 			.track_tooltip {
 				p {
 					margin: 0;
 
-				&.name {
-					font-weight: bold;
-					font-size: 1.4em;
-				}
-
 					&.description {
 						font-size: 1.15em;
 					}
-
-				&.detail {
-					margin-top: 1em;
-					width: 50%;
-					display: inline-block;
-				}
 				}
 
-			.name, .description {
+				h1, .description {
 					text-overflow: ellipsis;
 					overflow: hidden;
 					white-space: nowrap;
 				}
 
-			.separator {
-				border-top: 1px solid #CCC;
-				margin-top: calc(1em/1.4);
-			}
-
 				.details {
-				padding-left: calc(1.25em*1.4 + 0.5rem);
+					margin-top: -$block-spacing;
+					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
+
+					p.detail {
+						margin-top: $block-spacing;
+						width: 50%;
+						display: inline-block;
+					}
+				}
 			}
 		}
 	}
@@ -696,74 +762,6 @@ $legend-color: $post-color;
 			}
 		}
 	}
-
-	/* Info Window */
-
-	.leaflet-popup-content {
-		.info-window {
-			h1 {
-				font-size: 1.2em;
-				margin: 1em 0 1.2em;
-
-				i {
-					margin-right: 0.3125em;
-				}
-			}
-
-			p {
-				font-size: 1.0em;
-				margin: 0.5em 0 0 0;
-
-				i {
-					padding-right: 0.5em;
-				}
-
-				a {
-					color: $post-color;
-				}
-			}
-
-			.medias {
-				margin-top: -0.5rem;
-				line-height: 0;
-
-				a {
-					display: inline-block;
-
-					margin-right: $block-spacing;
-					margin-top: $block-spacing;
-					&:last-child {
-						margin-right: 0;
-					}
-
-					&.drill {
-						font-size: 2em;
-
-						.fa-drill-image {
-							color: transparent;
-						}
-						.fa-drill-video {
-							color: rgba(255, 255, 255, 0.5);
-						}
-
-						&:hover {
-							.fa-drill-video, .fa-drill-image {
-								color: rgba(255, 255, 255, 0.75);
-							}
-						}
-					}
-
-					img {
-						max-width: 200px;
-						max-height: 100px;
-						border-radius: 3px;
-						image-orientation: from-image;
-						transition: All 0.2s;
-					}
-				}
-			}
-		}
-	}
 }
 
 #elems {