Fix popup medias

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>

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>

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">

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>

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>