From 6aa8db2dffe4025175beae949b08050b683db3d5 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 3 Nov 2016 17:51:20 +0100
Subject: [PATCH] Style when there are thumbnails available

TODO: Once we have the user-space, we show or not .has-thumbnail
---
 src/styles/_config.sass                      |  1 +
 src/styles/_dashboard.sass                   |  2 +-
 src/styles/_shots.sass                       |  8 ++++++++
 src/templates/attract/shots/for_project.jade | 16 +++++++++++++---
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 3a37c9e..0a8020d 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -93,3 +93,4 @@ $screen-md-max: $screen-lg-min - 1
 $sidebar-width: 50px
 
 $shots-list-thumbnail-width: 100px
+$shots-list-thumbnail-height: 60px
diff --git a/src/styles/_dashboard.sass b/src/styles/_dashboard.sass
index 7488dd6..341859c 100644
--- a/src/styles/_dashboard.sass
+++ b/src/styles/_dashboard.sass
@@ -96,7 +96,7 @@
 
 			.progress
 				margin-bottom: 0
-			h4
+			h3
 				margin-top: 0
 				font-weight: normal
 
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
index ad2ca03..bcc184a 100644
--- a/src/styles/_shots.sass
+++ b/src/styles/_shots.sass
@@ -32,6 +32,10 @@
 
 	.table-body
 		display: table-row-group
+		&.has-thumbnails
+			.table-cell a,
+			.table-cell a.task-link
+				height: $shots-list-thumbnail-height
 
 		.table-row
 			position: relative
@@ -45,6 +49,7 @@
 
 			@include status-color-property(background-color, ' .shot-status', '')
 
+
 		.table-cell
 			text-align: center
 			border-left: thin solid transparent
@@ -65,6 +70,9 @@
 					padding: 5px 10px
 					color: $color-text-dark-primary
 
+					span
+						margin: auto 0
+
 			&.task-type
 				position: relative
 				height: 100%
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index e4814c0..245be70 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -16,7 +16,7 @@
 			.table-row
 				.table-cell.shot-status
 				.table-cell.shot-thumbnail
-					span.collapser(title="Collapse thumbnails") Thumbnail
+					span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
 				.table-cell.shot-name
 					span.collapser(title="Collapse name column") Name
 				| {% for task_type in task_types %}
@@ -24,7 +24,7 @@
 					span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
 				| {% endfor %}
 
-		.table-body
+		.table-body.has-thumbnails
 			| {% for shot in shots %}
 			.table-row(
 				id="shot-{{ shot._id }}",
@@ -97,16 +97,26 @@ script.
 
 		/* We need to find every cell matching the same classes */
 		same_cells = '.' + $(this).parent().attr('class').split(' ').join('.');
+
+		if ($(this).hasClass('thumbnails')){
+			$('.table-body').removeClass('has-thumbnails');
+		}
+
 		$(same_cells).hide();
 		/* Add the spacer which we later click to expand  */
-		$('<div class="table-cell-spacer" title="Expand ' + $(this).text() + '"></div>').insertAfter(same_cells);
+		$('<div class="table-cell-spacer ' + $(this).text() + '" title="Expand ' + $(this).text() + '"></div>').insertAfter(same_cells);
 	});
 
 	$('body').on('click', '.table-cell-spacer', function(){
+		if ($(this).prev().hasClass('shot-thumbnail')){
+			$('.table-body').addClass('has-thumbnails');
+		}
+
 		/* We need to find every cell matching the same classes */
 		same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
 		$(same_cells).show();
 		$(same_cells).next().remove();
+
 	});
 
 	$('.table-body .table-cell').mouseenter(function(){