Project Edit: Cleanup and styling

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

@@ -66,15 +66,11 @@ function containerResizeY(window_height){
 
 	var project_container = document.getElementById('project-container');
 	var container_offset = project_container.offsetTop;
-	// TODO (pablo) - see if it's used at all
-	// var nav_header_height = $('#project_context-header').height();
 	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 window_height_minus_nav = window_height - nav_header_height - 1; // 1 is border width
 
-	$('#project_context-header').width($('#project_context-container').width());
-
 	if ($(window).width() > 768) {
 		$('#project-container').css(
 			{'max-height': window_height_minus_nav + 'px',

src/styles/_project-sharing.sass

@@ -93,15 +93,6 @@ ul.sharing-users-list
 						color: lighten($color-danger, 10%)
 
 
-.sharing-users-info
-	padding-left: 15px
-	border-left: thin solid $color-text-dark-hint
-
-	p
-		font:
-			size: 1.1em
-			weight: 300
-
 .sharing-users-search
 	.disabled
 		color: $color-text-dark-secondary
@@ -158,24 +149,26 @@ ul.list-generic
 	list-style: none
 
 	> li
-		padding: 5px 0
-		display: flex
 		align-items: center
 		border-top: thin solid $color-background
+		display: flex
+		padding: 5px 0
 
 		&:first-child
 			border-top: none
 
 		&:hover .item a
-			color: $color-primary
+			color: $primary
 
 		a
 			flex: 1
 
+			&.active
+				color: $primary !important
+				font-weight: bold
+
 		.actions
 			margin-left: auto
-			.btn
-				font-size: .7em
 
 			span
 				color: $color-text-dark-secondary

src/styles/_project.sass

@@ -143,18 +143,12 @@ body.blog
 #project_context-header
 	transition: box-shadow 250ms ease-in-out
 	z-index: $z-index-base + 3
+	left: 0
+	width: 100%
 
 	&.is-offset
 		box-shadow: 0 0 25px rgba(black, .2)
 
-span#project-edit-title
-	position: absolute
-	padding: 15px 20px
-	font:
-		size: 1.1em
-		weight: 400
-	white-space: nowrap
-
 
 /* Edit Asset buttons */
 .project-mode-view,
@@ -241,56 +235,6 @@ ul.project-edit-tools
 	/* // Extra asset tools in dropdown */
 /* // Edit Asset buttons */
 
-
-ul.project_nav-edit-list
-	list-style: none
-	padding: 0
-	margin: $project_header-height 0 0 0
-
-	li
-		background-color: $color-background
-		border-bottom: 1px solid $color-background-dark
-		color: $color-text-dark
-		position: relative
-
-		&:hover
-			cursor: pointer
-			background-color: $color-background-light
-		a
-			padding: 10px 15px
-			display: inline-block
-			width: 100%
-			text-decoration: none
-			color: $color-text-dark
-
-		i
-			padding-right: 15px
-
-		&.active
-			background-color: white
-
-			a
-				color: $color-primary-dark
-
-.project_nav-toggle-btn
-	position: absolute
-	bottom: 0
-	width: 100%
-	padding: 10px
-	text-align: center
-	color: $color-text-light-hint
-	cursor: pointer
-
-	&:hover
-		color: $color-text-light
-
-	i
-		font-size: 1.3em
-
-	+media-xs
-		visibility: hidden
-		display: none
-
 #project_context
 	position: relative
 	display: flex
@@ -299,6 +243,8 @@ ul.project_nav-edit-list
 	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
 
@@ -1678,9 +1624,6 @@ section.node-children
 		padding: 20px
 
 		.form-group
-			position: relative
-			margin: 0 auto 30px auto
-
 			&.tags .select2-container
 				.select2-selection
 					+input-generic

src/styles/blog.sass

@@ -99,9 +99,6 @@
 	padding: 20px
 
 	.form-group
-		position: relative
-		margin: 0 auto 30px auto
-
 		input, textarea, select
 			+input-generic
 

src/styles/components/_navbar.sass

@@ -127,19 +127,50 @@ nav.sidebar
 							font-size: .9em
 
 
-// Secondary navigation for
+// Secondary navigation
+$nav-secondary-bar-size: -2px
 .nav-secondary
 	align-items: center
-	box-shadow: inset 0 -2px 0 0 $color-background
+	box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
 
 	.nav-link
 		color: $color-text
 		cursor: pointer
 		transition: box-shadow 150ms ease-in-out
+		box-shadow: inset 0 $nav-secondary-bar-size 0 0 $color-background
+
+		// Blue bar on the bottom.
+		&:hover,
+		&.active
+			box-shadow: inset 0 $nav-secondary-bar-size 0 0 $primary
+
+			i
+				color: $primary
+
+	&.nav-secondary-vertical
+		align-items: flex-start
+		flex-direction: column
+		box-shadow: none // Last item on the list already has a box-shadow.
+
+		> li
+			width: 100% // span across the whole width.
+
+		// Blue bar on the side.
+		.nav-link
+			box-shadow: inset 0 -1px 0 0 $color-background, inset -1px 0 0 0 $color-background
 
 			&:hover,
 			&.active
-			box-shadow: inset 0 -2px 0 0 $primary
+				box-shadow: inset 0 -1px 0 0 $color-background, inset ($nav-secondary-bar-size * 1.5) 0 0 0 $primary
+
+// 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.
+// Let's just add this exception for now.
+nav.navbar
+	> .nav-secondary
+		position: relative
+		top: 1px
 
 
 .navbar-overlay

src/templates/nodes/custom/asset/video/view_embed.pug

@@ -79,6 +79,8 @@ script(type="text/javascript").
 			}
 		});
 
+		this.rememberVolumePlugin();
+
 		// Generic utility to add-buttons to the player.
 		function addVideoPlayerButton(data) {
 
@@ -120,11 +122,10 @@ script(type="text/javascript").
 			videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
 		};
 
-		this.rememberVolumePlugin();
-
 		{% if current_user.is_authenticated %}
 		let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}';
 		let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}';
+
 		this.progressPlugin({
 			'report_url': report_url,
 			'fetch_progress_url': fetch_progress_url,

src/templates/projects/edit.pug

@@ -1,13 +1,13 @@
 | {% extends 'projects/edit_layout.html' %}
-| {% set title = 'edit' %}
+
 | {% block page_title %}Edit {{ project.name }}{% endblock %}
+| {% set title = 'edit' %}
 
 | {% block project_context_header %}
-span#project-edit-title
+#project_context-header.d-flex.justify-content-end.position-fixed.bg-white
-	| Edit Project
+	ul.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end(
+		class="project-edit-tools disabled")
 
-ul.project-edit-tools
-	// Edit Mode
 		li.button-cancel
 			a#item_cancel.project-mode-edit.btn.btn-sm.btn-link(
 				href="{{url_for('projects.view', project_url=project.url, _external=True)}}",
@@ -16,7 +16,9 @@ ul.project-edit-tools
 				| Go to Project
 
 		li.button-save
-		a#item_save.project-mode-edit.btn.btn-sm.btn-outline-success.mx-2(
+			a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize(
+				id="item_save",
+				class="project-mode-edit",
 				href="#",
 				title="Save changes")
 				i.button-save-icon.pi-check
@@ -24,6 +26,9 @@ ul.project-edit-tools
 | {% endblock %}
 
 | {% block project_context %}
+.row
+	.col-md-12
+		h5.pt-3.pl-3 Project Overview
 #node-edit-container
 	form(
 		id="node-edit-form"
@@ -81,7 +86,8 @@ ul.project-edit-tools
 
 		hr
 
-		ul.project-edit-tools.justify-content-end.h-auto
+		ul.d-flex.list-unstyled.p-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(
 					href="{{url_for('projects.view', project_url=project.url, _external=True)}}",
@@ -90,7 +96,9 @@ ul.project-edit-tools
 					| Go to Project
 
 			li.button-save
-				a#item_save.project-mode-edit.btn.btn-outline-success.ml-2(
+				a.btn.btn-sm.btn-outline-success.ml-2.px-3.text-capitalize(
+					id="item_save",
+					class="project-mode-edit",
 					href="#",
 					title="Save changes")
 					i.button-save-icon.pi-check

src/templates/projects/edit_layout.pug

@@ -1,28 +1,28 @@
 | {% extends 'layout.html' %}
+include ../mixins/components
+
 | {% block page_title %}Edit {{ project.name }}{% endblock %}
 
+| {% block navigation_tabs %}
++nav-secondary()
+	+nav-secondary-link(
+		class="px-0 font-weight-bold",
+		href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
+		| {{ project.name }}
+| {% endblock navigation_tabs %}
+
 | {% block body %}
 #project-container
 	#project-side-container
 		#project_sidebar
 			ul.project-tabs.p-0
-				li.tabs-thumbnail(
-					title="About",
-					data-toggle="tooltip",
-					data-placement="left",
-					class="{% if title == 'about' %}active {% endif %}{% if project.picture_square %}image{% endif %}")
-					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-						| {% if project.picture_square %}
-						img(src="{{ project.picture_square.thumbnail('b', api=api) }}")
-						| {% else %}
-						i.pi-home
-						| {% endif %}
 				li.tabs-browse(
 					title="Browse",
 					data-toggle="tooltip",
 					data-placement="left")
 					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
 						i.pi-folder
+
 				| {% if not project.is_private %}
 				li.tabs-search(
 					title="Search",
@@ -41,38 +41,40 @@
 						i.pi-cog
 				| {% endif %}
 
-				.project_nav-toggle-btn(
-					title="Expand Navigation [T]",
-					data-toggle="tooltip",
-					data-placement="right")
-					i.pi-angle-double-left
 
 		#project_nav
 			#project_nav-container
 				// TODO - make list a macro
 				#project_tree.edit.bg-white
-					ul.project_nav-edit-list
+					+nav-secondary()(class="nav-secondary-vertical")
-						li(class="{% if title == 'edit' %}active{% endif %}")
+						+nav-secondary-link(
-							a(href="{{ url_for('projects.edit', project_url=project.url) }}")
+							class="{% if title == 'edit' %}active{% endif %}",
-								i.pi-list
+							href="{{ url_for('projects.edit', project_url=project.url) }}")
+							i.pr-3.pi-list
 							| Overview
-						li(class="{% if title == 'sharing' %}active{% endif %}")
+
-							a(href="{{ url_for('projects.sharing', project_url=project.url) }}")
+						+nav-secondary-link(
-								i.pi-share
+							class="{% if title == 'sharing' %}active{% endif %}",
+							href="{{ url_for('projects.sharing', project_url=project.url) }}")
+							i.pr-3.pi-share
 							| Sharing
-						li(class="{% if title == 'edit_node_types' %}active{% endif %}")
+
-							a(href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
+						+nav-secondary-link(
-								i.pi-puzzle
+							class="{% if title == 'edit_node_types' %}active{% endif %}",
+							href="{{ url_for('projects.edit_node_types', project_url=project.url) }}")
+							i.pr-3.pi-puzzle
 							| Node Types
+
 						| {% for ext in ext_pages %}
-						li(class="{% if title == ext.name %}active{% endif %}")
+						+nav-secondary-link(
-							a(href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}")
+							class="{% if title == ext.name %}active{% endif %}",
-								i(class="pi-{{ext.icon}}")
+							href="{{ url_for('projects.edit_extension', project_url=project.url, extension_name=ext.name) }}")
-								| {{ext.name | title}}
+							i(class="pr-3 pi-{{ ext.icon }}")
+							| {{ ext.name | title }}
 						| {% endfor %}
 
-	#project_context-container
+
-		#project_context-header.bg-white
+	#project_context-container.border-left
 		| {% block project_context_header %}
 		| {% endblock %}
 

src/templates/projects/edit_node_type_embed.pug

@@ -17,13 +17,16 @@ form(
 
 	.row
 		.col-md-9
-			h3 Editing: {{ node_type['name'] }}
+			h5.text-info {{ node_type['name'] | undertitle }}
+
 		.col-md-3
-			button.js-form-save.btn.btn-outline-success.pull-right(style="margin-top: 15px;")
+			button.btn.btn-sm.btn-outline-success.float-right.px-3(
+				class="js-form-save")
+				i.pr-2.pi-check
 				| Save Changes
 
 	.row
-		.col-md-12
+		.col-md-12.pt-2
 			| {% for field in form %}
 			| {% if field.name == 'csrf_token' %}
 			| {{ field }}
@@ -46,7 +49,9 @@ form(
 			| {% endif %}
 			| {% endfor %}
 
-			button.js-form-save.btn.btn-outline-success.pull-right
+			button.btn.btn-sm.btn-outline-success.float-right.px-3(
+				class="js-form-save")
+				i.pr-2.pi-check
 				| Save Changes
 
 

src/templates/projects/edit_node_types.pug

@@ -2,29 +2,30 @@
 | {% set title = 'edit_node_types' %}
 | {% block page_title %}Node Types: {{ project.name }}{% endblock %}
 
-| {% block project_context_header %}
-span#project-edit-title
-	| Edit Project Node Types
-| {% endblock %}
-
 | {% block project_context %}
 #node-edit-container
-	div(id="node-edit-form")
+	#node-edit-form
 		.row
-			.col-md-9
+			.col-md-12
-				p.
+				h5 Everything is a Node
+
+				p.mb-1.
 					Nodes are all the items that can be found in a project.
-					Everything is a node: a file, a folder, a comment. They are
+					A file, a folder, a comment, everything is a node.
-					defined with custom properties to be properly displayed.
+					#[br]
+					They are defined with custom properties to be properly displayed.
+
+		hr
+
 		.row
 			.col-md-4.col-sm-6
-				h3 Node Types
+				h5 Node Types
 
 				| {% if current_user.has_cap('edit-project-node-types') %}
 				ul.list-generic
 					| {% for node_type in project.node_types %}
 					li
-						a.js-item-open(
+						a.js-item-open.text-muted(
 							href="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}",
 							data-url="{{ url_for('projects.edit_node_type', project_url=project.url, node_type_name=node_type.name) }}")
 							| {{ node_type.name | undertitle }}
@@ -33,7 +34,7 @@ span#project-edit-title
 					| {% endfor %}
 				| {% endif %}
 
-			.col-md-8.col-sm-6
+			.col-md-8.col-sm-6.border-left
 				#node-edit-embed
 
 | {% endblock %}
@@ -45,6 +46,9 @@ script.
 	$('.js-item-open').on('click', function(e){
 		e.preventDefault();
 
+		$('.js-item-open').removeClass('active');
+		$(this).addClass('active');
+
 		var item_url = $(this).data('url');
 
 		$.get(item_url, function(item_data) {

src/templates/projects/sharing.pug

@@ -2,28 +2,17 @@
 | {% set title = 'sharing' %}
 | {% block page_title %}Sharing: {{ project.name }}{% endblock %}
 
-| {% block project_context_header %}
-span#project-edit-title
-	| Manage team members for this project
-| {% endblock %}
-
 | {% block project_context %}
 #node-edit-container
 	#node-edit-form
+		.row
+			.col-md-12
+				h5.mb-1 Team Management
+
+		hr
+
+		.row
 			.col-md-6
-			| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
-			.sharing-users-search
-				.form-group
-					input#user-select.form-control(
-						name='contacts',
-						type='text',
-						placeholder='Add team members by name')
-			| {% else %}
-			.sharing-users-search
-				.disabled Only project owners & admins can manage users
-			| {% endif %}
-
-
 				ul.sharing-users-list
 					| {% for user in users %}
 					li.sharing-users-item(
@@ -60,9 +49,20 @@ span#project-edit-title
 					| {% endfor %}
 
 			.col-md-6
-			.sharing-users-info
+				| {% if (project.user == current_user.objectid or current_user.has_cap('admin')) %}
-				h4 What can team members do?
+				.sharing-users-search
-				p.
+					input#user-select.form-control(
+						name='contacts',
+						type='text',
+						placeholder='Add team members by name')
+				| {% else %}
+				.sharing-users-search
+					.disabled Only project owners & admins can manage users
+				| {% endif %}
+
+				.border-left.pl-3.mt-4
+					h6 What can team members do?
+					p
 						Team members are able to upload new content to the project,
 						as well as view, edit, delete, and comment on the content
 						previously created.