Media comment embedded in picture

masks/project.html

@@ -195,8 +195,8 @@ function initProject(sProjectCodeName, oFocusPost){
 	
 	//Timezone difference notice
 	var bSameTime = ((new Date()).toLocaleString([], {timeZone: oSpot.consts.timezone}) == (new Date()).toLocaleString([], {timeZone: oSpot.vars(['project', 'timezone'])}));
-	self.tmp('site_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(oSpot.consts.timezone)+')');
+	self.tmp('site_tz_notice', bSameTime?'':getTimeZoneDesc(oSpot.consts.timezone));
-	self.tmp('proj_tz_notice', bSameTime?'':' ('+getTimeZoneDesc(self.vars(['project', 'timezone']))+')');
+	self.tmp('proj_tz_notice', bSameTime?'':getTimeZoneDesc(self.vars(['project', 'timezone'])));
 	
 	$.when(
 		//Markers: Spot Messages & Medias
@@ -572,14 +572,21 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
 			.append($('<h1>')
 				.addIcon('fa-message fa-fw fa-lg')
 				.append('Message '+oMsg.type+' '+oSpot.lang('counter', oMsg.displayed_id)))
-			.append($('<p>', {'class':'time'})
-				.addIcon('fa-time fa-fw fa-lg')
-				.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')+self.tmp('site_tz_notice')))
 			.append($('<p>', {'class':'coordinates'})
 				.addIcon('fa-coords fa-fw fa-lg', false)
-				.append(getGoogleMapsLink(oMsg)));
+				.append(getGoogleMapsLink(oMsg)))
+			.append($('<p>', {'class':'time'})
+				.addIcon('fa-time fa-fw fa-lg')
+				.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')));
 		
-		//Tooltip medias
+		//Tooltip: Time Zone
+		if(self.tmp('site_tz_notice')!='') {
+			$Tooltip.append($('<p>', {'class':'timezone'})
+				.addIcon('fa-timezone fa-fw fa-lg')
+				.append(self.tmp('site_tz_notice')));
+		}
+		
+		//Tooltip: Medias
 		if(oMsg.medias) {
 			var $Medias = $('<div>', {'class':'medias'});
 			$.each(oMsg.medias, function(iKey, asMedia) {
@@ -690,7 +697,7 @@ function setFeedUpdateTimer(iSeconds, fCallback) {
 function getPost(asPost) {
 	asPost.headerless = asPost.headerless || false;
 	
-	var $Post = $('<div>', {'class':'post '+asPost.type+(asPost.headerless?' headerless':'')});
+	var $Post = $('<div>', {'class':'post-item '+asPost.type+(asPost.headerless?' headerless':'')});
 	if(asPost.id) $Post.prop('id', asPost.type+'-'+asPost.id);
 	
 	var sRelTime = (asPost.relative_time!='')?((self.vars('project') && self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
@@ -700,10 +707,11 @@ function getPost(asPost) {
 	
 	switch(asPost.type) {
 		case 'message':
-			$Body = $('<div>')
+			$Body = $('<div>', {'class':'body-box'})
 				.data('id', asPost.id_message)
 				.append($('<p>').addIcon('fa-coords', true).append(getGoogleMapsLink(asPost)))
-				.append($('<p>').addIcon('fa-time', true).append(sAbsTime+self.tmp('site_tz_notice')))
+				.append($('<p>').addIcon('fa-time', true).append(sAbsTime))
+				.append((self.tmp('site_tz_notice')!='')?$('<p>').addIcon('fa-timezone', true).append(self.tmp('site_tz_notice')):'')
 				.append($('<a>', {'class':'drill'})
 					.append($('<img>', {'class':'staticmap', title: oSpot.lang('click_zoom'), src: getWmtsApiUrl('static', asPost.latitude, asPost.longitude, 13)}))
 					.append($('<span>', {'class': 'drill-icon fa-stack'})
@@ -737,8 +745,8 @@ function getPost(asPost) {
 				);
 			break;
 		case 'media':
-			$Body = $('<div>').append(getMediaLink(asPost, 'post'));
+			$Body = $('<div>', {'class':'body-box'}).append(getMediaLink(asPost, 'post'));
-			if(asPost.comment) $Body.append($('<p>').text(asPost.comment));
+			if(asPost.comment) $Body.find('a.drill').append($('<span>', {'class':'comment'}).text(asPost.comment));
 			break;
 		case 'post':
 			$Body = $('<div>')
@@ -759,7 +767,7 @@ function getPost(asPost) {
 	$Post
 		.append($('<div>', {'class':'header'})
 			.append($('<span>', {'class':'index'}).addIcon('fa-'+sType))
-			.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+self.tmp('site_tz_notice'))))
+			.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+((self.tmp('site_tz_notice')!='')?' ('+self.tmp('site_tz_notice')+')':''))))
 		.append($('<div>', {'class':'body'}).append($Body));
 	
 	if(asPost.displayed_id) $Post.find('.index').append(' '+oSpot.lang('counter', asPost.displayed_id));
@@ -787,7 +795,7 @@ function getMediaLink(asData, sType) {
 	var $Timezone = (self.tmp('site_tz_notice') == '')?'':
 		$('<span>', {'class': 'lb-caption-line'})
 			.addIcon('fa-timezone fa-lg fa-fw', true)
-			.append(getTimeZoneDesc(oSpot.consts.timezone));
+			.append(self.tmp('site_tz_notice'));
 
 	var $Title = $('<div>').append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn).append($Timezone);
 	var $Link = 

style/_lightbox.scss

@@ -10,6 +10,7 @@
 .lightboxOverlay {
 	bottom: 0;
 	right: 0;
+	outline: none;
 }
 
 .lightbox {

style/_mask_project.scss

@@ -302,8 +302,14 @@ $legend-color: $post-color;
 					margin-bottom: 0.5em;
 				}
 			}
+			
+			.body-box {
+				position:relative;
+				display: flex;
+				flex-direction: column;
+			}
 		
-			.post {
+			.post-item {
 				margin-bottom: $block-spacing;
 				background: $post-bg;
 				color: $post-color;
@@ -316,7 +322,7 @@ $legend-color: $post-color;
 				}
 				
 				.message {
-					margin: 0.3em 0 0 0;
+					margin: 0;
 				}
 				.signature {
 					margin: 0.5em 0 0 0;
@@ -324,29 +330,33 @@ $legend-color: $post-color;
 					font-style: italic;
 				}
 				.header {
-					font-style: italic;
-					font-size: 0.8em;
 					padding: 0.5em 1em;
+					line-height: 1em;
 
 					span {
 						display: inline-block;
 						cursor: default;
+						font-size: 0.8em;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
 					
 						&.index {
 							width: 25%;
-							font-style: normal;
 						}
 						
 						&.time {
 							width: 75%;
 							text-align: right;
+							font-style: italic;
 						}
 					}
 				}
 				.body {
 					clear: both;
-					padding: 0em 1em 0.5em;
+					padding: 0em 1em 1em;
 				}
+				
 				&.headerless {
 					.header {
 						display: none;
@@ -355,52 +365,16 @@ $legend-color: $post-color;
 						padding-top: 0.5em;
 					}
 				}
-				&.media {
+
-					background: $media-bg;
-					color: $media-color;
-					
-					a {
-						display: inline-block;
-						width: 100%;
-						line-height: 0;
-						margin: 0;
-					
-						&.drill {
-							font-size: 3em;
-							
-							.fa-drill-picture {
-								color: transparent;
-							}
-							.fa-drill-video {
-								color: rgba(255, 255, 255, 0.5);
-							}
-						
-							&:hover {
-								.fa-drill-picture, .fa-drill-video {
-									color: rgba($media-bg, 0.75);
-								}
-							}
-						}
-					
-						img {
-							width: 100%;
-							image-orientation: from-image;
-							outline: none;
-							border-radius: 3px;
-						}
-					}
-					p {
-						margin: 0;
-						text-align: justify;
-					}
-				}
 				&.message {
 					background: $message-bg;
 					color: $message-color;
 					
 					p {
 						font-size: 0.9em;
-						margin: 0.5em 0;
+						margin: 0 0 .5em 0;
+						display: inline-block;
+						width: 100%;
 					}
 				
 					a {
@@ -408,6 +382,8 @@ $legend-color: $post-color;
 					}
 				
 					a.drill {
+						line-height: 0;
+						
 						.drill-icon {
 							transform: translate(-16px, -32px);
 							
@@ -435,6 +411,74 @@ $legend-color: $post-color;
 						cursor: pointer;
 					}
 				}
+			
+				&.post {
+					.body {
+						padding: 0em 1em 0.5em;
+					}
+				}
+			
+				&.media {
+					background: $media-bg;
+					color: $media-color;
+					
+					.body {
+						a {
+							display: inline-block;
+							width: 100%;
+							margin: 0;
+							color: $media-color;
+							position: relative;
+							line-height: 0;
+						
+							&.drill {
+								&:hover {
+									.drill-icon .fa-drill-picture, .drill-icon .fa-drill-video {
+										color: rgba($media-bg, 0.75);
+									}
+									.comment {
+										opacity: 0;
+									}
+								}
+							
+								.drill-icon {
+									font-size: 3em;
+									
+									.fa-drill-picture {
+										color: transparent;
+									}
+									.fa-drill-video {
+										color: rgba(255, 255, 255, 0.5);
+									}
+								}
+							}
+						
+							img {
+								width: 100%;
+								image-orientation: from-image;
+								outline: none;
+								border-radius: 3px;
+							}
+						
+							.comment {
+								position: absolute;
+								left: 0;
+								bottom: 0;
+								width: 100%;
+								line-height: normal;
+								box-sizing: border-box;
+								margin: 0;
+								padding: 0.5em;
+								text-align: justify;
+								background: rgba(255, 255, 255, 0.6);
+								border-radius: 0 0 3px 3px;
+								transition: all 0.3s;
+								opacity: 1;
+							}
+						}
+					}
+				}
+			
 				&.loading {
 					.body {
 						text-align: center;