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

src/styles/_project.sass

@@ -940,8 +940,6 @@ section.node-preview
 	iframe
 		width: 100%
 
-	&.image,
-	&.file,
 	min-height: 200px
 	flex: 1
 	max-height: 500px
@@ -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,16 +1104,8 @@ section.node-preview.group
 				border-radius: 3px
 				cursor: default
 
-	&.group
-		.node-details-meta.preview
-			.node-details-meta-list
-				display: inline-block
-
-				> li
-					padding: 0 5px
-
 	.node-details-meta-actions
-				display: inline-block
+		margin-left: auto
 
 		.btn-browsetoggle
 			+button(lighten($color-background-nav, 20%), 3px)
@@ -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-details-header
 			.node-title#node-title
 				| {{node.name}}
 
-		.node-details-meta.preview
 			.node-details-meta-actions
 				.btn-browsetoggle(
 					title="Toggle between list/grid view",
@@ -14,10 +14,11 @@
 					i.pi-list
 
 		| {% if node.description %}
-	.node-details-description
+		.node-details-description#node-description
 			| {{ node.description | markdown }}
 		| {% endif %}
 
+
 	section.node-children.group
 
 		| {% if children %}