Work in progress in blurring asset preview and minor CSS/template cleanups

src/styles/_project.sass

@@ -940,37 +940,35 @@ section.node-preview
 	iframe
 		width: 100%
 
-	&.image,
+	min-height: 200px
-	&.file,
+	flex: 1
-		min-height: 200px
+	max-height: 500px
-		flex: 1
+	background-color: black
-		max-height: 500px
+	display: flex
-		background-color: black
+	justify-content: center
-		display: flex
+	align-items: center
-		justify-content: center
-		align-items: center
 
-		cursor: zoom-in
+	cursor: zoom-in
+
+	+media-md
+		max-height: $node-preview-max-height-md
+	+media-lg
+		max-height: $node-preview-max-height-lg
+
+	img
+		display: block
+		max-height: $node-preview-max-height-lg
+		max-width: 100%
+		object-fit: scale-down
+
+		+media-xs
+			width: 100%
 
 		+media-md
 			max-height: $node-preview-max-height-md
 		+media-lg
 			max-height: $node-preview-max-height-lg
 
-		img
-			display: block
-			max-height: $node-preview-max-height-lg
-			max-width: 100%
-			object-fit: scale-down
-
-			+media-xs
-				width: 100%
-
-			+media-md
-				max-height: $node-preview-max-height-md
-			+media-lg
-				max-height: $node-preview-max-height-lg
-
 	&.video
 		background-color: black
 		position: relative
@@ -1041,6 +1039,22 @@ section.node-preview
 			width: 100%
 
 
+	&.image.node-preview-blur
+		cursor: default
+		min-height: 400px
+		position: relative
+
+		img
+			height: 130%
+			left: -60px
+			max-width: initial
+			filter: blur(30px)
+			object-fit: cover
+			position: absolute
+			top: -60px
+			width: 130%
+
+
 section.node-details-container
 	background-color: white
 
@@ -1090,26 +1104,18 @@ section.node-preview.group
 				border-radius: 3px
 				cursor: default
 
-	&.group
+	.node-details-meta-actions
-		.node-details-meta.preview
+		margin-left: auto
-			.node-details-meta-list
-				display: inline-block
 
-				> li
+		.btn-browsetoggle
-					padding: 0 5px
+			+button(lighten($color-background-nav, 20%), 3px)
-
+			width: 48px
-			.node-details-meta-actions
+			text-align: center
-				display: inline-block
+			padding: 2px 4px
-
+			i
-				.btn-browsetoggle
+				font-size: 1.3em
-					+button(lighten($color-background-nav, 20%), 3px)
+				padding: 0
-					width: 48px
+				margin: 0
-					text-align: center
-					padding: 2px 4px
-					i
-						font-size: 1.3em
-						padding: 0
-						margin: 0
 
 	&.project
 		.node-details-title
@@ -1191,7 +1197,6 @@ section.node-preview.group
 						span
 							display: inline-block
 
-
 				&.type
 					text-transform: uppercase
 					padding: 0 5px 0 15px

src/templates/nodes/custom/_node_details.pug

@@ -1,3 +1,12 @@
+.node-details-header
+	.node-title#node-title
+		| {{node.name}}
+
+| {% if node.description %}
+.node-details-description#node-description
+	| {{ node.description | markdown }}
+| {% endif %}
+
 .node-details-meta
 	ul
 		| {% if node.has_method('PUT') and (node.properties.status != 'published') %}

src/templates/nodes/custom/_scripts.pug

@@ -41,7 +41,7 @@ script(type="text/javascript").
 		{% endif %}
 
 
-		// If we are im preview mode, update the image source
+		// If we are in preview mode, update the image source
 		if (page_overlay.classList.contains('active')) {
 			var node_preview = document.getElementById('node-preview');
 
@@ -73,7 +73,7 @@ script(type="text/javascript").
 					.html('<div class="nav-prev"></div><img src="' + src + '"/><div class="nav-next"></div>');
 			}
 
-			$('#node-preview.image, #node-preview.file').click(function(e){
+			$('.js-node-preview-image').click(function(e){
 				e.preventDefault();
 				e.stopPropagation();
 

src/templates/nodes/custom/asset/file/view_embed.pug

@@ -9,18 +9,7 @@
 			src="{{ node.picture.thumbnail('l', api=api) }}")
 	| {% endif %}
 
-
+	section.node-details-container
-	section.node-details-container.file
-
-		.node-details-header
-			.node-title#node-title
-				| {{node.name}}
-
-		| {% if node.description %}
-		.node-details-description#node-description
-			| {{ node.description | markdown }}
-		| {% endif %}
-
 		include ../../_node_details
 
 		#comments-embed

src/templates/nodes/custom/asset/image/view_embed.pug

@@ -4,23 +4,18 @@
 	#node-overlay
 
 	| {% if node.picture %}
-	section#node-preview.node-preview.image
+	| {% if current_user.has_cap('subscriber') %}
+	section#node-preview.node-preview.image.js-node-preview-image
 		img.node-preview-thumbnail#node-preview-thumbnail(
 			src="{{ node.picture.thumbnail('l', api=api) }}")
+	| {% else %}
+	section#node-preview.node-preview.image.node-preview-blur
+		img.node-preview-thumbnail#node-preview-thumbnail(
+			src="{{ node.picture.thumbnail('t', api=api) }}")
+	| {% endif %}
 	| {% endif %}
 
-
+	section.node-details-container
-	section.node-details-container.image
-
-		.node-details-header
-			.node-title#node-title
-				| {{node.name}}
-
-		| {% if node.description %}
-		.node-details-description#node-description
-			| {{ node.description | markdown }}
-		| {% endif %}
-
 		include ../../_node_details
 
 		#comments-embed

src/templates/nodes/custom/group/view_embed.pug

@@ -1,11 +1,11 @@
 | {% block body %}
 #node-container
 
-	section.node-preview.group
+	section.node-details-container
-		.node-title#node-title
+		.node-details-header
-			| {{node.name}}
+			.node-title#node-title
+				| {{node.name}}
 
-		.node-details-meta.preview
 			.node-details-meta-actions
 				.btn-browsetoggle(
 					title="Toggle between list/grid view",
@@ -13,10 +13,11 @@
 					data-placement="top")
 					i.pi-list
 
-	| {% if node.description %}
+		| {% if node.description %}
-	.node-details-description
+		.node-details-description#node-description
-		| {{ node.description | markdown }}
+			| {{ node.description | markdown }}
-	| {% endif %}
+		| {% endif %}
+
 
 	section.node-children.group