Fix popup medias

2026-01-14 23:00:33 +01:00
parent 14bf9e2fc8
commit da39ca6589
15 changed files with 75 additions and 44 deletions
--- a/build/webpack.common.js
+++ b/build/webpack.common.js
@@ -87,7 +87,9 @@ module.exports = {
 					from: path.resolve(LIB, 'index.php'),
 					to: 'index.php'
 				},
-				{ from: 'src/images/footprint_mapbox.png', to: 'images' }
+				{ from: 'src/images/footprint_mapbox.png', to: 'images' },
+				{ from: 'src/images/logo_black.png', to: 'images' },
+				{ from: 'src/images/spot-logo-only.svg', to: 'images' }
 			],
 		}),
 		new SymlinkWebpackPlugin([
--- a/languages/en.lang
+++ b/languages/en.lang
@@ -95,6 +95,7 @@ language            = Language
 clearance           = Clearance
 toolbox				= Toolbox

+unit_d				= D
 unit_day			= day
 unit_days			= days
 unit_hour			= h
--- a/languages/es.lang
+++ b/languages/es.lang
@@ -95,6 +95,7 @@ language            = Idioma
 clearance           = Nivel de autorización
 toolbox				= Herramientas

+unit_d				= D
 unit_day			= Día
 unit_days			= Días
 unit_hour			= h
--- a/languages/fr.lang
+++ b/languages/fr.lang
@@ -95,6 +95,7 @@ language            = Langue
 clearance           = Niveau d'autorisation
 toolbox				= Boite à outils

+unit_d				= J
 unit_day			= jour
 unit_days			= jours
 unit_hour			= h
--- a/lib/Spot.php
+++ b/lib/Spot.php
@@ -401,8 +401,10 @@ class Spot extends Main
 			$iTimeStampPostedOn = strtotime($asMedia['posted_on']);
 			$asMedia['taken_on_formatted'] = $this->getTimeFormat($iTimeStampTakenOn);
 			$asMedia['taken_on_formatted_local'] = $this->getTimeFormat($iTimeStampTakenOn, $asMedia['timezone']);
+			$asMedia['taken_on_formatted_day_offset'] = self::getTimeZoneDayOffset($iTimeStampTakenOn, $asMedia['timezone']);
 			$asMedia['posted_on_formatted'] = $this->getTimeFormat($iTimeStampPostedOn);
 			$asMedia['posted_on_formatted_local'] = $this->getTimeFormat($iTimeStampPostedOn, $asMedia['timezone']);
+			$asMedia['posted_on_formatted_day_offset'] = self::getTimeZoneDayOffset($iTimeStampPostedOn, $asMedia['timezone']);
 			$asMedia['displayed_id'] = $asMedia[Db::getId(Media::MEDIA_TABLE)];

 			$this->addTimeStamp($asMedia, strtotime($asMedia[$sTimeRefField]), $asMedia['timezone']);
@@ -842,7 +844,7 @@ class Spot extends Main
 		$iLocalDate = (int) (new \DateTime('@'.$iTime))->setTimezone(new \DateTimeZone($sLocalTimeZone))->format('Ymd');
 		$iSiteDate  = (int) (new \DateTime('@'.$iTime))->setTimezone(new \DateTimeZone($sSiteTimeZone ))->format('Ymd');
 		
-		return ($iLocalDate == $iSiteDate)?'0':(($iLocalDate > $iSiteDate)?'+1':'-1');
+		return ($iLocalDate == $iSiteDate)?'0':(($iLocalDate < $iSiteDate)?'+1':'-1');
 	}

 	public static function getTimeZoneFromDate($sDate) {
--- a/src/components/projectMediaLink.vue
+++ b/src/components/projectMediaLink.vue
@@ -1,9 +1,11 @@
 <script>
 import spotIcon from './spotIcon.vue';
+import projectRelTime from './projectRelTime.vue';

 export default {
 	components: {
-		spotIcon
+		spotIcon,
+		projectRelTime
 	},
 	props: {
 		options: Object,
@@ -46,15 +48,14 @@ export default {
 		<span v-if="options.comment && type == 'post'" class="comment">{{ options.comment }}</span>
 	</a>
 	<div style="display:none">
-		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop" :title="options.comment">
-			<spotIcon :icon="'post'" :classes="'fa-lg fa-fw push'" />
-			<span class="comment-text">{{ options.comment }}</span>
+		<span v-if="options.comment" ref="comment" class="lb-caption-line comment desktop">
+			<spotIcon :icon="'post'" :classes="'fa-lg fa-fw push'" :text-classes="'comment-text'" :text="options.comment" />
 		</span>
-		<span ref="postedon" class="lb-caption-line" :title="$parent.timeDiff?spot.lang('local_time', options.posted_on_formatted_local):''">
-			<spotIcon :icon="'upload'" :classes="'fa-lg fa-fw'" :text="options.posted_on_formatted" />
+		<span  ref="postedon" class="lb-caption-line">
+			<projectRelTime :icon="'upload'" :localTime="options.posted_on_formatted_local" :siteTime="options.posted_on_formatted" :offset="options.posted_on_formatted_day_offset" />
 		</span>
-		<span ref="takenon" class="lb-caption-line" :title="$parent.timeDiff?spot.lang('local_time', options.taken_on_formatted_local):''">
-			<spotIcon :icon="options.subtype+'-shot'" :classes="'fa-lg fa-fw'" :text="options.taken_on_formatted" />
+		<span ref="takenon" class="lb-caption-line">
+			<projectRelTime :icon="options.subtype+'-shot'" :localTime="options.taken_on_formatted_local" :siteTime="options.taken_on_formatted" :offset="options.taken_on_formatted_day_offset" />
 		</span>
 	</div>
 </template>
--- a/src/components/projectPopup.vue
+++ b/src/components/projectPopup.vue
@@ -3,6 +3,7 @@ import projectMapLink from './projectMapLink.vue';
 import spotIcon from './spotIcon.vue';
 import projectRelTime from './projectRelTime.vue';
 import projectMediaLink from './projectMediaLink.vue';
+import { options } from '../scripts/lightbox';

 export default {
 	components: {
@@ -37,18 +38,15 @@ export default {
 			<projectMapLink :options="options" />
 		</p>
 		<p class="time">
-			<spotIcon :icon="'time'" :classes="'fa-fw fa-lg'" :text="options.formatted_time" />
+			<projectRelTime :icon="'time'" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
 			<span v-if="project.mode==spot.consts.modes.blog"> ({{ options.relative_time }})</span>
 		</p>
-		<p class="timezone" v-if="options.day_offset != '0'">
-			<spotIcon :icon="'timezone'" :classes="'fa-fw fa-lg'" :margin="true" />
-			<projectRelTime :localTime="options.formatted_time_local" :offset="options.day_offset" />
-		</p>
 		<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':spot.lang(options.weather_cond)">
 			<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
 		</p>
-		<p class="medias">
+		<div v-if="medias" class="separator"></div>
+		<div v-if="medias" class="medias">
 			<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
-		</p>
+		</div>
 	</div>
 </template>
--- a/src/components/projectPost.vue
+++ b/src/components/projectPost.vue
@@ -127,13 +127,17 @@
 		</div>
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
-				<p><spotIcon :icon="'coords'" :classes="'push'" /><projectMapLink :options="options" /></p>
-				<p><spotIcon :icon="'time'" :text="absTime" /></p>
-				<p v-if="timeDiff"><spotIcon :icon="'timezone'"  :classes="'push'" /><projectRelTime :localTime="absTimeLocal" :offset="options.day_offset" /></p>
+				<p>
+					<spotIcon :icon="'coords'" :classes="'push'" />
+					<projectMapLink :options="options" />
+				</p>
+				<p v-if="timeDiff">
+					<projectRelTime :icon="'time'" :iconClasses="'push'" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
+				</p>
 				<a class="drill" @click.prevent="panMapToMessage">
 					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="spot.lang(options.weather_cond)">
 						<spotIcon :icon="options.weather_icon" />
-						<span>{{ options.weather_temp+'°C' }}</span>
+						<span class="temperature">{{ options.weather_temp+'°C' }}</span>
 					</span>
 					<img class="staticmap clickable" :title="spot.lang('click_zoom')" :src="options.static_img_url" />
 					<span class="drill-icon fa-stack clickable">
--- a/src/components/projectRelTime.vue
+++ b/src/components/projectRelTime.vue
@@ -1,17 +1,31 @@
 <script>
+import spotIcon from './spotIcon.vue';
+
 export default {
+	components: {
+		spotIcon
+	},
 	props: {
 		localTime: String,
-		offset: String
+		siteTime: String,
+		offset: String,
+		classes: String,
+		icon: String,
+		iconClasses: String
 	},
-	inject: ['spot']
+	inject: ['spot'],
+	computed: {
+		title() {
+			if(this.localTime != this.siteTime) return this.spot.lang('your_time', this.siteTime.slice(-5)) + ((this.offset != '0')?' ('+this.spot.lang('unit_d')+this.offset+')':'');
+		},
+		spotIconClasses() {
+			return this.iconClasses || 'fa-fw fa-lg';
+		}
+	}
 }
 </script>

 <template>
-	<span>
-		<span>{{ localTime.substring(-5) }}</span>
-		<sup v-if="offset != '0'" :title="offset+' '+spot.lang('unit_day')+' ('+localTime.substring(0, 5)+')'">{{ ' '+offset }}</sup>
-		<span>&nbsp;{{ spot.lang('local_time', ' ').trim() }}</span>
-	</span>
+	<spotIcon v-if="icon" :icon="icon" :classes="spotIconClasses" :title="title" :text="localTime" />
+	<span v-else :class="classes" :title="title">{{ localTime }}</span>
 </template>
--- a/src/components/spotIcon.vue
+++ b/src/components/spotIcon.vue
@@ -2,9 +2,11 @@
 export default {
 	props: {
 		icon: String,
+		title: String,
 		text: String,
 		margin: Boolean,
-		classes: String
+		classes: String,
+		textClasses: String
 	},
 	computed: {
 		classNames() {
@@ -15,5 +17,5 @@ export default {
 </script>

 <template>
-	<i :class="classNames"></i>{{ text }}
+	<span :title="title"><i :class="classNames"></i><span :class="textClasses">{{ text }}</span></span>
 </template>
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -11,8 +11,6 @@ window.copyTextToClipboard = common.copyTextToClipboard;
 window.getOuterWidth = common.getOuterWidth;

 import Css from './../styles/spot.scss';
-import LogoText from '../images/logo_black.png';
-import Logo from '../images/spot-logo-only.svg';

 //Masks
 import Spot from './spot.js';
--- a/src/scripts/spot.js
+++ b/src/scripts/spot.js
@@ -115,9 +115,8 @@ export default class Spot {
 		}
 	}

-	lang(sKey, asParams) {
-		asParams = asParams || [];
-		if(typeof asParams != 'object') asParams = [asParams];
+	lang(sKey, asParams = []) {
+		if(typeof asParams !== 'object') asParams = [asParams];

 		var sLang = '';
 		if(sKey in this.consts.lang) {
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -73,7 +73,7 @@
 }

 [title]:not(a):not(.clickable) {
-	cursor: inherit;
+	cursor: default;
 }

 .clickable {
--- a/src/styles/_page.project.feed.scss
+++ b/src/styles/_page.project.feed.scss
@@ -174,7 +174,7 @@
 						padding: var.$elem-spacing;
 					}

-					span {
+					.temperature {
 						vertical-align: middle;
 						padding: var.$elem-spacing;
 						background: color.$message-bg;
--- a/src/styles/_page.project.map.scss
+++ b/src/styles/_page.project.map.scss
@@ -2,6 +2,8 @@
@use "var";
@use "color";

+$thumbnail-max-size: 60px;
+
 #map {
 	position: absolute;
 	left: 0;
@@ -9,8 +11,13 @@
 	bottom: 0;
 	width: 100%;

-	/* Leaflet Popup */
+	/* Popup */
+	.maplibregl-popup {
+		max-width: 300px;
+	}
+
 	.maplibregl-popup-content {
+		padding: var.$block-spacing;

 		h1 {
 			font-size: 1.4em;
@@ -20,7 +27,7 @@

 		.separator {
 			border-top: 1px solid #CCC;
-			margin: var.$elem-spacing 0 var.$block-spacing 0;
+			margin: var.$elem-spacing 0;
 		}

 		/* Marker Popup */
@@ -44,11 +51,12 @@

 			.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 {
-					display: inline-block;
-
-					margin: var.$block-spacing var.$block-spacing 0 0;
 					&:last-child {
 						margin-right: 0;
 					}
@@ -73,8 +81,8 @@
 					img {
 						width: auto;
 						height: auto;
-						max-width: 200px;
-						max-height: 100px;
+						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;