From 0f389d4afb978d74b4bbd8c3a9c240e32f3f2df6 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Mon, 24 Oct 2016 15:56:42 +0200
Subject: [PATCH] Project listing on Attract index

---
 src/styles/_dashboard.sass                    | 65 ++++++++++++++++++-
 .../attract/index_anon_left_column.jade       | 22 ++++++-
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/src/styles/_dashboard.sass b/src/styles/_dashboard.sass
index 4831583..c29cf6c 100644
--- a/src/styles/_dashboard.sass
+++ b/src/styles/_dashboard.sass
@@ -1,9 +1,19 @@
+.d-title
+	padding: 0 15px
+	text-align: center
+
 .d-welcome
 	height: 300px
+	margin: 0 auto
+	width: 100%
 	display: flex
 	flex-direction: column
 	align-items: center
 	justify-content: center
+	border-bottom: thin solid $color-background-dark
+
+	+media-xs
+		width: auto
 
 	.welcome-logo
 		font-size: 5em
@@ -26,13 +36,61 @@
 		padding: 10px
 		color: $color-text-dark-primary
 
+.d-projects
+	display: flex
+	flex-wrap: wrap
+	justify-content: space-between
+	margin: 15px auto
+	padding-left: 15px
+	padding-right: 15px
+
+	+media-xs
+		display: block
+		width: 100%
+
+	.d-projects-item
+		display: flex
+		flex-direction: column
+		width: 32%
+		margin-bottom: 15px
+		+container-box
+
+		+media-sm
+			width: 50%
+		+media-xs
+			width: 100%
+
+		&:hover
+			img
+				opacity: .9
+
+	.d-projects-item-title
+		font-size: 1.2em
+		font-weight: lighter
+		padding: 6px 10px
+
+	.d-projects-item-stats
+		.progress
+			border-radius: 0
+			border-bottom-left-radius: 3px
+			border-bottom-right-radius: 3px
+			margin: 0
+			height: 4px
+
+	.d-projects-item-header
+		background-color: $color-primary
+		img
+			width: 100%
+			border-top-left-radius: 3px
+			border-top-right-radius: 3px
+			transition: opacity 150ms ease-in-out
+
 
 /* General style for activities in all places */
 .d-activity
 	font-size: .9em
 
 	$activity-highlight-color: #00cc9f
-
 	ul
 		cursor: default
 		padding: 5px
@@ -86,8 +144,11 @@
 		padding: 0 20px
 	.d-activity
 		padding: 5px 15px
-		margin: 0 20px
+		margin: 0 20px 15px
 		+container-box
 
+		h3
+			margin-top: 10px
+
 		a
 			color: $color-text-dark-primary
diff --git a/src/templates/attract/index_anon_left_column.jade b/src/templates/attract/index_anon_left_column.jade
index ec8d98a..b05cf45 100644
--- a/src/templates/attract/index_anon_left_column.jade
+++ b/src/templates/attract/index_anon_left_column.jade
@@ -5,10 +5,26 @@
 	.welcome-title Welcome to Attract
 
 	.welcome-text
-		p Production Management Software
+		p Your Production Management Software
 
+h3.d-title Projects using Attract
 .d-projects
 	| {% for proj, summary in projs_with_summaries %}
-	h4
-		a(href="{{ url_for('attract.shots.perproject.index', project_url=proj.url) }}") {{ proj.name }}
+	.d-projects-item
+		a.d-projects-item-header(
+			href="{{ url_for('attract.shots.perproject.index', project_url=proj.url) }}")
+			img(src="{{ proj.picture_header.thumbnail('m', api=api) }}")
+		a.d-projects-item-title(
+			href="{{ url_for('attract.shots.perproject.index', project_url=proj.url) }}")
+			| {{ proj.name }}
+		.d-projects-item-stats
+			.progress
+				| {% for status, percentage in summary.percentages() %}
+				.progress-bar.bg-status(
+					class="status-{{status}}",
+					title="{{ status | undertitle }}",
+					role="progressbar",
+					style="width:{{percentage}}%")
+				| {% endfor %}
+
 	| {% endfor %}