Make project marker scale as well on hover
All checks were successful
Deploy Spot / deploy (push) Successful in 40s

This commit is contained in:
2026-06-17 23:42:33 +02:00
parent 14d827ab66
commit 085cfd8ba2
5 changed files with 11 additions and 11 deletions

View File

@@ -401,7 +401,7 @@ export default {
this.openPopup({
lnglat: [oProject.longitude, oProject.latitude],
options: oProject,
offset: [0, -1 * this.markerHeight]
offset: [0, -1 * this.markerHeight * this.getStyleProperty('--zoom-scale')]
});
},
openMarkerPopup(iMarkerId, sMarkerType) {

View File

@@ -13,6 +13,7 @@ import {
faCircleRight,
faCircleUp,
faCircleXmark,
faClock,
faCloudArrowUp,
faCloudBolt,
faCloudMoon,
@@ -47,8 +48,7 @@ import {
faTriangleExclamation,
faVideo,
faWifi,
faWind,
faClock
faWind
} from '@fortawesome/free-solid-svg-icons';
function customIcon(iconName, width, height, hex, path) {
@@ -92,8 +92,6 @@ const ICONS = {
'off-track': faPersonHiking,
'main': faPersonHiking,
'hitchhiking': faCarSide,
'track-start': faPersonHiking,
'track-end': faPersonHiking,
layers: faLayerGroup,
'elev-chart': faChartArea,
distance: faCircleRight,

View File

@@ -14,6 +14,7 @@
--button-width: 36px;
--trans-quick: #{var.$trans-quick};
--trans-slow: #{var.$trans-slow};
--zoom-scale: #{var.$zoom-scale};
}
/* Animations */
@@ -43,7 +44,7 @@
}
.flicker {
@include animate(fadeIn 0.5s infinite alternate);
@include animate(fadeIn var.$trans-slow infinite alternate);
}
@mixin no-text-overflow() {
@@ -57,7 +58,7 @@
transform: scale(1);
}
1.25% {
transform: scale(1.2);
transform: scale(var.$zoom-scale);
}
2.5% {
transform: scale(1);

View File

@@ -20,14 +20,14 @@ $thumbnail-max-size: 60px;
}
.maplibregl-marker {
.spot-icon-stack:is(.media, .message) {
.spot-icon-stack:is(.media, .message, .project) {
display: inline-block;
transform-origin: center bottom;
transition: transform var.$trans-quick;
}
&:hover .spot-icon-stack:is(.media, .message) {
transform: scale(1.15);
&:hover .spot-icon-stack:is(.media, .message, .project) {
transform: scale(var.$zoom-scale);
}
}

View File

@@ -14,3 +14,4 @@ $elem-shadow: 0px 1px 1px color.$over-img-shadow;
//Transitions
$trans-quick: 200ms;
$trans-slow: 500ms;
$zoom-scale: 1.15;