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', }" /> - - - + + + + + +
@@ -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;