Layout and styling of asset groups

src/styles/_apps_base.sass

@@ -429,15 +429,15 @@ $loader-bar-height: 2px
 		visibility: visible
 
 		&:before
-			animation: loader-bar-slide 2.5s linear infinite
+			animation: loader-bar-slide 2s linear infinite
 
 @keyframes loader-bar-slide
 	from
-		left: -$loader-bar-width
+		left: -($loader-bar-width / 2)
-		width: 0%
+		width: 3%
 
 	50%
-		width: 30%
+		width: 20%
 
 	70%
 		width: 70%

src/styles/_config.sass

@@ -150,3 +150,5 @@ $dropdown-item-padding-y: .4rem
 $tooltip-font-size: 0.83rem
 $tooltip-max-width: auto
 $tooltip-opacity: 1
+
+$nav-link-height: 37px

src/styles/_project.sass

@@ -141,13 +141,8 @@ body.blog
 
 /* Header with name and node edit tools */
 #project_context-header
-	transition: box-shadow 250ms ease-in-out
+	right: 0
 	z-index: $z-index-base + 3
-	left: 0
-	width: 100%
-
-	&.is-offset
-		box-shadow: 0 0 25px rgba(black, .2)
 
 
 /* Edit Asset buttons */
@@ -243,11 +238,6 @@ ul.project-edit-tools
 	height: 100%
 	background-color: white
 
-// Add padding to project_context because project_context-header is fixed on top.
-// It contains the New, Edit, Save Changes, etc. buttons.
-#project_context-header+#project_context
-	padding-top: $project_header-height
-
 #node-container
 	background-color: white
 	flex: 1
@@ -604,12 +594,6 @@ section.node-preview
 							color: $color-warning
 							margin-right: 10px
 
-	&.group
-		align-items: center
-		display: flex
-		padding: 20px
-		position: relative
-
 	&.project
 		background-color: black
 		width: 100%
@@ -670,8 +654,7 @@ body.about
 .node-title
 	+project-node-title
 
-section.node-details-container,
+section.node-details-container
-section.node-preview.group
 	position: relative
 
 	.node-details-header
@@ -684,24 +667,8 @@ section.node-preview.group
 			width: 100%
 			max-width: 100%
 
-	.node-details-meta-actions
-		margin-left: auto
-
-		.btn-browsetoggle
-			+button(lighten($color-background-nav, 20%), 3px)
-			width: 48px
-			text-align: center
-			padding: 2px 4px
-			i
-				font-size: 1.3em
-				padding: 0
-				margin: 0
-
-
 .node-details-description
 	+node-details-description
-	padding-left: 20px
-	padding-right: 20px
 
 .node-details-meta
 	background-color: $color-background-light
@@ -1029,12 +996,6 @@ a.learn-more
 							text-transform: capitalize
 
 
-section.node-children
-	&.group, &.storage
-		flex: 1
-		padding: 10px 0 25px 20px
-		+clearfix
-
 .list-node-children-container
 	position: relative
 	width: $list-node-children-item-width

src/styles/components/_card.sass

@@ -1,34 +1,66 @@
 .card-deck
 	// Custom, as of bootstrap 4.1.3 there is no way to do this.
 	&.card-3-columns
-		.card
+		@extend .row
-			min-width: 30%
+
-			max-width: 30%
+		.card
+			@extend .col-md-4
+
+			+media-lg
+				background: green
+
+	&.card-4-columns
+		@extend .row
+
+		.card
+			@extend .col-md-3
+			+media-xs
+				flex: 1 0 50%
+				max-width: 50%
+
+			+media-sm
+				flex: 1 0 33%
+				max-width: 33%
+
+			+media-md
+				flex: 1 0 25%
+				max-width: 25%
+
+			+media-lg
+				flex: 1 0 20%
+				max-width: 20%
 
-	.card.asset
-		margin-left: 10px
-		margin-right: 10px
 
 .card-padless
 	.card
-		border: none
+		@extend .border-0
 
 	.card-body
-		padding: 15px 0
+		@extend .px-0
 
-.card-fade
+.card-stretch
-	img
+	.card-body
-		opacity: .8
+		@extend .d-flex
-		transition: opacity ease-in-out 150ms
+		@extend .flex-column
+
+		.card-text
+			@extend .mt-auto
+
+.card-image-fade
+	.card-img-top
+		opacity: .9
 
 	&:hover
-		img
+		.card-img-top
 			opacity: 1
 
 
 .card.asset
 	color: $color-text
 
+	&:hover
+		text-decoration: none
+
 	&.free
 		overflow: hidden
 
@@ -38,8 +70,21 @@
 			padding: 2px 50px
 
 	.card-body
+		position: relative // for placing the progress
+
+		.card-text
 			font-size: $font-size-xs
 
 	.card-img-top
+		background-color: $color-background
 		background-size: cover
 		background-position: center
+
+	.progress
+		height: 3px
+		position: absolute
+		top: -3px
+		width: 100%
+
+.progress-bar
+	background-color: $primary

src/templates/mixins/components.pug

@@ -50,7 +50,7 @@ mixin nav-secondary-link()
 
 // {# Takes as argument the number of columns to use in this deck. 1-6 #}
 mixin card-deck(columns)
-	.card-deck.card-padless(class='card-' + columns + '-columns')
+	.card-deck.card-padless(class='card-' + columns + '-columns')&attributes(attributes)
 		if block
 			block
 		else
@@ -69,21 +69,21 @@ mixin card()
 			p No card content defined.
 
 mixin list-asset(name, url, image, type, date)
-	a(href=url).card.asset&attributes(attributes)
+	a(href=url, class=type).card.asset.card-stretch.card-image-fade&attributes(attributes)
 		if image
 			.embed-responsive.embed-responsive-16by9
 				.card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")
 
-		.card-body
+		.card-body.py-2
 			if name
-				h6.card-title.mb-1
+				.card-title.mb-1.font-weight-bold
 					=name
 
+			if block
+				block
+
 			ul.card-text.list-unstyled.d-flex.text-black-50
 				if type
 					li.pr-2=type
 				if date
 					li=date
-
-		if block
-			block

src/templates/nodes/custom/_scripts.pug

@@ -33,7 +33,7 @@ script(type="text/javascript").
 		} else if (node_type === 'group_hdri') {
 			node_type_str = 'HDRi Folder';
 		}
-		$('a', '.button-edit').html('<i class="pr-2 pi-edit button-edit-icon"></i> Edit ' + node_type_str);
+
 		$('a', '.button-delete').html('<i class="pr-2 pi-trash button-delete-icon"></i>Delete ' + node_type_str);
 
 		{% if parent %}

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

@@ -1,34 +1,31 @@
+include ../../../mixins/components
+
 | {% block body %}
 #node-container
+	section.px-3.pt-3.d-flex
+		h4 {{node.name}}
 
-	section.node-details-container
+		.ml-auto
-		.node-details-header
+			.btn.btn-sm.btn-browsetoggle(
-			.node-title#node-title
-				| {{node.name}}
-
-			.node-details-meta-actions
-				.btn-browsetoggle(
 				title="Toggle between list/grid view",
 				data-toggle="tooltip",
 				data-placement="top")
 				i.pi-list
 
 	| {% if node.description %}
-	.node-details-description
+	section.node-details-description.p-3
 		| {{ node | markdowned('description') }}
 	| {% endif %}
 
-
+	section.container-fluid
-	section.node-children.group
-
 		| {% if children %}
+		+card-deck(4)(class="pr-3 pl-1")
 			| 	{% for child in children %}
-
 			| {# Browse type: List #}
 			a(
 				href="{{ url_for_node(node=child) }}",
 				data-node_id="{{ child._id }}",
-			class="item_icon list-node-children-item browse-list")
+				class="js-item-open list-node-children-item browse-list")
 				.list-node-children-item-thumbnail
 
 					| {% if child.picture %}
@@ -61,6 +58,7 @@
 					| {% if child.properties.status != 'published' %}
 					span.status {{ child.properties.status }}
 					| {% endif %}
+
 					span.type
 						| {% if child.properties.content_type %}
 						| {{ child.properties.content_type | undertitle }} ·
@@ -73,57 +71,35 @@
 					span(title="Created on {{ child._created }}") {{ child._created | pretty_date }}
 
 			| {# Browse type: Icon #}
-		a(href="{{ url_for_node(node=child) }}",
-			data-node_id="{{ child._id }}",
-			title="{{ child.name }}",
-			class="item_icon list-node-children-item browse-icon {% if child.picture %}has-picture{% endif %}")
-			.list-node-children-item-thumbnail
 
-				| {% if child.picture %}
+			| {% set node_type = child.properties.content_type if child.properties.content_type else child.node_type %}
-				img(
-					src="{{ child.picture.thumbnail('m', api=api)}} ")
-				| {% else %}
-				.cloud-logo
-					i.pi-blender-cloud
-				| {% endif %}
-
-				.list-node-children-item-thumbnail-icon
-					| {% if child.properties.content_type and child.properties.content_type == 'video' %}
-					i.pi-play
-					| {% 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 %}
-
-				| {% if child.properties.status != 'published' %}
-				.list-node-children-item-status {{ child.properties.status }}
-				| {% endif %}
-
-				| {% if child.permissions.world %}
-				.list-node-children-item-ribbon
-					span free
-				| {% endif %}
-
-			.list-node-children-item-name
-				span {{ child.name }}
 
 			| {% if child.properties.content_type == 'video' %}
-			|     {% set view_progress = current_user.nodes.view_progress %}
 			| {% if child._id in view_progress %}
 			| {% set progress = current_user.nodes.view_progress[child._id] %}
 			| {% set progress_in_percent = progress.progress_in_percent %}
 			| {% set progress_done = progress.done %}
-			//- TODO(Pablo): turn this into a nice progress bar
-			span.progress(class="{% if progress.done %}done{% endif %}")
-				|     {{ progress_in_percent }}%
-			|     {% else %}
-			span.jemoeder no progress because never watched
 			| {% endif %}
-			| {% else %}
+			| {% endif %}
-			span.jemoeder no progress because not video
+
+			+list-asset(
+				'{{ child.name }}',
+				'{{ url_for_node(node=child) }}',
+				"{% if child.picture %}{{ child.picture.thumbnail('m', api=api) }}{% endif %}",
+				"{{ node_type | undertitle }}",
+				"{{ child._updated | pretty_date }}")(
+				class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %} {% if progress and progress.done %}done{% endif %}",
+				data-node_id="{{ child._id }}",
+				title="{{ child.name }}")
+
+				| {% if progress %}
+				.progress.rounded-0
+					.progress-bar(
+						role="progressbar",
+						style="width: {{ progress_in_percent }}%;",
+						aria-valuenow="{{ progress_in_percent }}",
+						aria-valuemin="0",
+						aria-valuemax="100")
 				| {% endif %}
 
 			| 	{% endfor %}
@@ -136,7 +112,7 @@
 		// Generate GA pageview
 		ga('send', 'pageview', location.pathname);
 
-		$('a.item_icon').unbind("click")
+		$('a.js-item-open').unbind("click")
 						.click(function(e){
 			e.preventDefault();
 

src/templates/nodes/error_type_not_found.pug

@@ -10,7 +10,7 @@
 				| {{node.name}}
 
 		| {% if node.description %}
-		.node-details-description#node-description
+		.node-details-description
 			| {{node.description}}
 		| {% endif %}
 

src/templates/nodes/view_base.pug

@@ -18,14 +18,11 @@
 	section.node-details-container
 
 		| {# NAME #}
-		.node-details-header
+		h4.pt-4.px-4 {{node.name}}
-			.node-title#node-title
-				| {{node.name}}
-
 
 		| {# DESCRIPTION #}
 		| {% if node.description %}
-		.node-details-description#node-description
+		.node-details-description.px-4
 			| {{ node | markdowned('description') }}
 		| {% endif %}