Tweaks to asset listing

src/styles/_project.sass

@@ -152,6 +152,15 @@ body.blog
 	display: none
 
 ul.project-edit-tools
+	li:not(.disabled)
+		.btn
+			background-color: $white
+
+			&:hover
+				border-color: $primary
+				background-color: $white
+				color: $primary
+
 	li
 		&.button-save
 			&.field-error
@@ -239,9 +248,6 @@ ul.project-edit-tools
 	background-color: white
 
 #node-container
-	background-color: white
-	flex: 1
-
 	/* For error messages (403) and other overlaid text*/
 	#node-overlay
 		z-index: $z-index-base + 2
@@ -515,7 +521,6 @@ section.node-preview
 	background-color: black
 	color: $color-text-light-primary
 	display: flex
-	flex: 1
 	justify-content: center
 	max-height: 500px
 	min-height: 200px
@@ -638,11 +643,6 @@ section.node-preview-forbidden
 	hr
 		opacity: .5
 
-section.node-details-container
-	background-color: white
-
-	&.project
-		padding-bottom: 15px
 
 /* Narrower details for about page (since it doesn't have navtree) */
 body.about

src/styles/components/_card.sass

@@ -1,15 +1,6 @@
 .card-deck
 	// Custom, as of bootstrap 4.1.3 there is no way to do this.
-	&.card-3-columns
+	&.card-deck-responsive
-		@extend .row
-
-		.card
-			@extend .col-md-4
-
-			+media-lg
-				background: green
-
-	&.card-4-columns
 		@extend .row
 
 		.card

src/templates/_macros/_asset_list_item.pug

@@ -0,0 +1,41 @@
+include ../mixins/components
+
+| {% macro asset_list_item(asset, current_user) %}
+
+| {% set node_type = asset.properties.content_type if asset.properties.content_type else asset.node_type %}
+
++list-asset(
+	'{{ asset.name }}',
+	'{{ url_for_node(node=asset) }}',
+	"{% if asset.picture %}{{ asset.picture.thumbnail('m', api=api) }}{% endif %}",
+	"{{ node_type | undertitle }}",
+	"{{ asset._created | pretty_date }}")(
+	class="js-item-open pr-0 mx-0 mb-2 {% if asset.permissions.world %}free{% endif %}",
+	data-node_id="{{ asset._id }}",
+	title="{{ asset.name }}")
+
+	| {% if asset.properties.content_type == 'video' %}
+
+	| {% set view_progress = current_user.nodes.view_progress %}
+	| {% if asset._id in view_progress %}
+	| {% set progress = current_user.nodes.view_progress[asset._id] %}
+	| {% set progress_in_percent = progress.progress_in_percent %}
+	| {% set progress_done = progress.done %}
+	| {% endif %}
+
+	| {% 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")
+
+	| {% if progress.done %}
+	.card-label WATCHED
+	| {% endif %}
+	| {% endif %} {# endif progress #}
+	| {% endif %} {# endif video #}
+
+| {% endmacro %}

src/templates/_macros/_asset_video_progress.pug

@@ -1,24 +0,0 @@
-| {% macro video_progress_bar(video, current_user) %}
-
-| {% set view_progress = current_user.nodes.view_progress %}
-| {% if video._id in view_progress %}
-| {% set progress = current_user.nodes.view_progress[video._id] %}
-| {% set progress_in_percent = progress.progress_in_percent %}
-| {% set progress_done = progress.done %}
-| {% endif %}
-
-| {% 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")
-
-| {% if progress.done %}
-.card-label WATCHED
-| {% endif %}
-
-| {% endif %}
-| {% endmacro %}

src/templates/mixins/components.pug

@@ -48,9 +48,8 @@ mixin nav-secondary-link()
 		a.nav-link&attributes(attributes)
 			block
 
-// {# Takes as argument the number of columns to use in this deck. 1-6 #}
+mixin card-deck()
-mixin card-deck(columns)
+	.card-deck.card-padless.card-deck-responsive()&attributes(attributes)
-	.card-deck.card-padless(class='card-' + columns + '-columns')&attributes(attributes)
 		if block
 			block
 		else
@@ -73,6 +72,10 @@ mixin list-asset(name, url, image, type, date)
 		if image
 			.embed-responsive.embed-responsive-16by9
 				.card-img-top.embed-responsive-item(style="background-image: url(" + image + ")")
+		else
+			.card-img-top
+				.card-icon
+					i.pi-blender
 
 		.card-body.py-2
 			if name

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

@@ -1,26 +1,28 @@
-| {% from '_macros/_asset_video_progress.html' import video_progress_bar %}
+| {% from '_macros/_asset_list_item.html' import asset_list_item %}
 include ../../../mixins/components
 
 | {% block body %}
 #node-container
-	section.px-3.pt-3.d-flex
+	section.d-flex
-		h4 {{node.name}}
+		h4.p-4 {{node.name}}
-
-		.ml-auto
-			.btn.btn-sm.btn-browsetoggle(
-				title="Toggle between list/grid view",
-				data-toggle="tooltip",
-				data-placement="top")
-				i.pi-list
 
 	| {% if node.description %}
-	section.node-details-description.p-3
+	section.node-details-description.px-4
 		| {{ node | markdowned('description') }}
 	| {% endif %}
 
 	section.container-fluid
 		| {% if children %}
-		+card-deck(4)(class="pr-3 pl-1")
+
+		.d-flex.justify-content-end.mb-2
+			button.btn.btn-sm.btn-outline-secondary(
+				class="js-btn-browsetoggle",
+				title="Toggle between list/grid view",
+				data-toggle="tooltip",
+				data-placement="top")
+				i.pi-list
+
+		+card-deck(class="px-2")
 			| 	{% for child in children %}
 			| {# Browse type: List #}
 			a(
@@ -73,30 +75,7 @@ include ../../../mixins/components
 
 			| {# Browse type: Icon #}
 
-			| {% set node_type = child.properties.content_type if child.properties.content_type else child.node_type %}
+			| {{ asset_list_item(child, current_user) }}
-
-			| {% 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 %}
-			| {% endif %}
-			| {% endif %}
-
-			+list-asset(
-				'{{ child.name }}',
-				'{{ url_for_node(node=child) }}',
-				"{% if child.picture %}{{ child.picture.thumbnail('m', api=api) }}{% endif %}",
-				"{{ node_type | undertitle }}",
-				"{{ child._created | pretty_date }}")(
-				class="js-item-open pr-0 mx-0 mb-2 {% if child.permissions.world %}free{% endif %}",
-				data-node_id="{{ child._id }}",
-				title="{{ child.name }}")
-
-				| {% if child.properties.content_type == 'video' %}
-				| {{ video_progress_bar(child, current_user) }}
-				| {% endif %}
 
 			| {% endfor %}
 			| {% else %}
@@ -138,13 +117,13 @@ include ../../../mixins/components
 		function projectBrowseTypeIcon() {
 			$(".list-node-children-item.browse-list").hide();
 			$(".list-node-children-item.browse-icon").show();
-			$(".btn-browsetoggle").html('<i class="pi-list"></i>');
+			$(".js-btn-browsetoggle").html('<i class="pi-list"></i> List View');
 		};
 
 		function projectBrowseTypeList() {
 			$(".list-node-children-item.browse-list").show();
 			$(".list-node-children-item.browse-icon").hide();
-			$(".btn-browsetoggle").html('<i class="pi-layout"></i>');
+			$(".js-btn-browsetoggle").html('<i class="pi-layout"></i> Grid View');
 		};
 
 		function projectBrowseTypeCheck(){
@@ -184,7 +163,7 @@ include ../../../mixins/components
 			}
 		}
 
-		$('.btn-browsetoggle').on('click', function (e) {
+		$('.js-btn-browsetoggle').on('click', function (e) {
 			e.preventDefault();
 			projectBrowseToggle();
 		});

src/templates/nodes/view_base.pug

@@ -5,9 +5,8 @@
 	| {% block node_preview %}
 	| {% if node.picture %}
 	| {% if current_user.has_cap('subscriber') or node.permissions.world %}
-	section#node-preview.node-preview.image.js-node-preview-image
+	section.node-preview.image.js-node-preview-image
-		img.node-preview-thumbnail#node-preview-thumbnail(
+		img.node-preview-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}")
-			src="{{ node.picture.thumbnail('l', api=api) }}")
 	| {% else %}
 	| {% include 'nodes/custom/_node_preview_forbidden.html' %}
 	| {% endif %}
@@ -15,19 +14,20 @@
 	| {% endblock node_preview %}
 
 	| {% block node_details %}
-	section.node-details-container
 
 	| {# NAME #}
-		h4.pt-4.px-4 {{node.name}}
+	section.px-4
+		h4.pt-4.mb-3 {{node.name}}
 
 		| {# DESCRIPTION #}
 		| {% if node.description %}
-		.node-details-description.px-4
+		.node-details-description
 			| {{ node | markdowned('description') }}
 		| {% endif %}
 
 
 	| {# LICENSE #}
+	section
 		| {% if node.properties.license_type %}
 		a.node-details-license(
 			href="https://creativecommons.org/licenses/",
@@ -42,7 +42,7 @@
 
 
 	| {# DETAILS #}
-		.node-details-meta
+	section.node-details-meta
 		ul
 			| {% if node.has_method('PUT') and (node.properties.status != 'published') %}
 			li(class="status-{{ node.properties.status }}")

src/templates/projects/view_embed.pug

@@ -1,7 +1,7 @@
+| {% from '_macros/_asset_list_item.html' import asset_list_item %}
 include ../mixins/components
 
 | {% block body %}
-#node-container
 section.node-preview.project
 	| {% if header_video_file %}
 	video#videoplayer.video-js.vjs-fluid(
@@ -22,30 +22,21 @@ include ../mixins/components
 		img.header(src="{{ project.picture_header.thumbnail('l', api=api) }}")
 	| {% endif %}
 
-	section.node-details-container.project
+section.px-4
-		h2.px-3.pt-3
+	h4.pt-4
-			a.text-muted(href="{{ url_for( 'projects.view', project_url=project.url) }}") {{ project.name }}
+		a.text-muted(href="{{ url_for( 'projects.view', project_url=project.url) }}")
+			| {{ project.name }}
 
 	| {% if project.description %}
 	.node-details-description
 		| {{ project | markdowned('description') }}
 	| {% endif %}
 
-		| {# Until we implement urls for pages
-		a.learn-more(href="{{ url_for( 'projects.view', project_url=project.url) }}") LEARN MORE
-		| #}
-
-		.p-4
 	| {% if activity_stream %}
-			+card-deck(3)
+	+card-deck(class="pt-4 border-top")
 		| {% for n in activity_stream %}
 		| {% if n.node_type not in ['comment'] %}
-				+list-asset(
+		| {{ asset_list_item(n, current_user) }}
-					'{{ n.name }}',
-					'{{ url_for_node(node=n) }}',
-					"{% if n.picture %}{{ n.picture.thumbnail('l', api=api) }}{% endif %}",
-					"{% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %}",
-					"{{ n._updated | pretty_date }}")(class="{% if n.permissions.world %}free{% endif %}")
 		| {% endif %}
 		| {% endfor %}
 	| {% endif %}