new lightbox interface v2

masks/project.html

@@ -476,6 +476,7 @@ function getPost(asPost) {
 	var $Post = $('<div>', {'class':'post '+asPost.type+(asPost.headerless?' headerless':'')});
 	var sRelTime = (asPost.relative_time!='')?((self.vars(['project', 'mode'])==self.consts.modes.histo)?asPost.formatted_time.substr(0, 10):asPost.relative_time):'';
 	var sAbsTime = asPost.formatted_time;
+	var sType = asPost.subtype || asPost.type;
 	var $Body = {};
 	
 	switch(asPost.type) {
@@ -538,7 +539,7 @@ function getPost(asPost) {
 	
 	$Post
 		.append($('<div>', {'class':'header'})
-			.append($('<span>', {'class':'index'}).addIcon('fa-'+asPost.type))
+			.append($('<span>', {'class':'index'}).addIcon('fa-'+sType))
 			.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+self.tmp('site_tz_notice'))))
 		.append($('<div>', {'class':'body'}).append($Body));
 	

script/lightbox.js

@@ -153,7 +153,10 @@
     };
 
     // Attach event handlers to the newly minted DOM elements
-    this.$overlay.hide().on('click', function() {
+    //ADDED-START
+    //this.$overlay.hide().on('click', function() {
+    this.$overlay.hide().add(this.$lightbox.find('.lb-dataContainer')).on('click', function() {
+    //ADDED-END
       self.end();
       return false;
     });
@@ -504,7 +507,7 @@
     function postResize() {
       //ADDED-START
       //self.$lightbox.find('.lb-dataContainer').width(newWidth);
-      self.$lightbox.height(newHeight);
+      self.$lightbox.find('.lb-dataContainer').height(newHeight);
       //ADDED-END
       self.$lightbox.find('.lb-prevLink').height(newHeight);
       self.$lightbox.find('.lb-nextLink').height(newHeight);

style/_fa.scss

@@ -44,6 +44,8 @@ $fa-css-prefix: fa;
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
 .#{$fa-css-prefix}-media:before { content: fa-content($fa-var-photo-video); }
+.#{$fa-css-prefix}-video:before { content: fa-content($fa-var-film); }
+.#{$fa-css-prefix}-image:before { content: fa-content($fa-var-image); }
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
 .#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }

style/_lightbox.scss

@@ -8,14 +8,17 @@
 }
 
 .lightbox {
-	top: 50%;
-	left: 0;
-	transform: translateY(-50%);
-	text-align: left;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	
 	
 	.lb-outerContainer {
 		margin: 0;
-		display: inline-block;
+		border-radius:0;
+		background-color: rgba(255, 255, 255, 0.5);
 		
 		.lb-image {
 			image-orientation: from-image;
@@ -53,10 +56,12 @@
 		padding: 0;
 		display: inline-block;
 		vertical-align: top;
-		width: 300px;
-		padding: 1em;
+		width: auto;
+		white-space: nowrap;
 		
 		.lb-data {
+			padding: 1em 0 0 1em;
+		
 			.lb-details {
 				float: none;
 				
@@ -66,6 +71,7 @@
 				}
 			}
 			.lb-closeContainer {
+				display: none !important;
 				margin-top: 2em;
 				
 				.lb-close {