Cleanup and minor tweaks for apps with a sidebar

Like Attract or Flamenco

src/scripts/tutti/0_navbar.js

@@ -32,7 +32,7 @@ var DocumentTitleAPI = {
 };
 
 
-/* Status Bar */
+/* Status Bar * DEPRECATED * USE TOASTR INSTEAD */
 function statusBarClear(delay_class, delay_html){
 	var statusBar = $("#status-bar");
 
@@ -54,6 +54,7 @@ function statusBarClear(delay_class, delay_html){
 	}
 }
 
+/* Status Bar * DEPRECATED - USE TOASTR INSTEAD * */
 function statusBarSet(classes, html, icon_name, time){
 	/* Utility to notify the user by temporarily flashing text on the project header
 		 Usage:

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

@@ -66,7 +66,9 @@ function containerResizeY(window_height){
 
 	var project_container = document.getElementById('project-container');
 	var container_offset = project_container.offsetTop;
-	var nav_header_height = $('#project_nav-header').height();
+	// 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

src/styles/_apps_base.sass

@@ -143,12 +143,17 @@ nav.sidebar
 	left: 0
 	width: $sidebar-width
 	height: 100%
-	background-color: $color-background-nav
 	display: flex
 	flex-direction: column
 
+	> ul > li > .navbar-item
+		padding-top: 10px
+		padding-bottom: 10px
+		background: red
+
 	.dropdown
 		min-width: $sidebar-width
+
 		.dropdown-menu
 			top: initial
 			bottom: 3px
@@ -159,7 +164,7 @@ nav.sidebar
 			li a
 				justify-content: flex-start
 
-	ul
+	> ul
 		width: 100%
 		margin: 0
 		padding: 0
@@ -172,25 +177,11 @@ nav.sidebar
 
 			a.navbar-item, button
 				display: flex
-				color: $color-text-light-hint
-				font-size: 1.5em
 				align-items: center
 				justify-content: center
-				padding: 10px 0
 				background: transparent
 				border: none
 				width: 100%
-				text-decoration: none
-
-				&:hover
-					color: $color-text-light-primary
-				&:active
-					outline: none
-
-				&.cloud
-					i
-						position: relative
-						left: -4px
 
 			a.dropdown-toggle
 				padding: 0

src/styles/_config.sass

@@ -96,13 +96,12 @@ $screen-xs-max: $screen-sm-min - 1 !default
 $screen-sm-max: $screen-md-min - 1 !default
 $screen-md-max: $screen-lg-min - 1 !default
 
-$sidebar-width: 50px !default
+$sidebar-width: 40px !default
 
 /* Project specifics */
 $project_nav-width: 250px !default
 $project-sidebar-width: 40px !default
-$project_header-height: 37px !default
+$project_header-height: 40px !default
-$project_footer-height: 30px !default
 
 $node-type-asset_image: #e87d86 !default
 $node-type-asset_file: #CC91C7 !default

src/styles/_project.sass

@@ -22,6 +22,7 @@ body.blog
 #project-container
 	display: flex
 	flex-direction: row
+	margin-top: $project_header-height
 	min-height: 300px
 	position: relative
 	z-index: $z-index-base
@@ -36,9 +37,6 @@ body.blog
 	+media-xs
 		flex-direction: column-reverse
 
-#project-side-container+#project_context-header
-	width: 100%
-	left: 0
 
 #project_nav-container
 	+media-lg
@@ -112,13 +110,6 @@ body.blog
 					height: $project-sidebar-width
 					width: $project-sidebar-width
 
-				#project-loading
-					align-items: center
-					display: flex
-					height: $project-sidebar-width
-					justify-content: center
-					width: $project-sidebar-width
-
 
 #search-container #project_sidebar ul.project-tabs li.tabs-thumbnail
 	background-color: $color-background-nav-dark
@@ -150,78 +141,13 @@ body.blog
 
 
 /* Header with name and node edit tools */
-#project_nav-header,
 #project_context-header
-	align-items: center
-	color: white
-	display: flex
-	position: relative
-
-#project_context-header
-	align-items: center
-	color: $color-text-dark-secondary
-	display: flex
-	height: $project_header-height
-	min-height: $project_header-height
-	position: fixed
-	top: $project_header-height + 1
 	transition: box-shadow 250ms ease-in-out
 	z-index: $z-index-base + 3
 
 	&.is-offset
 		box-shadow: 0 0 25px rgba(black, .2)
 
-	span#status-bar
-		text-align: left
-
-#project_nav-header
-	left: 0
-	position: absolute
-	top: 0
-	width: 100%
-	z-index: $z-index-base + 3
-
-	/* Name of the project */
-	.project-title
-		+text-overflow-ellipsis
-		height: 100%
-		max-width: 100%
-		width: 100%
-
-span#status-bar
-	position: absolute
-	left: 0
-	top: 10px
-	min-width: 33%
-	padding: 5px 15px
-	color: $color-text-dark
-	opacity: 0
-	z-index: 1
-	font-weight: 400
-	white-space: nowrap
-	transition: all 250ms ease-in-out
-
-	+media-xs
-		left: 0
-		min-width: 100%
-
-	i
-		margin-right: 5px
-
-	&.info
-		color: $color-info
-	&.error
-		color: $danger
-	&.warning
-		color: $color-warning
-	&.success
-		color: $color-success
-	&.default
-		color: $color-text-light
-
-	&.active
-		opacity: 1
-
 span#project-edit-title
 	position: absolute
 	padding: 15px 20px
@@ -238,17 +164,6 @@ span#project-edit-title
 	display: none
 
 ul.project-edit-tools
-	align-items: center
-	display: flex
-	list-style-type: none
-	margin: 0 0 0 auto
-	padding: 0
-
-	+media-xs
-		width: 100%
-		margin: 0 auto
-		justify-content: space-around
-
 	li
 		a, button
 			padding: $dropdown-item-padding-y ($dropdown-item-padding-x / 2)
@@ -353,13 +268,9 @@ ul.project-edit-tools
 		background-color: rgba($color-background-nav-dark, .7)
 		opacity: 1
 
-		i
-			+spin
-			animation-duration: .5s
 
-#project-header+#project_tree,
+#project-container
-#project-header+#project_context-container
+
-	margin-top: $project_header-height
 
 
 ul.project_nav-edit-list

src/styles/_utils.sass

@@ -642,9 +642,7 @@
 				#{$property}: $color-status-review
 
 =sidebar-button-active
-	background-color: $color-background-nav
+	color: $primary
-	box-shadow: inset 2px 0 0 $color-primary
-	color: white
 
 .flash-on
 	background-color: lighten($color-success, 50%) !important

src/styles/components/_jumbotron.sass

@@ -2,6 +2,7 @@
 .jumbotron
 	background-size: cover
 	border-radius: 0
+	margin-bottom: 0
 	padding-top: 10em
 	padding-bottom: 10em
 

src/templates/nodes/edit_embed.pug

@@ -71,7 +71,7 @@
 
 		hr
 
-		ul.project-edit-tools.justify-content-end.h-auto
+		ul.project-edit-tools.disabled.d-flex.list-unstyled.p-2.mb-0.h-auto.justify-content-end
 			li.button-cancel
 				a#item_cancel.item-cancel.project-mode-edit.btn.btn-outline-secondary(
 					href="javascript:void(0);",

src/templates/projects/edit_layout.pug

@@ -51,11 +51,6 @@
 
 		#project_nav
 			#project_nav-container
-				#project_nav-header.bg-white
-					a.project-title.p-2.font-weight-bold.text-dark(
-						href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-						| {{ project.name }}
-
 				// TODO - make list a macro
 				#project_tree.edit.bg-white
 					ul.project_nav-edit-list
@@ -80,7 +75,6 @@
 
 	#project_context-container
 		#project_context-header.bg-white
-			span#status-bar
 			| {% block project_context_header %}
 			| {% endblock %}