Shot list: collapse columns by clicking on the title

src/styles/_base.sass

@@ -119,6 +119,7 @@ select.input-transparent
 .table
 	display: table
 	width: 100%
+	position: relative
 
 	.table-row
 		display: table-row
@@ -139,3 +140,13 @@ select.input-transparent
 	.table-cell
 		display: table-cell
 		border-bottom: thin solid $color-background-dark
+
+	.table-cell-spacer
+		background-color: $color-background-light
+		width: 6px
+		height: 100%
+		display: table-cell
+		border: 2px solid $color-background
+		border-top: none
+		border-bottom: none
+		cursor: e-resize

src/styles/_shots.sass

@@ -7,16 +7,20 @@
 			&.task-type
 				text-transform: capitalize
 
+			span.collapser
+				cursor: pointer
+
 	.table-body
 		display: table-row-group
 		.table-cell
 			&.shot-name
 				padding-left: 10px
 
-			&.task-name
+			&.task-type
 				max-width: 120px
 				+text-overflow-ellipsis
 
+				/* Each task in a new line */
 				a
 					display: block
 

src/templates/attract/shots/for_project.jade

@@ -12,14 +12,16 @@
 		.table-head
 			.table-row
 				.table-cell.shot-thumbnail Thumbnail
-				.table-cell.shot-name Name
+				.table-cell.shot-name
+					span.collapser Name
 				| {% for task_type in task_types %}
-				.table-cell.task-type {{ task_type or 'other' }}
+				.table-cell.task-type(class="{{ task_type }}")
+					span.collapser {{ task_type or 'other' }}
 				| {% endfor %}
 		.table-body
 			| {% for shot in shots %}
 			.table-row(id="shot-{{ shot._id }}")
-				.table-cell
+				.table-cell.shot-thumbnail
 					img(src="http://placehold.it/100x60")
 				.table-cell.shot-name
 					a(
@@ -28,7 +30,7 @@
 						class="status-{{ shot.properties.status }}")
 						span(class="shot-name-{{ shot._id }}") {{ shot.name }}
 				| {% for task_type in task_types %}
-				.table-cell
+				.table-cell.task-type(class="{{ task_type }}")
 					| {% for task in tasks_for_shots[shot._id][task_type] %}
 					a(
 						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
@@ -38,7 +40,7 @@
 					| {% if not tasks_for_shots[shot._id][task_type] %}
 					a(
 						href="javascript:task_create('{{ shot._id }}', '{{ project.url }}', '{{ task_type }}');")
-						| + Task
+						| + {{ task_type }}
 					| {% endif %}
 				| {% endfor %}
 			| {% endfor %}
@@ -51,8 +53,23 @@
 
 | {% endblock %}
 | {% block footer_scripts %}
-| {% if open_task_id %}
 script.
-	$(function() { task_open('{{ open_task_id }}', '{{ project.url }}'); });
-| {% endif %}
+	{% if open_task_id %}
+		$(function() { task_open('{{ open_task_id }}', '{{ project.url }}'); });
+	{% endif %}
+
+	$('.table-head .table-cell span').on('click', function(e){
+		e.stopPropagation();
+
+		var same_cells = '.' + $(this).parent().attr('class').split(' ').join('.');
+		$(same_cells).hide();
+		$('<div class="table-cell-spacer"></div>').insertAfter(same_cells);
+	});
+
+	$('body').on('click', '.table-cell-spacer', function(){
+		var same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
+		$(same_cells).show();
+		$(same_cells).next().remove();
+	});
+
 | {% endblock footer_scripts %}