From 5bf56ffd34997749a375d95ea1d548c2ba318a3e Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Wed, 9 Nov 2016 17:04:13 +0100
Subject: [PATCH] task- and shot- specific lists are now called item-

---
 src/scripts/tutti/10_tasks.js                 |  14 +-
 src/styles/_app_base.sass                     | 183 ++++++++++++++++++
 src/styles/_config.sass                       |   2 +-
 src/styles/_shots.sass                        | 170 +---------------
 src/styles/_tasks.sass                        |  20 +-
 src/templates/attract/assets/for_project.jade |  24 +--
 .../attract/assets/view_asset_embed.jade      |  36 ++--
 src/templates/attract/shots/for_project.jade  |  24 +--
 .../attract/shots/view_shot_embed.jade        |   2 +-
 src/templates/attract/tasks/for_project.jade  |   6 +-
 .../attract/tasks/task_list_for_user.jade     |   2 +-
 .../attract/tasks/view_task_embed.jade        |   2 +-
 12 files changed, 248 insertions(+), 237 deletions(-)

diff --git a/src/scripts/tutti/10_tasks.js b/src/scripts/tutti/10_tasks.js
index ed42b45..683e3f9 100644
--- a/src/scripts/tutti/10_tasks.js
+++ b/src/scripts/tutti/10_tasks.js
@@ -152,9 +152,9 @@ function task_add(shot_id, task_id, task_type)
     var context = ProjectUtils.context();
 
     if (context == 'task') {
-        /* WARNING: This is a copy of an element of attract/tasks/for_project #task-list.col-list
+        /* WARNING: This is a copy of an element of attract/tasks/for_project .item-list.col-list
          * If that changes, change this too. */
-        $('#task-list').append('\
+        $('.item-list.task').append('\
             <a class="col-list-item task-list-item status-todo task-link active"\
                 href="' + url + '"\
                 data-task-id="' + task_id + '"\
@@ -172,7 +172,7 @@ function task_add(shot_id, task_id, task_type)
         var $list_cell = $('#' + context + '-' + shot_id + ' .table-cell.task-type.' + task_type);
         var url = '/attract/' + project_url + '/' + context + 's/with-task/' + task_id;
 
-        /* WARNING: This is a copy of an element of attract/shots/for_project #task-list.col-list
+        /* WARNING: This is a copy of an element of attract/shots/for_project .item-list.col-list
          * If that changes, change this too. */
         $list_cell.append('\
             <a class="status-todo task-link active"\
@@ -279,7 +279,7 @@ function attract_form_save(form_id, item_id, item_save_url, options)
 }
 
 function task_save(task_id, task_url) {
-    return attract_form_save('task_form', 'task-' + task_id, task_url, {
+    return attract_form_save('item_form', 'task-' + task_id, task_url, {
         done: function($task, saved_task) {
             // Update the task list.
             // NOTE: this is tightly linked to the HTML of the task list in for_project.jade.
@@ -309,7 +309,7 @@ function task_save(task_id, task_url) {
 }
 
 function shot_save(shot_id, shot_url) {
-    return attract_form_save('shot_form', 'shot-' + shot_id, shot_url, {
+    return attract_form_save('item_form', 'shot-' + shot_id, shot_url, {
         done: function($shot, saved_shot) {
             // Update the shot list.
             $('.shot-name-' + saved_shot._id).text(saved_shot.name);
@@ -333,11 +333,11 @@ function shot_save(shot_id, shot_url) {
 }
 
 function asset_save(asset_id, asset_url) {
-    return attract_form_save('shot_form', 'asset-' + asset_id, asset_url, {
+    return attract_form_save('item_form', 'asset-' + asset_id, asset_url, {
         done: function($asset, saved_asset) {
             // Update the asset list.
             // NOTE: this is tightly linked to the HTML of the asset list in for_project.jade.
-            $('.asset-name-' + saved_asset._id).text(saved_asset.name).flashOnce();
+            $('.item-name-' + saved_asset._id).text(saved_asset.name).flashOnce();
             $asset.find('span.name').text(saved_asset.name);
             $asset.find('span.due_date').text(moment().to(saved_asset.properties.due_date));
             $asset.find('span.status').text(saved_asset.properties.status.replace('_', ' '));
diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass
index 2fd5008..b379c56 100644
--- a/src/styles/_app_base.sass
+++ b/src/styles/_app_base.sass
@@ -274,6 +274,10 @@ input, input.form-control
 	textarea
 		resize: vertical
 
+.input-group-separator
+	margin: 10px 0
+	border-top: thin solid $color-background
+
 #status-bar
 	color: $color-text-dark-secondary
 	margin-left: auto
@@ -320,6 +324,182 @@ input, input.form-control
 	.table-row:hover
 		background-color: $color-background-light
 
+/* Attract specific table tweaks */
+.item-list
+	overflow-x: scroll
+	.table
+		background-color: white
+		.table-row:hover
+			background-color: $color-background-light
+
+		.table-cell
+			&.item-status
+				width: 5px
+				height: 100%
+		.table-head
+			.table-cell
+				text-align: center
+
+				&.highlight .collapser
+					color: $color-primary-dark
+
+				&.item-thumbnail
+					width: $items-list-thumbnail-width
+
+				&.task-type
+					text-transform: capitalize
+
+				span.collapser
+					cursor: pointer
+					width: 100%
+					display: inline-block
+					padding: 5px
+
+				&:hover
+					span.collapser
+						color: $color-primary
+
+		.table-body
+			display: table-row-group
+
+			.table-row
+				position: relative
+
+				&.active
+					background-color: $color-background-active
+
+					.table-cell
+						border-bottom-color: darken($color-background-active, 15%)
+					.table-cell:last-child
+						box-shadow: inset -5px 0 0 $color-primary
+
+				@include status-color-property(background-color, ' .item-status', '')
+
+			.table-cell
+				text-align: center
+				border-left: thin solid transparent
+				border-right: thin solid transparent
+
+				&.active
+					background-color: $color-background
+
+				&.highlight
+					background-color: rgba(white, .5)
+
+					&.task-type a:before
+						transform: translate(-50%, -50%) scale(1.2)
+
+				&.item-name
+					text-align: left
+					position: relative
+					height: 100%
+					a
+						display: flex
+						padding: 5px 10px
+						color: $color-text-dark-primary
+
+						span
+							margin: auto 0
+
+				&.item-thumbnail
+					border-left: none
+					border-bottom: none
+					img
+						transition: opacity 150ms ease-in-out
+
+				&.task-type
+					position: relative
+					height: 100%
+					overflow: hidden
+					white-space: nowrap
+
+					a
+						display: inline-block /* Each task next to each other */
+						vertical-align: middle
+						height: 100%
+						min-height: 100%
+						padding: 15px
+						transition: all 150ms ease-in-out
+						position: relative
+
+						@include status-color-property(background-color, ':before', '')
+
+						&:focus
+							outline: none
+
+							&:before
+								transform: translate(-50%, -50%) scale(1.5)
+
+						&:before
+							display: block
+							content: ''
+							position: absolute
+							width: 16px
+							height: 16px
+							border-radius: 50%
+							border: 2px solid transparent
+							+position-center-translate
+							transition: background-color 150ms ease-in-out, border 150ms ease-in-out
+
+						span
+							display: block
+							+position-center-translate
+							z-index: 1
+							font:
+								weight: bold
+								size: .8em
+							text:
+								align: center
+								transform: capitalize
+							color: white
+
+						&.active
+							opacity: 1
+
+							&:before
+								transform: translate(-50%, -50%) scale(1.3)
+								border: 2px solid white
+								box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
+							&:hover
+								border-color: $color-primary-light
+
+						&.processing
+							background-image: none
+							&:before
+								+stripes-animate
+								+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
+								animation-duration: 4s
+
+							&.active
+								background-image: none
+
+						&.task-add
+							width: auto
+							border-radius: initial
+							opacity: 0
+							vertical-align: middle
+							padding: 5px
+							display: flex
+							justify-content: center
+
+							&:hover, &:focus
+								opacity: 1
+
+						&:hover
+							&:before
+								opacity: .8
+								transform: translate(-50%, -50%) scale(1.2)
+							&.active:before
+								transform: translate(-50%, -50%) scale(1.3)
+
+.item-list-header
+	a
+		color: $color-text-dark
+		+text-overflow-ellipsis
+	a.item-project
+		color: $color-text-dark-secondary
+		margin-left: 10px
+
 /* Generic Statuses */
 .processing
 	+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
@@ -336,6 +516,9 @@ input, input.form-control
 		transition: all .1s ease-in
 		opacity: .8
 
+	&:before
+		background-color: lighten($color-success, 50%) !important
+
 .flash-off
 	transition: all 1s ease-out
 	img
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 3a37c9e..b845dac 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -92,4 +92,4 @@ $screen-md-max: $screen-lg-min - 1
 
 $sidebar-width: 50px
 
-$shots-list-thumbnail-width: 100px
+$items-list-thumbnail-width: 100px
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index b5cccdc..987a596 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -1,59 +1,15 @@
-#shot-list
-	overflow-x: scroll
+.item-list.shot
 	.table
-		background-color: white
-		.table-row:hover
-			background-color: $color-background-light
-
-		.table-cell
-			&.shot-status
-				width: 5px
-				height: 100%
-		.table-head
-			.table-cell
-				text-align: center
-
-				&.highlight .collapser
-					color: $color-primary-dark
-
-				&.shot-thumbnail
-					width: $shots-list-thumbnail-width
-
-				&.task-type
-					text-transform: capitalize
-
-				span.collapser
-					cursor: pointer
-					width: 100%
-					display: inline-block
-					padding: 5px
-
-				&:hover
-					span.collapser
-						color: $color-primary
-
 		.table-body
-			display: table-row-group
-
 			.table-row
-				position: relative
-
-				&.active
-					background-color: $color-background-active
-
-					.table-cell
-						border-bottom-color: darken($color-background-active, 15%)
-					.table-cell:last-child
-						box-shadow: inset -5px 0 0 $color-primary
-
 				&.not-in-edit
 					+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)
 
 					.table-cell
-						&.shot-name a
+						&.item-name a
 							color: $color-text-dark-secondary
 
-						&.shot-status
+						&.item-status
 							opacity: .2
 
 						&.task-type .task-link
@@ -62,7 +18,7 @@
 								background: transparent
 								border: 2px solid $color-text-dark-secondary
 
-						&.shot-thumbnail img
+						&.item-thumbnail img
 							opacity: .5
 
 					&.active
@@ -70,7 +26,7 @@
 
 					&:hover, &.active
 						.table-cell
-							&.shot-thumbnail img
+							&.item-thumbnail img
 								opacity: 1
 							&.task-type .task-link
 								@include status-color-property(background-color, ':before', '')
@@ -78,119 +34,3 @@
 								&:before
 									opacity: 1
 									border: none
-
-				@include status-color-property(background-color, ' .shot-status', '')
-
-			.table-cell
-				text-align: center
-				border-left: thin solid transparent
-				border-right: thin solid transparent
-
-				&.active
-					background-color: $color-background
-
-				&.highlight
-					background-color: $color-background-light
-
-				&.shot-name
-					text-align: left
-					position: relative
-					height: 100%
-					a
-						display: flex
-						padding: 5px 10px
-						color: $color-text-dark-primary
-
-						span
-							margin: auto 0
-
-				&.shot-thumbnail
-					border-left: none
-					border-bottom: none
-					img
-						transition: opacity 150ms ease-in-out
-
-				&.task-type
-					position: relative
-					height: 100%
-					overflow: hidden
-					white-space: nowrap
-
-					a
-						display: inline-block /* Each task next to each other */
-						vertical-align: middle
-						height: 100%
-						min-height: 100%
-						padding: 15px
-						transition: all 150ms ease-in-out
-						position: relative
-
-						@include status-color-property(background-color, ':before', '')
-
-						&:focus
-							outline: none
-
-							&:before
-								transform: translate(-50%, -50%) scale(1.5)
-
-						&:before
-							display: block
-							content: ''
-							position: absolute
-							width: 16px
-							height: 16px
-							border-radius: 50%
-							border: 2px solid transparent
-							+position-center-translate
-							transition: background-color 150ms ease-in-out, border 150ms ease-in-out
-
-						span
-							display: block
-							+position-center-translate
-							z-index: 1
-							font:
-								weight: bold
-								size: .8em
-							text:
-								align: center
-								transform: capitalize
-							color: white
-
-						&.active
-							opacity: 1
-
-							&:before
-								transform: translate(-50%, -50%) scale(1.3)
-								border: 2px solid white
-								box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
-							&:hover
-								border-color: $color-primary-light
-
-						&.processing
-							background-image: none
-							&:before
-								+stripes-animate
-								+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
-								animation-duration: 4s
-
-							&.active
-								background-image: none
-
-						&.task-add
-							width: auto
-							border-radius: initial
-							opacity: 0
-							vertical-align: middle
-							padding: 5px
-							display: flex
-							justify-content: center
-
-							&:hover, &:focus
-								opacity: 1
-
-						&:hover
-							&:before
-								opacity: .8
-								transform: translate(-50%, -50%) scale(1.2)
-							&.active:before
-								transform: translate(-50%, -50%) scale(1.3)
diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass
index fc307ba..63c6052 100644
--- a/src/styles/_tasks.sass
+++ b/src/styles/_tasks.sass
@@ -1,3 +1,6 @@
+.item-list.task
+	overflow-x: hidden
+
 .attract-box
 	margin: 10px
 	padding: 10px
@@ -90,10 +93,7 @@
 .attract-box+.attract-box
 	margin-top: 0
 
-#task-list
-	overflow-x: hidden
-
-#task-add
+#item-add
 	margin-left: auto
 	font-size: .85em
 	color: $color-primary
@@ -174,15 +174,3 @@
 option.invalid_task
 	color: $color-danger
 	background-color: hsl(hue($color-danger), 80%, 90%)
-
-.task-list-header
-	a
-		color: $color-text-dark
-		+text-overflow-ellipsis
-	a.task-project
-		color: $color-text-dark-secondary
-		margin-left: 10px
-
-.input-group-separator
-	margin: 10px 0
-	border-top: thin solid $color-background
diff --git a/src/templates/attract/assets/for_project.jade b/src/templates/attract/assets/for_project.jade
index 2b70529..e80609f 100644
--- a/src/templates/attract/assets/for_project.jade
+++ b/src/templates/attract/assets/for_project.jade
@@ -3,21 +3,21 @@
 | {% block page_title %}Assets - {{ project.name }}{% endblock %}
 | {% block body %}
 #col_main
-	.col_header.task-list-header
-		| {{ assets | count }} assets
-		a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
-		a#task-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
+	.col_header.item-list-header
+		| {{ assets | count }} Assets
+		a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
+		a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
 
-	#shot-list
+	.item-list.task.col-scrollable
 		.table
 			.table-head
 				.table-row
 					.table-cell.asset-status
 					| {#  disabled until users can actually upload a thumbnail
-					.table-cell.asset-thumbnail
+					.table-cell.item-thumbnail
 						span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
 					| #}
-					.table-cell.asset-name
+					.table-cell.item-name
 						span.collapser(title="Collapse name column") Name
 					| {% for task_type in task_types %}
 					.table-cell.task-type(class="{{ task_type }}")
@@ -29,10 +29,10 @@
 				.table-row(
 					id="asset-{{ asset._id }}",
 					class="status-{{ asset.properties.status }} {{ asset.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
-					.table-cell.shot-status(
+					.table-cell.item-status(
 						title="Status: {{ asset.properties.status | undertitle }}")
 					| {#  disabled until users can actually upload a thumbnail
-					.table-cell.asset-thumbnail
+					.table-cell.item-thumbnail
 						a(
 							data-asset-id="{{ asset._id }}",
 							href="{{ url_for('attract.assets.perproject.view_asset', project_url=project.url, asset_id=asset._id) }}",
@@ -41,12 +41,12 @@
 								alt="Thumbnail",
 								style='width: 110px; height: {{ asset._thumbnail_height }}')
 					| #}
-					.table-cell.asset-name
+					.table-cell.item-name
 						a(
 							data-asset-id="{{ asset._id }}",
 							href="{{ url_for('attract.assets.perproject.view_asset', project_url=project.url, asset_id=asset._id) }}",
 							class="status-{{ asset.properties.status }} asset-link")
-							span(class="asset-name-{{ asset._id }}") {{ asset.name }}
+							span(class="item-name-{{ asset._id }}") {{ asset.name }}
 					| {% for task_type in task_types %}
 					.table-cell.task-type(class="{{ task_type }}")
 						| {% for task in tasks_for_assets[asset._id][task_type] %}
@@ -78,7 +78,7 @@
 	.col_header
 		span.header_text
 		#status-bar
-	#item-details
+	#item-details.col-scrollable
 		.item-details-empty
 			| Select a asset or Task
 
diff --git a/src/templates/attract/assets/view_asset_embed.jade b/src/templates/attract/assets/view_asset_embed.jade
index 2eb9308..fd7f577 100644
--- a/src/templates/attract/assets/view_asset_embed.jade
+++ b/src/templates/attract/assets/view_asset_embed.jade
@@ -1,23 +1,23 @@
-.attract-box.shot.with-status(class="status-{{ asset.properties.status }}")
-	form#shot_form(onsubmit="return asset_save('{{asset._id}}', '{{ url_for('attract.assets.perproject.save', project_url=project['url'], asset_id=asset._id) }}')")
+.attract-box.asset.with-status(class="status-{{ asset.properties.status }}")
+	form#item_form(onsubmit="return asset_save('{{asset._id}}', '{{ url_for('attract.assets.perproject.save', project_url=project['url'], asset_id=asset._id) }}')")
 		input(type='hidden',name='_etag',value='{{ asset._etag }}')
-		| {% if 'PUT' in asset.allowed_methods %}
-		input.item-name(
-			name="name",
-			type="text",
-			placeholder='Asset name',
-			value="{{ asset.name | hide_none }}")
-		| {% else %}
-		span.item-name {{ asset.name | hide_none }}
-		| {% endif %}
+		.input-group
+			| {% if 'PUT' in asset.allowed_methods %}
+			input.item-name(
+				name="name",
+				type="text",
+				placeholder='Asset Name',
+				value="{{ asset.name | hide_none }}")
+			| {% else %}
+			span.item-name {{ asset.name | hide_none }}
+			| {% endif %}
 
-		button.copy-to-clipboard.btn.item-id(
-			style="margin-left: auto",
-			name="Copy to Clipboard",
-			type="button",
-			data-clipboard-text="{{ asset._id }}",
-			title="Copy ID to clipboard")
-			| ID
+			button.copy-to-clipboard.btn.item-id(
+				name="Copy to Clipboard",
+				type="button",
+				data-clipboard-text="{{ asset._id }}",
+				title="Copy ID to clipboard")
+				| ID
 
 		| {% if 'PUT' in asset.allowed_methods %}
 		.input-group
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 776a4db..e2e9c50 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -3,22 +3,22 @@
 | {% block page_title %}Shots - {{ project.name }}{% endblock %}
 | {% block body %}
 #col_main
-	.col_header.task-list-header
+	.col_header.item-list-header
 		span(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames
-		a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
+		a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
 
 		| {# Not allowed for the moment. Shots are added via the Sequencer
-		a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
+		a#item-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
 		| #}
 
-	#shot-list
+	.item-list.shot.col-scrollable
 		.table
 			.table-head
 				.table-row
-					.table-cell.shot-status
-					.table-cell.shot-thumbnail
+					.table-cell.item-status
+					.table-cell.item-thumbnail
 						span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
-					.table-cell.shot-name
+					.table-cell.item-name
 						span.collapser(title="Collapse name column") Name
 					| {% for task_type in task_types %}
 					.table-cell.task-type(class="{{ task_type }}")
@@ -30,9 +30,9 @@
 				.table-row(
 					id="shot-{{ shot._id }}",
 					class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
-					.table-cell.shot-status(
+					.table-cell.item-status(
 						title="Status: {{ shot.properties.status | undertitle }}")
-					.table-cell.shot-thumbnail
+					.table-cell.item-thumbnail
 						a(
 							data-shot-id="{{ shot._id }}",
 							href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
@@ -40,12 +40,12 @@
 							img(src="{{ shot._thumbnail }}",
 								alt="Thumbnail",
 								style='width: 110px; height: {{ shot._thumbnail_height }}')
-					.table-cell.shot-name
+					.table-cell.item-name
 						a(
 							data-shot-id="{{ shot._id }}",
 							href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
 							class="status-{{ shot.properties.status }} shot-link")
-							span(class="shot-name-{{ shot._id }}") {{ shot.name }}
+							span(class="item-name-{{ shot._id }}") {{ shot.name }}
 					| {% for task_type in task_types %}
 					.table-cell.task-type(class="{{ task_type }}")
 						| {% for task in tasks_for_shots[shot._id][task_type] %}
@@ -77,7 +77,7 @@
 	.col_header
 		span.header_text
 		#status-bar
-	#item-details
+	#item-details.col-scrollable
 		.item-details-empty
 			| Select a Shot or Task
 
diff --git a/src/templates/attract/shots/view_shot_embed.jade b/src/templates/attract/shots/view_shot_embed.jade
index 340ef58..8abe090 100644
--- a/src/templates/attract/shots/view_shot_embed.jade
+++ b/src/templates/attract/shots/view_shot_embed.jade
@@ -1,5 +1,5 @@
 .attract-box.shot.with-status(class="status-{{ shot.properties.status }}")
-	form#shot_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
+	form#item_form(onsubmit="return shot_save('{{shot._id}}', '{{ url_for('attract.shots.perproject.save', project_url=project['url'], shot_id=shot._id) }}')")
 		input(type='hidden',name='_etag',value='{{ shot._etag }}')
 		.input-group
 			span.item-name(title="Shot names can only be updated from Blender.") {{ shot.name | hide_none }}
diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade
index de209c3..ca0bc14 100644
--- a/src/templates/attract/tasks/for_project.jade
+++ b/src/templates/attract/tasks/for_project.jade
@@ -8,9 +8,9 @@
 		a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
 		//- Dirty hack, assume a user can create a task if they can edit the project.
 		| {% if 'PUT' in project.allowed_methods %}
-		a#task-add(href="javascript:task_create(undefined, 'generic');") + Create Task
+		a#item-add(href="javascript:task_create(undefined, 'generic');") + Create Task
 		| {% endif %}
-	#task-list.col-list
+	.item-list.col-list.col-scrollable
 		| {% for task in tasks %}
 		//- NOTE: this is tightly linked to the JS in tasks.js, function task_add()
 		a.col-list-item.task-list-item(
@@ -32,7 +32,7 @@
 	.col_header
 		span.header_text
 		#status-bar
-	#item-details
+	#item-details.col-scrollable
 		.item-details-empty
 			| Select a Task
 | {% endblock %}
diff --git a/src/templates/attract/tasks/task_list_for_user.jade b/src/templates/attract/tasks/task_list_for_user.jade
index 93842a0..00aa666 100644
--- a/src/templates/attract/tasks/task_list_for_user.jade
+++ b/src/templates/attract/tasks/task_list_for_user.jade
@@ -2,7 +2,7 @@
 .col_header.task-list-header
 	| Your Tasks ({{ task_count }})
 
-#task-list.col-list
+.item-list.col-list
 	| {% for task in tasks if tasks %}
 	//- NOTE: this is tightly linked to the JS in tasks.js, function task_add()
 	a.col-list-item.task-list-item(
diff --git a/src/templates/attract/tasks/view_task_embed.jade b/src/templates/attract/tasks/view_task_embed.jade
index 173029b..9a92d2d 100644
--- a/src/templates/attract/tasks/view_task_embed.jade
+++ b/src/templates/attract/tasks/view_task_embed.jade
@@ -1,6 +1,6 @@
 .attract-box.task.with-status(
 	class="status-{{ task.properties.status }}")
-	form#task_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')")
+	form#item_form(onsubmit="return task_save('{{task._id}}', '{{ url_for('attract.tasks.perproject.save', project_url=project['url'], task_id=task._id) }}')")
 		input(type='hidden',name='_etag',value='{{ task._etag }}')
 		//- NOTE: if you add fields here, also add them read-only below.
 		.input-group