diff --git a/src/pages/workouts/components/WorkoutItem.vue b/src/pages/workouts/components/WorkoutItem.vue
index 68ce675..231c005 100644
--- a/src/pages/workouts/components/WorkoutItem.vue
+++ b/src/pages/workouts/components/WorkoutItem.vue
@@ -70,20 +70,25 @@
color: 'gray',
}"
/>
-
-
-
+
+
+
+
+
+ {{ length }}
+
+
@@ -223,6 +228,22 @@
![]()
+
{
showLightbox.value = true;
}
};
+function focusPhotoOnMap(photo: WorkoutPhoto) {
+ if (photo.latitude === null || photo.longitude === null) return;
+ map.value?.update({
+ location: {
+ center: [photo.longitude as number, photo.latitude as number] as LngLat,
+ zoom: 15,
+ },
+ });
+}
const prevPhoto = () => {
lightboxIndex.value =
(lightboxIndex.value - 1 + photos.value.length) % photos.value.length;
@@ -1454,6 +1485,32 @@ h3 {
cursor: pointer;
display: block;
}
+.photo-cluster {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: #007afc;
+ color: #fff;
+ font-weight: 600;
+ font-size: 14px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 3px solid #fff;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+ cursor: pointer;
+}
+.workout-photo-loc {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ background: rgba(0, 0, 0, 0.45);
+ border-radius: 50%;
+ padding: 2px;
+ cursor: pointer;
+ z-index: 2;
+ color: #fff;
+}
.photo-lightbox {
position: fixed;
inset: 0;