From 2bae7c2fef7a83f5eaa01c4d631eaf0b84b44721 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Thu, 1 Dec 2016 16:21:02 +0100
Subject: [PATCH] Thumbnail on list of blogs on sidebar

---
 src/styles/_project.sass                   |  1 -
 src/styles/plugins/_jstree.sass            | 23 ++++++++++++++++++++++
 src/templates/nodes/custom/blog/index.jade | 12 ++++++++---
 src/templates/nodes/custom/post/view.jade  | 12 ++++++++---
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index 624169bc..bac7f588 100644
--- a/src/styles/_project.sass
+++ b/src/styles/_project.sass
@@ -670,7 +670,6 @@ ul.project_nav-edit-list
 	flex-direction: column
 	flex: 1
 	height: 100%
-	color: $color-text-light
 	background-color: white
 
 #project_context-header+#project_context
diff --git a/src/styles/plugins/_jstree.sass b/src/styles/plugins/_jstree.sass
index b0897343..f0e8398f 100644
--- a/src/styles/plugins/_jstree.sass
+++ b/src/styles/plugins/_jstree.sass
@@ -205,9 +205,32 @@ $tree-color-highlight-background-text: white
 
 	&.blog
 		.jstree-anchor
+			padding: 5px 5px 5px 10px
 			&:hover, &:hover i
 				color: $tree-color-highlight
 
+			&.jstree-clicked .tree-item-info
+				color: white
+
+		.tree-item-info
+			display: block
+			font-size: .9em
+			margin-left: 20px
+			padding: 2px 0
+			line-height: 1em
+			color: $color-text-dark-secondary
+
+		.tree-item-thumbnail
+			width: 20px
+			height: 20px
+			float: left
+			margin: 0 5px 5px -5px
+			img
+				border-radius: 3px
+				width: 20px
+				height: 20px
+
+
 .jstree-loading
 	padding: 5px
 	color: $color-text-light-secondary
diff --git a/src/templates/nodes/custom/blog/index.jade b/src/templates/nodes/custom/blog/index.jade
index a61cec14..61707bfb 100644
--- a/src/templates/nodes/custom/blog/index.jade
+++ b/src/templates/nodes/custom/blog/index.jade
@@ -102,14 +102,20 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1122016
 		li.jstree-node
 			a.jstree-anchor(
 				href="{{ url_for_node(node=post) }}")
-				i.jstree-icon.pi-document-text
-				| {{ post.name }}
+				.tree-item-thumbnail
+					| {% if post.picture %}
+					img(src="{{ post.picture.thumbnail('s', api=api) }}")
+					| {% else %}
+					i.pi-document-text
+					| {% endif %}
+				span.tree-item-title {{ post.name }}
+				span.tree-item-info
+					| {{ post._created | pretty_date }} · {{ post.user.full_name }}
 		| {% endfor %}
 
 		li.jstree-node(data-node-type="page")
 			a.jstree-anchor(
 				href="{{ url_for('projects.view', project_url=project.url) }}")
-				i.jstree-icon.pi-folder
 				| Browse Project
 | {% endblock %}
 
diff --git a/src/templates/nodes/custom/post/view.jade b/src/templates/nodes/custom/post/view.jade
index ab4ef764..d99aff73 100644
--- a/src/templates/nodes/custom/post/view.jade
+++ b/src/templates/nodes/custom/post/view.jade
@@ -64,14 +64,20 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1122016
 			a.jstree-anchor(
 				href="{{ url_for_node(node=post) }}",
 				class="{% if post._id == node._id %}jstree-clicked{% endif %}")
-				i.jstree-icon.pi-document-text
-				| {{ post.name }}
+				.tree-item-thumbnail
+					| {% if post.picture %}
+					img(src="{{ post.picture.thumbnail('s', api=api) }}")
+					| {% else %}
+					i.pi-document-text
+					| {% endif %}
+				span.tree-item-title {{ post.name }}
+				span.tree-item-info
+					| {{ post._created | pretty_date }} · {{ post.user.full_name }}
 		| {% endfor %}
 
 		li.jstree-node(data-node-type="page")
 			a.jstree-anchor(
 				href="{{ url_for('projects.view', project_url=project.url) }}")
-				i.jstree-icon.pi-folder
 				| Browse Project
 | {% endblock %}