add picture comment on lightbox fullscreen

masks/project.html

@@ -177,7 +177,7 @@ function initPage(asHash) {
 			fadeDuration: 300,
 			imageFadeDuration: 400,
 			positionFromTop: 0,
-			resizeDuration: 600,
+			resizeDuration: 400,
 			hasVideo: true
 		});
 
@@ -954,6 +954,11 @@ function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
 function getMediaLink(asData, sType) {
 	var bTimeDiff = (asData.posted_on_formatted && asData.posted_on_formatted_local != asData.posted_on_formatted);
 
+	var $Comment = (!asData.comment || asData.comment == '')?'':
+		$('<span>', {'class': 'lb-caption-line comment', 'title': asData.comment})
+			.addIcon('fa-post fa-lg fa-fw', true)
+			.append(asData.comment);
+
 	var $PostedOn =
 		$('<span>', {'class': 'lb-caption-line', title: bTimeDiff?oSpot.lang('local_time', asData.posted_on_formatted_local):''})
 			.addIcon('fa-upload fa-lg fa-fw', true)
@@ -964,7 +969,7 @@ function getMediaLink(asData, sType) {
 			.addIcon('fa-'+asData.subtype+'-shot fa-lg fa-fw', true)
 			.append(asData.taken_on_formatted);
 
-	var $Title = $('<div>').append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn);
+	var $Title = $('<div>').append($Comment).append(sType=='marker'?$TakenOn:$PostedOn).append(sType=='marker'?$PostedOn:$TakenOn);
 	var $Link =
 		$('<a>', {
 			'class': 'drill',

style/_common.scss

@@ -41,6 +41,12 @@
 	-webkit-filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, $opacity));
 }
 
+@mixin no-text-overflow() {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
 @keyframes spotlogo {
     0% {
         transform: scale(1);

style/_lightbox.scss

@@ -19,7 +19,7 @@
 	justify-content: center;
 	width: 100%;
 	height: 100%;
-	
+
 	&.vertical {
 		flex-direction: column;
 		
@@ -29,16 +29,24 @@
 			
 			.lb-data {
 				.lb-details {
-					display: inline;
+					display: inline-block;
+					width: calc(100% - 1.25rem);
 					
-					.lb-caption-line {
+					.lb-caption {
-						padding-right: 1em;
+						.lb-caption-line {
+							display: inline-block;
+							padding-right: 1em;
+							line-height: 1.33333333333em; //icon height
+							overflow: hidden;
+							
+							&.comment {
+								max-width: 50%;
+							}
+						}
 					}
 				}
 			
 				.lb-closeContainer {
-					display: inline;
-					
 					.lb-close {
 						text-align: right;
 					}
@@ -57,16 +65,20 @@
 				.lb-caption-line {
 					display: block;
 					margin-top: 1em;
+					line-height: 1.33333333em;
 				}
 
 				.lb-closeContainer .lb-close {
 					margin-top: 1em;
 					float: none;
+					text-align: left;
 				}
 			}
 		}
 	}
 	
+	/* Image */
+
 	.lb-outerContainer {
 		margin: 0;
 		border-radius:0;
@@ -124,7 +136,8 @@
 			}
 		}
 	}
-	
+	/* Titles */
+
 	.lb-dataContainer {
 		margin: 0;
 		padding: 0;
@@ -133,27 +146,34 @@
 		
 		.lb-data {
 			text-align: left;
-			padding: 0.5em;
+			padding: 0.5rem 0.5rem 0 0.5rem;
 			
 			.lb-details {
 				float: none;
 				
 				.lb-caption-line {
 					cursor: default;
+
+					&:first-child {
+						margin-top: 0;
+					}
+
+					&.comment {
+						@include no-text-overflow();
+					}
 				}
 			
-				.lb-caption-line:first-child {
-					margin-top: 0;
-				}
-				
 				.lb-number {
 					display: none !important;
 				}
 			}
 			.lb-closeContainer {
 				color: white;
-				font-size: 13px;
+				font-size: 1em;
 				line-height: 1em;
+				width: 1.25em;
+				vertical-align: top;
+				display: inline-block;
 				
 				.lb-close {
 					@include lightbox-icon(close);
@@ -161,7 +181,7 @@
 					width: 1.25em;
 					height: auto;
 					font-size: 1.3333333333em;
-					text-align: center;
+					line-height: 1em;
 				}
 			}
 		}

style/_mask_project.scss

@@ -213,9 +213,7 @@ $legend-color: $post-color;
 				}
 
 				h1, .description {
-					text-overflow: ellipsis;
+					@include no-text-overflow();
-					overflow: hidden;
-					white-space: nowrap;
 				}
 				.body {
 					padding-left: calc(1.25em*1.4 + #{$elem-spacing} );
@@ -303,9 +301,7 @@ $legend-color: $post-color;
 	}
 
 	#title {
-		text-overflow: ellipsis;
+		@include no-text-overflow();
-		overflow: hidden;
-		white-space: nowrap;
 		line-height: $button-width;
 		height: $button-width;
 		padding: 0 $block-spacing;
@@ -491,9 +487,7 @@ $legend-color: $post-color;
 						display: inline-block;
 						cursor: default;
 						font-size: 0.8em;
-						text-overflow: ellipsis;
+						@include no-text-overflow();
-						overflow: visible;
-						white-space: nowrap;
 						padding: $elem-spacing 0px;
 
 						&.index {
@@ -790,9 +784,7 @@ $legend-color: $post-color;
 						cursor: pointer;
 
 						& > div {
-							text-overflow: ellipsis;
+							@include no-text-overflow();
-							overflow: hidden;
-							white-space: nowrap;
 						}
 					}
 

style/_mobile.scss

@@ -3,7 +3,7 @@
 	$panel-width: "100vw - #{$button-width} - 2 * #{$block-spacing}";
 
 	.desktop {
-		display: none;
+		display: none !important;
 	}
 
 	#projects {
@@ -67,10 +67,14 @@
 			text-align: center;
 		}
 	}
+
+	.lightbox.vertical .lb-dataContainer .lb-data .lb-details .lb-caption-line.comment {
+		display: none;
+	}
 }
 
 @media only screen and (min-width: 801px) {
 	.mobile {
-		display: none;
+		display: none !important;
 	}
 }