Blog: Minor layout tweaks

* Make header image clickable
* Make thumbnails on blog list clickable
* Put action buttons in .blog-action for easier positioning
* Cleanup

src/styles/blog.sass

@@ -666,3 +666,11 @@
 	span
 		color: $color-text-dark-secondary
 		pointer-events: none
+
+.blog-action
+	display: flex
+	padding: 10px
+	position: absolute
+	right: 0
+	top: 0
+	z-index: 1

src/templates/nodes/custom/blog/_macros.pug

@@ -1,60 +1,63 @@
 //- ******************************************************* -//
 | {% macro render_blog_post(node) %}
 | {% if node.picture %}
-.blog_index-header
+a.blog_index-header(href="{{ url_for_node(node=node) }}")
 	img(src="{{ node.picture.thumbnail('l', api=api) }}")
 | {% endif %}
+
 .blog_index-item
 	a.item-title(
 		href="{{ url_for_node(node=node) }}")
 		| {{node.name}}
 
 	.item-info.
-		<span title="{{node._created}}">{{node._created | pretty_date }}</span>
+		#[span(title="{{node._created}}") {{node._created | pretty_date }}]
 		{% if node._created != node._updated %}
-		<span title="{{node._updated}}">(updated {{node._updated | pretty_date }})</span>
+		#[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})]
 		{% endif %}
 		{% if node.properties.category %}| {{node.properties.category}}{% endif %}
-		| by {{node.user.full_name}}
+		· {{node.user.full_name}}
-		| <a href="{{ url_for_node(node=node) }}#comments">Leave a comment</a>
+		· #[a(href="{{ url_for_node(node=node) }}#comments") comment]
 		{% if node.properties.status != 'published' %} | {{ node.properties.status}} {% endif %}
 
 	.item-content
-		| {{node.properties.content}}
+		| {{ node.properties.content }}
 
-	.item-meta
-		a(href="{{ url_for_node(node=node) }}#comments") Leave a comment
 | {% endmacro %}
 
 //- ******************************************************* -//
 | {% macro render_blog_list_item(node) %}
 .blog_index-item.list
+
 	| {% if node.picture %}
-	.item-header
+	a.item-header(href="{{ url_for_node(node=node) }}")
 		img.image(src="{{ node.picture.thumbnail('s', api=api) }}")
 	| {% else %}
-	.item-header.nothumb
+	a.item-header.nothumb(href="{{ url_for_node(node=node) }}")
 		i.pi-document-text
 	| {% endif %}
+
 	a.item-title(
 		href="{{ url_for_node(node=node) }}")
 		| {{node.name}}
 
 	.item-info.
-		<span title="{{node._created}}">{{node._created | pretty_date }}</span>
+		#[span(title="{{node._created}}") {{node._created | pretty_date }}]
 		{% if node._created != node._updated %}
-		<span title="{{node._updated}}">(updated {{node._updated | pretty_date }})</span>
+		#[span(title="{{node._updated}}") (updated {{node._updated | pretty_date }})]
 		{% endif %}
-		{% if node.properties.category %}| {{node.properties.category}}{% endif %}
+		{% if node.properties.category %} · {{node.properties.category}}{% endif %}
-		| by {{node.user.full_name}}
+		· {{node.user.full_name}}
-		{% if node.properties.status != 'published' %} | {{ node.properties.status}} {% endif %}
+		{% if node.properties.status != 'published' %} · {{ node.properties.status}} {% endif %}
+
 | {% endmacro %}
 
 
 //- ******************************************************* -//
 | {% macro render_blog_index(project, posts, can_create_blog_posts, api, more_posts_available, posts_meta) %}
 | {% if can_create_blog_posts %}
-a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}")
+.blog-action
+	a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id=project._id)}}")
 		i.pi-plus
 		| Create New Post
 | {% endif %}
@@ -80,7 +83,7 @@ a.btn.btn-default.button-create(href="{{url_for('nodes.posts_create', project_id
 | {% else %}
 
 .blog_index-item
-	.item-content No posts yet.
+	.item-content No posts... yet!
 
 | {% endif %} {# posts #}
 | {% endmacro %}

src/templates/nodes/custom/blog/index.pug

@@ -22,13 +22,13 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017
 				href="{{ url_for('projects.view', project_url=project.url) }}")
 				| Browse Project
 
-		li.jstree-node.jstree-leaf(data-node-type="page")
+		li.jstree-node(data-node-type="page")
 			a.jstree-anchor.jstree-clicked(
 				href="{{ url_for('main.project_blog', project_url=project.url) }}") Blog
 
 		| {% for post in posts %}
 		li.jstree-node
-			a.jstree-anchor.tree-item(
+			a.jstree-anchor.tree-item.post(
 				href="{{ url_for_node(node=post) }}")
 				.tree-item-thumbnail
 					| {% if post.picture %}

src/templates/nodes/custom/post/view.pug

@@ -36,13 +36,13 @@ link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=1732017
 			href="{{ url_for('projects.view', project_url=project.url) }}")
 				| Browse Project
 
-		li.jstree-node.jstree-leaf(data-node-type="page")
+		li.jstree-node(data-node-type="page")
 			a.jstree-anchor(
 			href="{{ url_for('main.project_blog', project_url=project.url) }}") Blog
 
 		| {% for post in posts %}
 		li.jstree-node
-			a.jstree-anchor.tree-item(
+			a.jstree-anchor.tree-item.post(
 			href="{{ url_for_node(node=post) }}",
 			class="{% if post._id == node._id %}jstree-clicked{% endif %}")
 				.tree-item-thumbnail

src/templates/nodes/custom/post/view_embed.pug

@@ -2,18 +2,14 @@
 
 #blog_container(class="{% if project and project._id == config.MAIN_PROJECT_ID %}cloud-blog{% endif %}")
 
-	#blog_post-container.expand-image-links
+	#blog_index-container.expand-image-links
+		.blog-action
 			| {% if project and project._id == config.MAIN_PROJECT_ID %}
-		a.btn.btn-default.button-back(href="{{ url_for('projects.view', project_url=project.url) }}blog")
-			| Back to Blog
-
 			| {% if node.has_method('PUT') %}
 			a.btn.btn-default.button-edit(href="{{url_for('nodes.edit', node_id=node._id)}}")
 				i.pi-edit
 				| Edit Post
 			| {% endif %}
-
-		.clearfix
 			| {% endif %}
 
 		| {{ blogmacros.render_blog_post(node) }}