brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds tooltips for elevation profile wps

Browse Source
This commit is contained in:
Christian Beutel
2024-12-02 01:30:46 +01:00
parent 5bd8c7b610
commit 410039d42e
3 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/css/components.css
View File

@@ -59,10 +59,11 @@
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
content: attr(data-title); content: attr(data-title);
font-size: 14px; font-size: 12px;
padding: 6px 10px; padding: 6px 10px;
top: 24px; top: 24px;
white-space: nowrap; white-space: nowrap;
z-index: 10
} }
.tooltip:hover:after, .tooltip:hover:after,

4
web/src/lib/components/trail/map_with_elevation_maplibre.svelte
View File

@@ -615,4 +615,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
:global(.maplibregl-popup-content) {
@apply bg-background rounded-md;
}
</style> </style>

2
web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts vendored
View File

@@ -696,7 +696,7 @@ export class ElevationProfile {
wpDiv.style.top = `8px`; // Position horizontally wpDiv.style.top = `8px`; // Position horizontally
// Add custom HTML content (e.g., icon + label) // Add custom HTML content (e.g., icon + label)
wpDiv.innerHTML = `<i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i>`; wpDiv.innerHTML = `<div class="tooltip" data-title="${this.waypoints[index].name ?? "?"}"><i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i></div>`;
waypointContainer.appendChild(wpDiv); // Add to container waypointContainer.appendChild(wpDiv); // Add to container
}); });