From 4b9b53a53c4327eee3f47b2ed4d6cb282273415e Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 22 Sep 2016 15:44:41 +0200
Subject: [PATCH] Shot list: collapse columns by clicking on the title

---
 src/styles/_base.sass                        | 11 +++++++
 src/styles/_shots.sass                       |  6 +++-
 src/templates/attract/shots/for_project.jade | 33 +++++++++++++++-----
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/styles/_base.sass b/src/styles/_base.sass
index e3517fd..ff1f0c7 100644
--- a/src/styles/_base.sass
+++ b/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
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index a961eff..5163bc2 100644
--- a/src/styles/_shots.sass
+++ b/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
 
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 5c81f8f..d137a5f 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/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 %}