New Tooltip interface Fix

masks/project.html

@@ -476,17 +476,20 @@ function initSpotMessages(aoMessages, aoTracks) {
 		onEachFeature: function(feature, oLayer) {
 			var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
+
+			//Title
 			$('<h1>', {'title':asProperties.name})
 				.addIcon('fa-track-'+asProperties.type+' fa-fw', true)
 				.append(asProperties.name)
 				.appendTo($Tooltip);
 
-			var $TooltipDetails = $('<div>', {'class':'details'});
+			//Description
+			var $TooltipBody = $('<div>', {'class':'body'}).appendTo($Tooltip);
 			if(asProperties.Name != asProperties.description && asProperties.description != '') {
-				$('<p>', {'class':'description', 'title':asProperties.description}).text(asProperties.description).appendTo($TooltipDetails);
+				$('<p>', {'class':'description', 'title':asProperties.description}).text(asProperties.description).appendTo($TooltipBody);
 			}
-			$TooltipDetails.append($('<div>', {'class':'separator'}));
 
+			//Calculate Details
 			var aiCoords = feature.geometry.coordinates;
 			if(aiCoords && asProperties.type != 'hitchhiking') {
 				var iDistance = 0, iElevDrop = 0, iElevGain = 0, iTime = 0;
@@ -529,14 +532,14 @@ function initSpotMessages(aoMessages, aoTracks) {
 					+((iTimeHours>0 || iTimeDays==0)?iTimeHours+oSpot.lang('unit_hour'):'')									//Hours
 					+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes)														//Minutes
 
-				//Tooltip info
+				//Tooltip details info
+				$TooltipBody.append($('<div>', {'class':'separator'}));
+				var $TooltipDetails = $('<div>', {'class':'details'}).appendTo($TooltipBody);
 				$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($TooltipDetails);
 				$('<p>', {'class':'detail'}).addIcon('fa-time fa-fw', true).append(sDuration).appendTo($TooltipDetails);
 				$('<p>', {'class':'detail'}).addIcon('fa-elev-gain fa-fw', true).append(iElevGain+'m').appendTo($TooltipDetails);
 				$('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($TooltipDetails);
 
-				$TooltipDetails.appendTo($Tooltip);
-
 				//Trail Start/End
 				self.tmp(['trail-markers', asProperties.name], {
 					'start'	: L.marker(new L.latLng(aiCoords[0][1], aiCoords[0][0]), {icon: getDivIcon('track-start')}),

style/_mask_project.scss

@@ -198,15 +198,17 @@ $legend-color: $post-color;
 					overflow: hidden;
 					white-space: nowrap;
 				}
-
+				.body {
-				.details {
-					margin-top: -$block-spacing;
 					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
+					
+					.details {
+						margin-top: -$block-spacing;
 
-					p.detail {
+						p.detail {
-						margin-top: $block-spacing;
+							margin-top: $block-spacing;
-						width: 50%;
+							width: 50%;
-						display: inline-block;
+							display: inline-block;
+						}
 					}
 				}
 			}