Use bootstrap classes where possible

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

@@ -78,8 +78,8 @@ function containerResizeY(window_height){
 		);
 
 		$('#project_nav-container, #project_tree, .project_split').css(
-			{'max-height': (window_height_minus_nav - 50) + 'px',
+			{'max-height': (window_height_minus_nav) + 'px',
-			 'height': (window_height_minus_nav - 50) + 'px'}
+			 'height': (window_height_minus_nav) + 'px'}
 		);
 
 		if (container_height > parseInt($('#project-container').css("min-height"))) {

src/styles/_apps_base.sass

@@ -425,6 +425,7 @@ $loader-bar-height: 2px
 
 	&.active
 		display: block
+		height: $loader-bar-height
 		visibility: visible
 
 		&:before

src/styles/components/_navbar.sass

@@ -139,13 +139,14 @@ $nav-secondary-bar-size: -2px
 		transition: box-shadow 150ms ease-in-out
 		box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
 
+	.nav-link:hover,
+	.nav-link.active,
+	.nav-item.dropdown.show .nav-link
 		// Blue bar on the bottom.
-		&:hover,
+		box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary
-		&.active
-			box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary
 
-			i
+		i
-				color: $primary
+			color: $primary
 
 	&.nav-secondary-vertical
 		align-items: flex-start
@@ -163,6 +164,13 @@ $nav-secondary-bar-size: -2px
 			&.active
 				box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary
 
+	&.nav-main
+		.nav-link
+			color: $color-text-dark-secondary
+
+			&:hover
+				color: $body-color
+
 // Strange 1px offset when nav-secondary is in the topbar.
 // To fix .nav-link and .nav-item must be height: 100%, but this
 // makes it misalign vertically since nav.navbar has align-items: center.

src/styles/plugins/_jstree.sass

@@ -33,11 +33,10 @@ $tree-color-highlight-background-text: $primary
 
 		&[data-node-type="page"],
 		&[data-node-type="blog"]
-			color: darken($tree-color-highlight, 5%)
 			font-weight: bold
 
 			.jstree-anchor
-				padding: 5px 8px 1px 8px
+				padding: 0 6px
 
 				&:after
 					top: 3px !important

src/templates/nodes/custom/_scripts.pug

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

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

@@ -11,19 +11,18 @@ header
 #node-container
 	#node-overlay
 
-	section.node-details-container.page
+	.node-details-container.page.expand-image-links.imgs-fluid
 
-		.node-details-header
+		h2.pt-3.text-center {{node.name}}
-			.node-title#node-title
+
-				| {{node.name}}
+		hr
 
 		| {% if node.description %}
-		.node-details-description#node-description
+		| {{ node | markdowned('description') }}
-			| {{ node | markdowned('description') }}
 		| {% endif %}
 
-		.node-details-meta.footer
+		small.text-muted
-			span.updated(title="created {{ node._created | pretty_date }}") updated {{ node._updated | pretty_date }}
+			span(title="created {{ node._created | pretty_date }}") Updated {{ node._updated | pretty_date }}
 
 include ../_scripts
 

src/templates/projects/edit.pug

@@ -5,7 +5,7 @@
 
 | {% block project_context_header %}
 #project_context-header.d-flex.justify-content-end.position-fixed.bg-white
-	ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end(
+	ul.d-flex.list-unstyled.py-1.px-2.mb-0.h-auto.justify-content-end(
 		class="project-edit-tools disabled")
 
 		li.button-cancel
@@ -21,14 +21,16 @@
 				class="project-mode-edit",
 				href="#",
 				title="Save changes")
-				i.button-save-icon.pi-check
+				i.pi-check.pr-2.button-save-icon
 				| Save Changes
 | {% endblock %}
 
 | {% block project_context %}
-.row
+.container-fluid
-	.col-md-12
+	.row
-		h5.pt-3.pl-3 Project Overview
+		.col-md-12
+			h5.pl-2.mb-0 Project Overview
+
 #node-edit-container
 	form(
 		id="node-edit-form"
@@ -86,7 +88,7 @@
 
 		hr
 
-		ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end(
+		ul.d-flex.list-unstyled.py-1.px-2.mb-0.h-auto.justify-content-end(
 			class="project-edit-tools disabled")
 			li.button-cancel
 				a#item_cancel.project-mode-edit.btn.btn-link(
@@ -101,7 +103,7 @@
 					class="project-mode-edit",
 					href="#",
 					title="Save changes")
-					i.button-save-icon.pi-check
+					i.pi-check.pr-2.button-save-icon
 					| Save Changes
 
 | {% endblock %}