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({
|
this.openPopup({
|
||||||
lnglat: [oProject.longitude, oProject.latitude],
|
lnglat: [oProject.longitude, oProject.latitude],
|
||||||
options: oProject,
|
options: oProject,
|
||||||
offset: [0, -1 * this.markerHeight]
|
offset: [0, -1 * this.markerHeight * this.getStyleProperty('--zoom-scale')]
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
openMarkerPopup(iMarkerId, sMarkerType) {
|
openMarkerPopup(iMarkerId, sMarkerType) {
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
faCircleRight,
|
faCircleRight,
|
||||||
faCircleUp,
|
faCircleUp,
|
||||||
faCircleXmark,
|
faCircleXmark,
|
||||||
|
faClock,
|
||||||
faCloudArrowUp,
|
faCloudArrowUp,
|
||||||
faCloudBolt,
|
faCloudBolt,
|
||||||
faCloudMoon,
|
faCloudMoon,
|
||||||
@@ -47,8 +48,7 @@ import {
|
|||||||
faTriangleExclamation,
|
faTriangleExclamation,
|
||||||
faVideo,
|
faVideo,
|
||||||
faWifi,
|
faWifi,
|
||||||
faWind,
|
faWind
|
||||||
faClock
|
|
||||||
} from '@fortawesome/free-solid-svg-icons';
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
function customIcon(iconName, width, height, hex, path) {
|
function customIcon(iconName, width, height, hex, path) {
|
||||||
@@ -92,8 +92,6 @@ const ICONS = {
|
|||||||
'off-track': faPersonHiking,
|
'off-track': faPersonHiking,
|
||||||
'main': faPersonHiking,
|
'main': faPersonHiking,
|
||||||
'hitchhiking': faCarSide,
|
'hitchhiking': faCarSide,
|
||||||
'track-start': faPersonHiking,
|
|
||||||
'track-end': faPersonHiking,
|
|
||||||
layers: faLayerGroup,
|
layers: faLayerGroup,
|
||||||
'elev-chart': faChartArea,
|
'elev-chart': faChartArea,
|
||||||
distance: faCircleRight,
|
distance: faCircleRight,
|
||||||
|
|||||||
@@ -14,6 +14,7 @@
|
|||||||
--button-width: 36px;
|
--button-width: 36px;
|
||||||
--trans-quick: #{var.$trans-quick};
|
--trans-quick: #{var.$trans-quick};
|
||||||
--trans-slow: #{var.$trans-slow};
|
--trans-slow: #{var.$trans-slow};
|
||||||
|
--zoom-scale: #{var.$zoom-scale};
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animations */
|
/* Animations */
|
||||||
@@ -43,7 +44,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flicker {
|
.flicker {
|
||||||
@include animate(fadeIn 0.5s infinite alternate);
|
@include animate(fadeIn var.$trans-slow infinite alternate);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin no-text-overflow() {
|
@mixin no-text-overflow() {
|
||||||
@@ -57,7 +58,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
1.25% {
|
1.25% {
|
||||||
transform: scale(1.2);
|
transform: scale(var.$zoom-scale);
|
||||||
}
|
}
|
||||||
2.5% {
|
2.5% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
|||||||
@@ -20,14 +20,14 @@ $thumbnail-max-size: 60px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.maplibregl-marker {
|
.maplibregl-marker {
|
||||||
.spot-icon-stack:is(.media, .message) {
|
.spot-icon-stack:is(.media, .message, .project) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transform-origin: center bottom;
|
transform-origin: center bottom;
|
||||||
transition: transform var.$trans-quick;
|
transition: transform var.$trans-quick;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .spot-icon-stack:is(.media, .message) {
|
&:hover .spot-icon-stack:is(.media, .message, .project) {
|
||||||
transform: scale(1.15);
|
transform: scale(var.$zoom-scale);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,3 +14,4 @@ $elem-shadow: 0px 1px 1px color.$over-img-shadow;
|
|||||||
//Transitions
|
//Transitions
|
||||||
$trans-quick: 200ms;
|
$trans-quick: 200ms;
|
||||||
$trans-slow: 500ms;
|
$trans-slow: 500ms;
|
||||||
|
$zoom-scale: 1.15;
|
||||||
Reference in New Issue
Block a user