Make project marker scale as well on hover
All checks were successful
Deploy Spot / deploy (push) Successful in 40s
All checks were successful
Deploy Spot / deploy (push) Successful in 40s
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -13,4 +13,5 @@ $elem-shadow: 0px 1px 1px color.$over-img-shadow;
|
||||
|
||||
//Transitions
|
||||
$trans-quick: 200ms;
|
||||
$trans-slow: 500ms;
|
||||
$trans-slow: 500ms;
|
||||
$zoom-scale: 1.15;
|
||||
Reference in New Issue
Block a user