Asset: style and cleanup listing

Font pillar aliases for asset icons

src/scripts/tutti/1_project-navigation.js

@@ -66,10 +66,9 @@ function containerResizeY(window_height){
 
 	var project_container = document.getElementById('project-container');
 	var container_offset = project_container.offsetTop;
-	var nav_header_height = 40;
 	var container_height = window_height - container_offset.top;
-	var container_height_wheader = window_height - container_offset.top - nav_header_height;
+	var container_height_wheader = window_height - container_offset;
-	var window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width
+	var window_height_minus_nav = window_height - container_offset;
 
 	if ($(window).width() > 768) {
 		$('#project-container').css(
@@ -77,13 +76,14 @@ function containerResizeY(window_height){
 			 'height': window_height_minus_nav + 'px'}
 		);
 
-		$('#project_nav-container, #project_tree, .project_split').css(
+		$('#project_nav-container, #project_tree').css(
 			{'max-height': (window_height_minus_nav) + 'px',
 			 'height': (window_height_minus_nav) + 'px'}
 		);
 
 		if (container_height > parseInt($('#project-container').css("min-height"))) {
 			if (typeof projectTree !== "undefined"){
+
 				$(projectTree).css(
 					{'max-height': container_height_wheader + 'px',
 					 'height': container_height_wheader + 'px'}

src/styles/_project.sass

@@ -24,6 +24,7 @@ body.blog
 	flex-direction: row
 	min-height: 300px
 	position: relative
+	overflow-y: auto
 	z-index: $z-index-base
 
 	+media-xs
@@ -216,9 +217,6 @@ ul.project-edit-tools
 						color: $primary
 						text-decoration: none
 
-					i
-						padding-right: 10px
-
 	/* Icons per asset type. */
 	i
 		&.icon-group:after
@@ -520,11 +518,11 @@ section.node-preview
 	align-items: center
 	background-color: black
 	color: $color-text-light-primary
-	display: flex
+	// display: flex
 	justify-content: center
 	max-height: 500px
-	min-height: 200px
+	// min-height: 200px
-	overflow: hidden
+	// overflow: hidden
 
 	iframe
 		width: 100%
@@ -545,6 +543,8 @@ section.node-preview
 
 	&.image
 		cursor: zoom-in
+		display: flex
+		overflow: hidden
 
 	&.video
 		background-color: black
@@ -671,26 +671,16 @@ section.node-details-container
 	+node-details-description
 
 .node-details-meta
-	background-color: $color-background-light
-	border-bottom: thin solid $color-background
-	display: flex
-	flex-direction: column
-	font-weight: lighter
-	padding: 10px 20px
-
 	> ul
 		align-items: center
 		display: flex
-		list-style-type: none
-		margin: 0
-		padding: 0
 
 		> li
 			align-items: baseline
 			color: $color-text-dark-secondary
 			display: flex
-			padding-left: 10px
+			padding-left: 5px
-			margin-left: 10px
+			margin-left: 5px
 
 			&:first-child
 				margin-left: 0
@@ -765,33 +755,19 @@ section.node-details-container
 					color: $color-text-dark
 
 .node-details-license
-	align-items: center
+	color: $color-text-dark-secondary
-	border-bottom: thin solid $color-background
-	color: $color-text-dark
-	display: flex
-	padding: 5px 20px
-	font-size: $font-size-sm
-
 	&:hover
-		color: $color-text-dark
+		color: $primary
 
-	span.type
 	i
-			color: $color-text-dark-primary
 		font-size: 1.2rem
-			margin-left: -5px
+		margin-left: -15px
-			padding-right: 10px
 
 		&:after
-				top: 2px
 			left: -22px
 			position: relative
-			&:before
+			top: 1px
-				top: 2px
-				position: relative
 
-		span
-			text-transform: uppercase
 
 section.node-details-container
 	&.storage

src/styles/components/_card.sass

@@ -29,21 +29,11 @@
 	.card-body
 		@extend .px-0
 
-.card-stretch
-	.card-body
-		@extend .d-flex
-		@extend .flex-column
-
-		.card-text
-			@extend .mt-auto
 
 .card-image-fade
-	.card-img-top
-		opacity: .9
-
 	&:hover
 		.card-img-top
-			opacity: 1
+			opacity: .9
 
 
 .card.asset
@@ -71,14 +61,22 @@
 		background-size: cover
 		background-position: center
 
+
 	.progress
 		height: 4px
 		position: absolute
 		top: -4px
 		width: 100%
 
-	&.group
+.card-img-top
+	&.card-icon
+		display: flex
+		align-items: center
+		justify-content: center
+		font-size: 2em
 
+		i
+			opacity: .2
 
 .card-label
 	background-color: rgba($black, .5)

src/styles/font-pillar.sass

@@ -39,12 +39,10 @@ $pillar-font-path: "../font" !default
     display: inline-block
     text-decoration: inherit
     width: 1em
-    margin-right: .2em
     text-align: center
     font-variant: normal
     text-transform: none
     line-height: 1em
-    margin-left: .2em
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
     position: relative
@@ -55,10 +53,28 @@ $pillar-font-path: "../font" !default
 .pi-svnman:before
   content: '\f1c0'
 
+/* Assets */
+.pi-group
+  @extend .pi-folder
+.pi-video
+  @extend .pi-film-thick
+.pi-file
+  @extend .pi-file-archive
+.pi-asset
+  @extend .pi-file-archive
+.pi-group_texture
+  @extend .pi-folder-texture
+.pi-post
+  @extend .pi-newspaper
+.pi-page
+  @extend .pi-document
+
+/* License */
 .pi-license-cc-zero:before
   content: '\e85a'
 .pi-license-cc-sa:before
   content: '\e858'
+  top: 1px
 .pi-license-cc-nd:before
   content: '\e859'
 .pi-license-cc-nc:before

src/templates/_macros/_add_new_menu.pug

@@ -14,7 +14,7 @@ li(class="button-{{ node_type['name'] }}")
 		data-node-type-name="{{ node_type['name'] }}",
 		data-toggle="tooltip",
 		data-placement="left")
-		i.pi(class="icon-{{ node_type['name'] }}")
+		i.pi(class="pi-{{ node_type['name'] }}")
 		| {% if node_type_name == 'group_texture' %}
 		| Texture Folder
 		| {% elif node_type_name == 'group_hdri' %}

src/templates/_macros/_asset_list_item.pug

@@ -4,15 +4,27 @@ include ../mixins/components
 
 | {% set node_type = asset.properties.content_type if asset.properties.content_type else asset.node_type %}
 
-+list-asset(
+a.card.asset.card-image-fade.pr-0.mx-0.mb-2(
-	'{{ asset.name }}',
+	class="js-item-open {% if asset.permissions.world %}free{% endif %}",
-	'{{ 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 }}")
+	title="{{ asset.name }}",
+	href='{{ url_for_node(node=asset) }}')
+	.embed-responsive.embed-responsive-16by9
+		| {% if asset.picture %}
+		.card-img-top.embed-responsive-item(style="background-image: url({{ asset.picture.thumbnail('m', api=api) }})")
+		| {% else %}
+		.card-img-top.card-icon.embed-responsive-item
+			i(class="pi-{{ node_type }}")
+		| {% endif %}
+
+	.card-body.py-2.d-flex.flex-column
+		.card-title.mb-1.font-weight-bold
+			| {{ asset.name }}
+
+		ul.card-text.list-unstyled.d-flex.text-black-50.mt-auto
+			li.pr-2 {{ node_type | undertitle }}
+			li {{ asset._created | pretty_date }}
+
 
 		| {% if asset.properties.content_type == 'video' %}
 

src/templates/mixins/components.pug

@@ -68,25 +68,6 @@ mixin card()
 			p No card content defined.
 
 mixin list-asset(name, url, image, type, date)
-	a(href=url).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 + ")")
-		else
-			.card-img-top
-				.card-icon
-					i.pi-blender
-
-		.card-body.py-2
-			if name
-				.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

src/templates/nodes/view_base.pug

@@ -26,24 +26,20 @@
 		| {% endif %}
 
 
-	| {# LICENSE #}
+	| {# DETAILS #}
-	section
+	section.node-details-meta.px-4.py-2
+		ul.list-unstyled.m-0
 			| {% if node.properties.license_type %}
+			li
 				a.node-details-license(
 					href="https://creativecommons.org/licenses/",
-			target="_blank")
+					target="_blank",
-			span.type
+					title="{{ node.properties.license_type }} {% if node.properties.license_notes %}{{ node.properties.license_notes }}{% endif %}",
+					data-toggle="tooltip",
+					data-placement="top")
 					i(class="pi-license-{{ node.properties.license_type }}")
-				| License <span>{{ node.properties.license_type }}</span>
-			| {% if node.properties.license_notes %}
-			| &mdash; {{ node.properties.license_notes }}
-			| {% endif %}
 			| {% endif %}
 
-
-	| {# DETAILS #}
-	section.node-details-meta
-		ul
 			| {% if node.has_method('PUT') and (node.properties.status != 'published') %}
 			li(class="status-{{ node.properties.status }}")
 				| {{ node.properties.status | undertitle }}
@@ -63,6 +59,8 @@
 					| Shared
 			| {% endif %}
 
+
+
 			li.left-side
 
 			| {% if node.file %}

src/templates/projects/view_embed.pug

@@ -4,7 +4,8 @@ include ../mixins/components
 | {% block body %}
 section.node-preview.project
 	| {% if header_video_file %}
-	video#videoplayer.video-js.vjs-fluid(
+	.embed-responsive.embed-responsive-16by9
+		video#videoplayer.video-js.vjs-fluid.embed-responsive-item(
 			controls,
 			data-setup="{}",
 			preload="auto",