Tweaks to group listing

Non-square thumbnails, always display icon type

src/styles/_config.sass

@@ -112,8 +112,9 @@ $node-type-comment: #66ccbd
 $node-type-group: #c3a280
 $node-type-post: #647bce
 
-$list-node-children-item-width: 160px
+$list-node-children-item-width: 200px
 $list-node-children-item-width_list: 48px
+$list-node-children-item-width_square: 160px
 $z-index-base: 13
 
 .container

src/styles/_project.sass

@@ -946,7 +946,6 @@ section.node-row
 
 			.node-title
 				color: $color-text-dark-primary
-				text-transform: capitalize
 				font:
 					family: $font-body
 					weight: 500
@@ -1743,14 +1742,15 @@ section.node-children
 
 			.list-node-children-item-thumbnail
 				width: 100%
+				height: $list-node-children-item-width
 
 				+media-sm
 					img
 						width: 100%
 
 				.list-node-children-item-thumbnail-icon i
-					position: relative
+					bottom: 30px
-					bottom: 10px
+
 			.list-node-children-item-name
 				bottom: 26px
 				width: 100%
@@ -1818,26 +1818,17 @@ section.node-children
 
 .list-node-children-item
 	float: left
-	margin: 10px 15px 10px 0
+	margin: 10px 10px 10px 0
 	border-radius: 3px
-
+	color: $color-text-dark
-	color: $color-background-nav
+	box-shadow: 2px 2px 0 rgba(black, .1)
-	background-color: darken(white, 6%)
-
-	box-shadow: 2px 2px 0 rgba(darken($color-background, 60%), .1)
 	width: $list-node-children-item-width
 	overflow: hidden
-	text-overflow: ellipsis
 
 	&:hover
 		color: darken($color-primary, 20%)
-
+		opacity: .9
-		& .list-node-children-item-name i
+		text-decoration: none
-			color: darken($color-primary, 20%)
-
-		& .list-node-children-item-thumbnail
-			& .list-node-children-item-thumbnail-icon
-				transform: translate(-50%, -50%) scale(1.1)
 
 	&:active
 		opacity: .8
@@ -1875,9 +1866,6 @@ section.node-children
 			.list-node-children-item-thumbnail
 				cursor: pointer
 
-				.list-node-children-item-thumbnail-icon
-					transform: translate(-50%, -50%) scale(1)
-
 		&:active
 			background-color: rgba($color-background, .5)
 		&:focus
@@ -1960,20 +1948,30 @@ section.node-children
 		justify-content: center
 
 		width: $list-node-children-item-width
-		height: $list-node-children-item-width
+		height: $list-node-children-item-width / 1.69
-		background-color: darken($color-background, 5%)
+		background-color: darken($color-background, 30%)
 		position: relative
 		overflow: hidden
 
+		img
+			height: 100%
+			+position-center-translate
+
 		& .list-node-children-item-thumbnail-icon
 			position: absolute
-			top: 50%
+			top: 0
-			left: 50%
+			left: 0
-			transform: translate(-50%, -50%)
+			right: 0
-			font-size: 4em
+			bottom: 0
+			font-size: 1.5em
 			color: white
-			text-shadow: 1px 1px 1px rgba(black, .2), 0 0 50px rgba(black, .3)
+			text-shadow: 1px 1px 0 rgba(black, .2)
-			transition: transform .1s ease-in-out
+			background-image: linear-gradient(10deg, darken($color-background, 55%) 0%, transparent 40%)
+
+			i
+				position: absolute
+				bottom: 5px
+				left: 5px
 
 		& .list-node-children-item-status
 			color: $color-text-light-primary
@@ -1997,33 +1995,26 @@ section.node-children
 		display: flex
 		align-items: center
 
-		background-color: darken(white, 6%)
+		// background-color: darken(white, 6%)
+		color: $color-text-light
+		text-shadow: 1px 1px 0 rgba(black, .2)
+		background-color: darken($color-background, 55%)
 
-		padding:
+		padding: 5px 10px
-			top: 5px
+		font-size: .85em
-			bottom: 5px
-		font-size: .9em
 		width: $list-node-children-item-width
 		max-width: $list-node-children-item-width
 
-		i
-			color: $color-text-dark-secondary
-			padding:
-				left: 7px
-				right: 3px
-			font-size: .9em
-
 		span
-			padding:
-				left: 0
-				right: 3px
 			+text-overflow-ellipsis
 	&.texture, &.hdri
 		margin: 5px 10px 5px 0
 		position: relative
+		width: $list-node-children-item-width
 		height: $list-node-children-item-width
 
 		.list-node-children-item-thumbnail
+			height: $list-node-children-item-width
 			background-color: $color-background-nav
 
 		&:hover

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

@@ -12,8 +12,8 @@
 	section.node-details-container.group
 		.node-details-meta.preview
 			ul.node-details-meta-list
-				li.node-details-meta-list-item.date(title="Created {{ node._created | pretty_date }}")
+				li.node-details-meta-list-item.date(title="Updated {{ node._updated | pretty_date }}")
-					| {{ node._updated | pretty_date }}
+					| {{ node._created | pretty_date }}
 
 				li.node-details-meta-list-item.author
 					| {{ node.user.full_name }}
@@ -53,32 +53,6 @@
 					src="{{ child.picture.thumbnail('t', api=api)}} ")
 				| {% endif %}
 
-				.list-node-children-item-thumbnail-icon
-					| {# If there's a type available, otherwise show a folder icon #}
-					| {% if child.properties.content_type %}
-
-					| {# Show an icon if there's no thumbnail #}
-					| {% if not child.picture %}
-					| {% if child.properties.content_type == 'image' %}
-					i.dark.pi-image
-					| {% elif child.properties.content_type == 'video' %}
-					i.dark.pi-film-thick
-					| {% elif child.properties.content_type == 'file' %}
-					i.dark.pi-document
-					| {% endif %}
-
-					| {% else %}
-					| {% if child.properties.content_type == 'video' %}
-					i.pi-play
-					| {% endif %}
-					| {% endif %}
-
-					| {% else %}
-					| {% if not child.picture %}
-					i.dark.pi-folder
-					| {% endif %}
-					| {% endif %}
-
 				| {% if child.permissions.world %}
 				.list-node-children-item-ribbon
 					span free
@@ -103,13 +77,7 @@
 				| {% endif %}
 				| {% endif %}
 
-				| {% if child._updated %}
+				span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
-				span(title="Updated on {{ child._created }}")  {{ child._updated | pretty_date }}
-				span.updated(title="Created on {{ child._updated }}") *
-				| {% else %}
-				span(title="Created on {{ child._created }}")  {{ child._created | pretty_date }}
-				| {% endif %}
-
 
 		| {# Browse type: Icon #}
 		a(href="{{ url_for_node(node=child) }}",
@@ -120,16 +88,16 @@
 
 				| {% if child.picture %}
 				img(
-					src="{{ child.picture.thumbnail('b', api=api)}} ")
+					src="{{ child.picture.thumbnail('m', api=api)}} ")
 				| {% endif %}
 
 				.list-node-children-item-thumbnail-icon
-					| {% if child.properties.content_type %}
+					| {% if child.properties.content_type and child.properties.content_type == 'video' %}
-
-					| {% if child.properties.content_type == 'video' %}
 					i.pi-play
-					| {% endif %}
+					| {% elif child.properties.content_type and child.properties.content_type == 'image' %}
-
+					i.pi-image
+					| {% elif child.properties.content_type and child.properties.content_type == 'file' %}
+					i.pi-file-archive
 					| {% else %}
 					i.pi-folder
 					| {% endif %}
@@ -144,17 +112,6 @@
 				| {% endif %}
 
 			.list-node-children-item-name
-
-				| {% if child.properties.content_type == 'video' %}
-				i.pi-film-thick
-				| {% elif child.properties.content_type == 'image' %}
-				i.pi-image
-				| {% elif child.properties.content_type == 'file' %}
-				i.pi-document
-				| {% else %}
-				i.pi-folder
-				| {% endif %}
-
 				span {{ child.name }}
 
 		| 	{% endfor %}

src/templates/nodes/custom/group_hdri/view_embed.jade

@@ -77,11 +77,8 @@
 						| {% endif %}
 					| {% endif %}
 
-				| {% if child.node_type == 'group_hdri' %}
 				.list-node-children-item-name
-					i.pi-folder-texture
 					span {{ child.name }}
-				| {% endif %}
 
 		| 	{% endif %}
 		| 	{% endfor %}