Clearer Tooltip

This commit is contained in:
2021-06-03 19:17:02 +02:00
parent bd2c7c4ce0
commit 1e965bfd91
4 changed files with 34 additions and 10 deletions

View File

@@ -476,8 +476,13 @@ function initSpotMessages(aoMessages, aoTracks) {
onEachFeature: function(feature, oLayer) { onEachFeature: function(feature, oLayer) {
var asProperties = feature.properties; var asProperties = feature.properties;
var $Tooltip = $('<div>', {'class':'track_tooltip'}); var $Tooltip = $('<div>', {'class':'track_tooltip'});
$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip); $('<p>', {'class':'name', 'title':asProperties.name}).addIcon('fa-track-'+asProperties.type+' fa-fw', true).append(asProperties.name).appendTo($Tooltip);
if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
var $TooltipDetails = $('<div>', {'class':'details'});
if(asProperties.Name != asProperties.description && asProperties.description != '') {
$('<p>', {'class':'description', 'title':asProperties.description}).text(asProperties.description).appendTo($TooltipDetails);
}
$TooltipDetails.append($('<div>', {'class':'separator'}));
var aiCoords = feature.geometry.coordinates; var aiCoords = feature.geometry.coordinates;
if(aiCoords && asProperties.type != 'hitchhiking') { if(aiCoords && asProperties.type != 'hitchhiking') {
@@ -522,10 +527,12 @@ function initSpotMessages(aoMessages, aoTracks) {
+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes) //Minutes +((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes) //Minutes
//Tooltip info //Tooltip info
$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($Tooltip); $('<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($Tooltip); $('<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($Tooltip); $('<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($Tooltip); $('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($TooltipDetails);
$TooltipDetails.appendTo($Tooltip);
//Trail Start/End //Trail Start/End
self.tmp(['trail-markers', asProperties.name], { self.tmp(['trail-markers', asProperties.name], {

View File

@@ -118,10 +118,27 @@ $legend-color: $post-color;
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1.2em;
} }
&.description { }
.name, .description {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.separator {
border-top: 1px solid #CCC;
margin-top: 1em;
}
.details {
padding-left: calc(1.25em*1.2 + 0.5rem);
.description {
font-style: italic; font-style: italic;
} }
&.detail {
.detail {
margin-top: 1em; margin-top: 1em;
width: 50%; width: 50%;
display: inline-block; display: inline-block;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long