Click on the whole cell to open task

src/styles/_shots.sass

@@ -7,6 +7,9 @@
 		.table-cell
 			text-align: center
 
+			&.highlight .collapser
+				color: $color-primary-dark
+
 			&.shot-thumbnail
 				width: $shots-list-thumbnail-width
 
@@ -19,6 +22,10 @@
 				display: inline-block
 				padding: 5px
 
+			&:hover
+				span.collapser
+					color: $color-primary
+
 	.table-body
 		display: table-row-group
 
@@ -60,35 +67,62 @@
 
 		.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
 				padding: 0px 10px
 				text-align: left
+				position: relative
+				height: 100%
 				a
+					height: 100%
 					color: $color-text-dark-primary
 
 			&.task-type
 				max-width: 120px
+				position: relative
+				height: 100%
+				overflow: hidden
 
 				a
 					display: inline-block /* Each task in a new line */
-					border-radius: 50%
+
-					width: 16px
-					height: 16px
 					position: relative
 					top: 2px
-					+text-overflow-ellipsis
+					height: 100%
-					+status-background-color
+					width: 100%
 					transition: all 150ms ease-in-out
+					+status-background-color-before
+
+					&:before
+						display: block
+						content: ''
+						position: absolute
+						width: 16px
+						height: 16px
+						border-radius: 50%
+						border: 2px solid transparent
+						top: 50%
+						left: 50%
+						transform: translate(-50%, -50%)
 
 					&.active
 						opacity: 1
-						border-radius: 3px
+						border-radius: 2px
 						display: inline-block
 
 					&.task-add
 						width: auto
 						border-radius: initial
 						opacity: 0
+						vertical-align: middle
 
 				&:hover a.task-add
 					opacity: 1

src/styles/_utils.sass

@@ -510,21 +510,40 @@
 =status-background-color
 	&.status
 		&-invalid
-				background-color: hsl(hue($color-status-invalid), 100%, 75%)
+			background-color: hsl(hue($color-status-invalid), 100%, 75%)
 		&-todo
-				background-color: $color-status-todo-dark
+			background-color: $color-status-todo-dark
 		&-in_progress
-				background-color: hsl(hue($color-status-in_progress), 100%, 50%)
+			background-color: hsl(hue($color-status-in_progress), 100%, 50%)
 		&-on_hold
-				background-color: hsl(hue($color-status-on_hold), 60%, 50%)
+			background-color: hsl(hue($color-status-on_hold), 60%, 50%)
 		&-approved
-				background-color: hsl(hue($color-status-approved), 40%, 60%)
+			background-color: hsl(hue($color-status-approved), 40%, 60%)
 		&-cbb
-				background-color: $color-status-cbb
+			background-color: $color-status-cbb
 		&-final
-				background-color: hsl(hue($color-status-final), 100%, 40%)
+			background-color: hsl(hue($color-status-final), 100%, 40%)
 		&-review
-				background-color: hsl(hue($color-status-review), 100%, 75%)
+			background-color: hsl(hue($color-status-review), 100%, 75%)
+
+=status-background-color-before
+	&.status
+		&-invalid:before
+			background-color: hsl(hue($color-status-invalid), 100%, 75%)
+		&-todo:before
+			background-color: $color-status-todo-dark
+		&-in_progress:before
+			background-color: hsl(hue($color-status-in_progress), 100%, 50%)
+		&-on_hold:before
+			background-color: hsl(hue($color-status-on_hold), 60%, 50%)
+		&-approved:before
+			background-color: hsl(hue($color-status-approved), 40%, 60%)
+		&-cbb:before
+			background-color: $color-status-cbb
+		&-final:before
+			background-color: hsl(hue($color-status-final), 100%, 40%)
+		&-review:before
+			background-color: hsl(hue($color-status-review), 100%, 75%)
 
 =status-color
 	&.status

src/templates/attract/shots/for_project.jade

@@ -71,12 +71,13 @@ script.
 		$(function() { item_open('{{ open_shot_id }}', 'shot', false); });
 	{% endif %}
 
+	var same_cells;
 
 	$('.table-head .table-cell span').on('click', function(e){
 		e.stopPropagation();
 
 		/* We need to find every cell matching the same classes */
-		var same_cells = '.' + $(this).parent().attr('class').split(' ').join('.');
+		same_cells = '.' + $(this).parent().attr('class').split(' ').join('.');
 		$(same_cells).hide();
 		/* Add the spacer which we later click to expand  */
 		$('<div class="table-cell-spacer"></div>').insertAfter(same_cells);
@@ -84,9 +85,26 @@ script.
 
 	$('body').on('click', '.table-cell-spacer', function(){
 		/* We need to find every cell matching the same classes */
-		var same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
+		same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
 		$(same_cells).show();
 		$(same_cells).next().remove();
 	});
 
+	$('.table-body .table-cell').mouseenter(function(){
+		same_cells = '.' + $(this).attr('class').split(' ').join('.');
+		$('.table-head ' + same_cells).addClass('highlight');
+	}).mouseleave(function(){
+		same_cells = '.' + $(this).attr('class').split(' ').join('.');
+		$('.table-head ' + same_cells).removeClass('highlight');
+	});
+
+
+	$('.table-head .table-cell').mouseenter(function(){
+		same_cells = '.' + $(this).attr('class').split(' ').join('.');
+		$('.table-body ' + same_cells).addClass('highlight');
+	}).mouseleave(function(){
+		same_cells = '.' + $(this).attr('class').split(' ').join('.');
+		$('.table-body ' + same_cells).removeClass('highlight');
+	});
+
 | {% endblock footer_scripts %}