From 9e4fbe7ad415aab16a2d8123328a0d6a3ab2e9e3 Mon Sep 17 00:00:00 2001 From: Franzz Date: Thu, 23 Apr 2026 00:15:16 +0200 Subject: [PATCH] Customize media markers --- src/components/project.vue | 19 ++++--- src/components/projectPopup.vue | 32 ++++++++---- src/components/projectPost.vue | 12 +++-- src/styles/_page.project.map.scss | 83 +++++++++++++++++++------------ 4 files changed, 92 insertions(+), 54 deletions(-) diff --git a/src/components/project.vue b/src/components/project.vue index 5880560..45cfd38 100644 --- a/src/components/project.vue +++ b/src/components/project.vue @@ -299,6 +299,7 @@ export default { */ //Medias + //TODO Use same way of displaying markers (so that openMarkerPopup works on all markers) this.markers.medias.forEach(msg => { const $Marker = document.createElement('div'); const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'image'}); @@ -315,8 +316,8 @@ export default { .setMaxWidth(300) .addTo(this.map) ; - console.log(msg); const popupContent = createApp(ProjectPopup, { + type: 'media', options: msg, medias: [msg], project: this.currProject @@ -416,6 +417,7 @@ export default { .addTo(this.map); this.popup.content = createApp(ProjectPopup, { + type: 'message', options: oFeature.properties, medias: JSON.parse(oFeature.properties.medias || '[]'), project: this.currProject @@ -585,8 +587,9 @@ export default { } }, async findPost(oPost) { - if(this.goToPost(oPost)) { - //if(oPost.type=='media' || oPost.type=='message') $Post.find('a.drill').click(); + let oRef = this.goToPost(oPost); + if(oRef) { + oRef.executeMainAction(); } else if(!this.feed.outOfData) { await this.getNextFeed(); @@ -598,17 +601,17 @@ export default { let bFound = false; let aoRefs = this.$refs.posts.filter((post) => {return post.postId == oPost.type+'-'+oPost.id;}); if(aoRefs.length == 1) { + let oRef = aoRefs[0]; this.$refs.feedSimpleBar.scrollElement.scrollTop += Math.round( - aoRefs[0].$el.getBoundingClientRect().top + oRef.$el.getBoundingClientRect().top + window.pageYOffset - parseFloat(getComputedStyle(this.$refs.feedSimpleBar.$el).paddingTop) ); - aoRefs[0].executeMainAction(); + //this.spot.flushHash(['post', 'message']); - bFound = true; + + return oRef; } - - return bFound; } } } diff --git a/src/components/projectPopup.vue b/src/components/projectPopup.vue index 8087a2f..8e63e85 100644 --- a/src/components/projectPopup.vue +++ b/src/components/projectPopup.vue @@ -13,35 +13,45 @@ export default { projectRelTime }, props: { + type: String, options: Object, medias: Array, project: Object }, - inject: ['spot'] + inject: ['spot'], + computed: { + timeIcon() { + return (this.type == 'media')?'image-shot':'time'; + } + } } \ No newline at end of file diff --git a/src/components/projectPost.vue b/src/components/projectPost.vue index 9a6ee91..e1f955c 100644 --- a/src/components/projectPost.vue +++ b/src/components/projectPost.vue @@ -32,7 +32,8 @@ anchorIcon: 'link', popupRequested: false, postMessage: '', - sending: false + sending: false, + focusZoomLevel: 15 }; }, computed: { @@ -60,7 +61,11 @@ return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time; }, lngLat() { - return (this.options.type == 'message')?(new LngLat(this.options.longitude, this.options.latitude)):null; + return ( + ['message', 'media'].includes(this.options.type) + && this.options.longitude + && this.options.latitude + )?(new LngLat(this.options.longitude, this.options.latitude)):null; } }, @@ -80,7 +85,7 @@ if(this.spot.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant'); this.map.panToBetweenPanels( this.lngLat, - 15, + this.focusZoomLevel, () => {this.map.openMarkerPopup(this.options.id_message);} ); }, @@ -119,6 +124,7 @@ break; case 'media': this.$refs.medialink.openMedia(); + if(this.lngLat) this.map.panToBetweenPanels(this.lngLat, this.focusZoomLevel); break; } } diff --git a/src/styles/_page.project.map.scss b/src/styles/_page.project.map.scss index b084cc1..cf46a54 100644 --- a/src/styles/_page.project.map.scss +++ b/src/styles/_page.project.map.scss @@ -38,7 +38,7 @@ $thumbnail-max-size: 60px; font-weight: normal; font-size: calc(1em / 1.4); margin-left: 0.5em; - vertical-align: text-bottom; + vertical-align: middle; } p { @@ -50,43 +50,62 @@ $thumbnail-max-size: 60px; } } - .medias { - line-height: 0; - display: grid; - gap: var.$elem-spacing; - grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr)); - place-items: center; + a.media-link { + img { + width: auto; + height: auto; + image-orientation: from-image; + transition: All 0.2s; + border-radius: var.$block-radius; + } - a { - &:last-child { - margin-right: 0; + &.drill { + font-size: 2em; + + .fa-drill-image { + color: transparent; + } + .fa-drill-video { + color: color.$over-img-bg; } - &.drill { - font-size: 2em; - - .fa-drill-image { - color: transparent; - } - .fa-drill-video { - color: color.$over-img-bg; - } - - &:hover { - .fa-drill-video, .fa-drill-image { - color: color.$default-bg; - } + &:hover { + .fa-drill-video, .fa-drill-image { + color: color.$default-bg; } } + } + } - img { - width: auto; - height: auto; - max-width: $thumbnail-max-size; - max-height: calc($thumbnail-max-size * 2/3); - border-radius: var.$block-radius; - image-orientation: from-image; - transition: All 0.2s; + &.message { + .medias { + line-height: 0; + display: grid; + gap: var.$elem-spacing; + grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr)); + place-items: center; + + a.media-link { + &:last-child { + margin-right: 0; + } + + img { + max-width: $thumbnail-max-size; + max-height: calc($thumbnail-max-size * 2/3); + } + } + } + } + + &.media { + .coordinates { + margin: 0; + } + + .medias { + a.media-link img { + width: 100%; } } }