From e3e586583f1d8dc441d5329210944abff115a6e7 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 22 Sep 2016 12:31:39 +0200
Subject: [PATCH] Use divs instead of table tags

Tables are non-responsive by design and require more overrides to be cross-browser compatible
---
 src/styles/_base.sass                        | 24 ++++++++++++++++++++
 src/styles/_config.sass                      |  2 ++
 src/styles/_shots.sass                       | 23 +++++++++++++++++++
 src/styles/main.sass                         |  1 +
 src/templates/attract/shots/for_project.jade | 22 ++++++++++--------
 5 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 src/styles/_shots.sass

diff --git a/src/styles/_base.sass b/src/styles/_base.sass
index 6d04659..e3517fd 100644
--- a/src/styles/_base.sass
+++ b/src/styles/_base.sass
@@ -115,3 +115,27 @@ select.input-transparent
 	color: $color-text-dark-secondary
 	margin-left: auto
 	font-size: .9em
+
+.table
+	display: table
+	width: 100%
+
+	.table-row
+		display: table-row
+		&:hover
+			background-color: $color-background-light
+
+	.table-head
+		display: table-header-group
+
+		.table-cell
+			padding: 5px
+			font-size: .9em
+			color: $color-text-dark-secondary
+
+	.table-body
+		display: table-row-group
+
+	.table-cell
+		display: table-cell
+		border-bottom: thin solid $color-background-dark
diff --git a/src/styles/_config.sass b/src/styles/_config.sass
index 3d681e1..d708d37 100644
--- a/src/styles/_config.sass
+++ b/src/styles/_config.sass
@@ -73,3 +73,5 @@ $screen-md-max: $screen-lg-min - 1
 
 
 $sidebar-width: 50px
+
+$shots-list-thumbnail-width: 100px
diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass
new file mode 100644
index 0000000..a961eff
--- /dev/null
+++ b/src/styles/_shots.sass
@@ -0,0 +1,23 @@
+.table
+	.table-head
+		.table-cell
+			&.shot-thumbnail
+				width: $shots-list-thumbnail-width
+
+			&.task-type
+				text-transform: capitalize
+
+	.table-body
+		display: table-row-group
+		.table-cell
+			&.shot-name
+				padding-left: 10px
+
+			&.task-name
+				max-width: 120px
+				+text-overflow-ellipsis
+
+				a
+					display: block
+
+
diff --git a/src/styles/main.sass b/src/styles/main.sass
index fe5bc49..6ded47a 100644
--- a/src/styles/main.sass
+++ b/src/styles/main.sass
@@ -4,3 +4,4 @@
 
 @import _base
 @import _tasks
+@import _shots
diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade
index 549d382..85abd50 100644
--- a/src/templates/attract/shots/for_project.jade
+++ b/src/templates/attract/shots/for_project.jade
@@ -8,25 +8,27 @@
 
 		a#task-add(href="javascript:task_create('{{ project.url }}');") + Create Shot
 
-	table.table
-		thead
-			tr
-				td Name
+	.table
+		.table-head
+			.table-row
+				.table-cell.shot-thumbnail Thumbnail
+				.table-cell.shot-name Name
 				| {% for task_type in task_types %}
-				td.text-capitalize {{ task_type or 'other' }}
+				.table-cell.task-type {{ task_type or 'other' }}
 				| {% endfor %}
-		tbody
+		.table-body
 			| {% for shot in shots %}
-			tr
-				td {{ shot.name }}
+			.table-row
+				.table-cell
+					img(src="http://placehold.it/100x60")
+				.table-cell.shot-name {{ shot.name }}
 				| {% for task_type in task_types %}
-				td
+				.table-cell.task-name
 					| {% for task in tasks_for_shots[shot._id][task_type] %}
 					a(
 						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
 						class="status-{{ task.properties.status }}")
 						span(class="task-name-{{ task._id }}") {{ task.name }}
-					br
 					| {% endfor %}
 					| {% if not tasks_for_shots[shot._id][task_type] %}
 					a(