franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Fix media marker popup

Browse Source
This commit is contained in:
Franzz
2026-05-08 18:42:22 +02:00
parent 321e79c230
commit aa1856acb7
6 changed files with 113 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/project.vue
View File

@@ -29,7 +29,6 @@ export default {
settingsPanelOpen: false,
track: null,
markers: [],
markerSize: {width: 32, height: 32},
markerProps: {
image: {mainClasses: 'media', iconMain: 'marker', iconSub: 'image'},
video: {mainClasses: 'media', iconMain: 'marker', iconSub: 'video'},
@@ -304,12 +303,12 @@ export default {
this.closePopup();
let oMarker = this.markers.find((oCandidate) => oCandidate.id == iMarkerId && oCandidate.type == sMarkerType);
this.openPopup({
offset: [0, this.markerSize.height * -1], //FIXME
lnglat: [oMarker.longitude, oMarker.latitude],
options: oMarker
options: oMarker,
offset: [0, -32] //FIXME
});
},
openPopup({offset=[0, 0], lnglat, options={}} = {}) {
openPopup({lnglat, options={}, offset=[0, 0]} = {}) {
const $Popup = document.createElement('div');
this.popup.element = new Popup({
anchor: 'bottom',

31
src/components/projectPopup.vue
View File

@@ -17,11 +17,27 @@ export default {
},
inject: ['lang', 'consts'],
computed: {
timeIcon() {
return (this.options.type == 'media')?'image-shot':'time';
timeinfo() {
return (this.options.type == 'media')?
{
icon: 'image-shot',
local_time: this.options.taken_on_formatted_time_local,
site_time: this.options.taken_on_formatted_time,
offset: this.options.taken_on_day_offset,
relative_time: this.options.taken_on_relative_time
}:
{
icon: 'time',
local_time: this.options.formatted_time_local,
site_time: this.options.formatted_time,
offset: this.options.day_offset,
relative_time: this.options.relative_time
};
},
medias() {
return (this.options.type == 'media')?[this.options]:this.options?.medias;
localTime() {
return this.timeinfo.local_time +
((this.project.mode == this.consts.modes.blog)?' (' + this.timeinfo.relative_time + ')':'')
;
}
}
}
@@ -53,16 +69,15 @@ export default {
<spotIcon :icon="'altitude'" width="fixed" size="lg" :text="options.altitude+'m'" />
</div>
<div class="section time">
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
<projectRelTime :icon="timeinfo.icon" :localTime="localTime" :siteTime="timeinfo.site_time" :offset="timeinfo.offset" />
</div>
<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" width="fixed" size="lg" :text="options.weather_temp+'°C'" />
</div>
<div v-if="medias" class="section medias">
<div v-if="options.medias" class="section medias">
<spotIcon v-if="options.type=='message'" icon="media" width="fixed" size="lg" :text="lang.get('media.nearby')" />
<div class="medias-list">
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
<projectMediaLink v-for="media in options?.medias" :options="media" :type="'marker'" />
</div>
</div>
</div>

36
src/components/spotIcon.vue
View File

@@ -18,7 +18,7 @@ export default {
transform: String
},
computed: {
classNames() {
iconClassNames() {
return [
'spot-icon',
this.icon,
@@ -49,23 +49,37 @@ export default {
</script>
<template>
<span :title="title" v-if="title || hasText" class="spot-icon-box">
<FontAwesomeIcon :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
<span v-if="hasText" :class="textClasses">{{ text }}</span>
<span :title="title" :class="hasText?'spot-icon-with-text':null">
<span class="spot-icon-symbol">
<FontAwesomeIcon
:icon="iconDefinition"
:class="['spot-icon', this.icon, this.classes, this.margin?'margin-'+this.margin:null]"
:fixed-width="resolvedFixedWidth"
:width-auto="resolvedAutoWidth"
:size="resolvedSize"
:transform="resolvedTransform"
/>
</span>
<span v-if="hasText" :class="['spot-icon-text', textClasses]">{{ text }}</span>
</span>
<FontAwesomeIcon v-else :icon="iconDefinition" :class="classNames" :fixed-width="resolvedFixedWidth" :width-auto="resolvedAutoWidth" :size="resolvedSize" :transform="resolvedTransform" />
</template>
<style lang="scss" scoped>
<style lang="scss">
@use "@styles/var";
.spot-icon-box {
display: flex;
.spot-icon-with-text {
display: inline-flex;
align-items: flex-start;
gap: var.$elem-spacing;
align-items: center;
span {
.spot-icon-symbol {
flex: 0 0 auto;
align-self: center;
}
.spot-icon-text {
flex: 1 1 auto;
min-width: 0;
}
}
@@ -78,4 +92,4 @@ export default {
margin-left: var.$elem-spacing;
}
}
</style>
</style>

39
src/styles/_page.project.feed.scss
View File

@@ -178,25 +178,28 @@
top: var.$block-spacing;
right: var.$block-spacing;
.spot-icon {
font-size: 1.3em;
vertical-align: middle;
height: var.$block-spacing;
background: color.$message;
color: color.$message-bg;
border-radius: var.$block-radius 0 0 var.$block-radius;
padding: var.$elem-spacing;
margin-right: 0;
}
.spot-icon-with-text {
gap: 0;
.spot-icon {
font-size: 1.3em;
vertical-align: middle;
height: var.$block-spacing;
background: color.$message;
color: color.$message-bg;
border-radius: var.$block-radius 0 0 var.$block-radius;
padding: var.$elem-spacing;
}
.temperature {
display: inline-block;
line-height: var.$block-spacing;
vertical-align: middle;
padding: var.$elem-spacing;
background: color.$message-bg;
color: color.$message;
border-radius: 0 var.$block-radius var.$block-radius 0;
.temperature {
display: inline-block;
line-height: var.$block-spacing;
vertical-align: middle;
padding: var.$elem-spacing;
background: color.$message-bg;
color: color.$message;
border-radius: 0 var.$block-radius var.$block-radius 0;
}
}
}

4
src/styles/_page.project.map.scss
View File

@@ -15,6 +15,10 @@ $thumbnail-max-size: 60px;
max-width: 300px;
}
.maplibregl-popup-tip {
border-top-color: color.$default-bg-light;
}
.maplibregl-popup-content {
padding: var.$block-spacing;
background-color: color.$default-bg-light;