Replace Status underscore and minor style tweaks

attract/static/js/tasks.js

@@ -19,7 +19,7 @@ function save_task(task_id, task_url) {
             // Update the task list.
             // NOTE: this is tightly linked to the HTML of the task list in for_project.jade.
             $(task + ' span.name').text($form.find("input[name='name']").val());
-            $(task + ' span.status').text($form.find("select[name='status']").val());
+            $(task + ' span.status').text($form.find("select[name='status']").val().replace('_', ' '));
             $(task + ' span.status-indicator')
                 .removeAttr('class')
                 .addClass('status-indicator ' + $form.find("select[name='status']").val());

src/styles/_base.sass

@@ -1,6 +1,10 @@
 body
 	background-color: $color-background
-	position: relative
+	position: fixed
+	top: 0
+	left: 0
+	right: 0
+	bottom: 0
 	height: 100%
 	width: 100%
 	margin: 0
@@ -38,24 +42,22 @@ nav.sidebar
 				&:hover
 					color: $color-text-light-primary
 
-#col_main
+#col_sidebar
+	width: $sidebar-width
+
+#col_left, #col_main, #col_right
 	display: flex
 	flex-direction: column
 	position: relative
-	width: 50%
-	height: 100%
 	flex: 1
-	margin-left: $sidebar-width
+	height: 100%
+
+#col_main
 	box-shadow: 1px 0 0 $color-background-dark
+	background-color: white
 
 #col_right
-	display: flex
-	flex-direction: column
-	position: relative
 	background-color: $color-background
-	width: 50%
-	height: 100%
-	flex: 1
 
 .col_header
 	position: relative
@@ -68,7 +70,9 @@ nav.sidebar
 	font:
 		size: 1.2em
 	border-bottom: thin solid $color-background
-	box-shadow: 0 -2px 20px rgba(black, .2)
+
+	&.scrolled
+		box-shadow: 0 -2px 20px rgba(black, .2)
 
 .col-list-item
 	display: flex

src/styles/tasks.sass

@@ -4,6 +4,7 @@
 #task-add
 	margin-left: auto
 	font-size: .85em
+	color: $color-primary
 
 .status-indicator
 	background-color: white
@@ -48,14 +49,14 @@
 		border-color: $color-background-dark
 		border-right-color: $color-primary
 		text-decoration: none
-		background-color: rgba(white, .5)
+		background-color: rgba($color-background, .5)
 
 		.status-indicator
 			transform: rotate(45deg)
 			border-radius: 15%
 
 	&.processing
-		+stripes(rgba(white, .5), transparent, -45deg, 25px)
+		+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
 		+stripes-animate
 		animation-duration: 2s
 
@@ -82,3 +83,11 @@
 option.invalid_task
 	color: $color-danger
 	background-color: hsl(hue($color-danger), 80%, 90%)
+
+.task-list-header
+	border-right: thin solid $color-background
+	a
+		color: $color-text-dark
+	a.task-project
+		color: $color-text-dark-secondary
+		margin-left: 5px

src/templates/attract/layout.jade

@@ -18,7 +18,7 @@ html(lang="en")
 
 	body
 		#app-main
-			#col_left
+			#col_sidebar
 				nav.sidebar(role="navigation")
 					dl
 						dd
@@ -31,6 +31,7 @@ html(lang="en")
 							a(href="") A
 
 			| {% block body %}
+			#col_left
 			#col_main
 				h1 Main
 			#col_right

src/templates/attract/tasks/for_project.jade

@@ -8,8 +8,10 @@ link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", re
 
 | {% block body %}
 #col_main
-	.col_header
+	.col_header.task-list-header
-		| Tasks - {{ project.name }}
+		a(href="") Tasks ({{ tasks | count }})
+		a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
+
 		a#task-add(href="javascript:task_create();") + Create Task
 
 	#task-list.col-list
@@ -26,8 +28,9 @@ link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", re
 #col_right
 	.col_header
 		| Task Details
-		#status-bar Esa!
+		#status-bar
 	#task-details
+		| Tasks
 | {% endblock %}
 
 | {% block footer_scripts %}