Comments: More compact layout

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

@@ -4,41 +4,45 @@
 	data-node-id="{{ comment._id }}",
 	class="{% if is_reply %}is-reply{% else %}is-first{% endif %}")
 
-	.comment-header
-		.comment-avatar
-			img(src="{{ comment._user.email | gravatar }}")
+	.comment-avatar
+		img(src="{{ comment._user.email | gravatar }}")
 
-		.comment-author(class="{% if comment._is_own %}own{% endif %}")
-			| {{ comment._user.full_name }}
-			span.username ({{ comment._user.username }})
+	.comment-content
+		.comment-body
+			p.comment-author {{ comment._user.full_name }}
 
-		.comment-time {{ comment._created | pretty_date_time }} {% if comment._created != comment._updated %} (edited {{ comment._updated | pretty_date_time }}){% endif %}
+			| {{comment.properties.content_html | safe }}
 
-	.comment-content {{comment.properties.content_html | safe }}
-	| {% if comment._is_own %}
-	.comment-content-preview
-	| {% endif %}
+		// TODO: Markdown preview when editing
 
-	.comment-meta
-		.comment-rating(
-			class="{% if comment._current_user_rating is not none %}rated{% if comment._current_user_rating %} positive{% endif %}{% endif %}")
-			.comment-rating-value(title="Number of likes") {{ comment._rating }}
-			| {% if not comment._is_own %}
-			.comment-action-rating.up(title="Like comment")
+		.comment-meta
+			.comment-rating(
+				class="{% if comment._current_user_rating is not none %}rated{% if comment._current_user_rating %} positive{% endif %}{% endif %}")
+				.comment-rating-value(title="Number of likes") {{ comment._rating }}
+
+				| {% if not comment._is_own %}
+				.comment-action-rating.up(title="Like comment")
+				| {% endif %}
+
+			.comment-action-reply(title="Reply to this comment")
+				span reply
+
+			| {% if comment._is_own %}
+			.comment-action-edit
+				span.edit_mode(title="Edit comment") edit
+				span.edit_save(title="Save comment")
+					i.pi-check
+					| save changes
+				span.edit_cancel(title="Cancel changes")
+					i.pi-cancel
+					| cancel
 			| {% endif %}
 
-		.comment-action-reply(title="Reply to this comment")
-			span reply
-		| {% if comment._is_own %}
-		.comment-action-edit
-			span.edit_mode(title="Edit comment") edit
-			span.edit_save(title="Save comment")
-				i.pi-check
-				| save changes
-			span.edit_cancel(title="Cancel changes")
-				i.pi-cancel
-				| cancel
-		| {% endif %}
+			.comment-time
+				| {{ comment._created | pretty_date_time }}
+				| {% if comment._created != comment._updated %}
+				span(title="edited {{ comment._updated | pretty_date_time }})") *
+				| {% endif %}
 
 | {% for reply in comment['_replies']['_items'] %}
 | {{ render_comment(reply, True) }}

src/templates/nodes/custom/comment/list_embed.pug

@@ -17,25 +17,29 @@
 						placeholder="Join the conversation...")
 
 					.comment-reply-meta
-						.comment-details
-							.comment-rules
-								a(
-									title="Markdown Supported",
-									target="_blank",
-									href="https://guides.github.com/features/mastering-markdown/")
-									i.pi-markdown
 
-						button.comment-action-cancel.btn.btn-outline(
-							type="button",
-							title="Cancel")
-							i.pi-cancel
-						button.comment-action-submit.btn.btn-outline(
+						button.comment-action-submit(
 							id="comment_submit",
 							type="button",
 							title="Post Comment (Ctrl+Enter)")
-							| Post Comment
+							span
+								i.pi-paper-plane
+								| Send
+							span.hotkey Ctrl + Enter
 
-					.comment-reply-preview
+				.comment-reply-preview
+					.comment-reply-preview-md
+					.comment-reply-info
+						.comment-action-cancel(
+							type="button",
+							title="Cancel")
+							span cancel
+
+						a(
+							title="Handy guide of Markdown syntax",
+							target="_blank",
+							href="https://guides.github.com/features/mastering-markdown/")
+							span markdown cheatsheet
 
 			| {% elif current_user.is_authenticated %}
 
@@ -119,7 +123,7 @@ script.
 		.on( 'keyup','body .comment-reply-field textarea',function(e){
 		var $textarea = $(this);
 		var $container = $(this).parent();
-		var $preview = $textarea.next().next();
+		var $preview = $container.parent().find('.comment-reply-preview-md');
 
 		// TODO: communicate with back-end to do the conversion,
 		// rather than relying on our JS-converted Markdown.
@@ -149,13 +153,14 @@ script.
 
 		comment_mode(this, 'edit');
 
-		var parent_div = $(this).closest('.comment-container');
-		var comment_id = parent_div.data('node-id');
+		var $parent_div = $(this).closest('.comment-container');
+		var comment_id = $parent_div.data('node-id');
 
-		var comment_content = parent_div.find('.comment-content');
+		var comment_content = $parent_div.find('.comment-body');
 		var height = comment_content.height();
 
 		loadComment(comment_id, {'properties.content': 1})
+
 		.done(function(data) {
 			var comment_raw = data['properties']['content'];
 			comment_content.html($('<textarea>').text(comment_raw));
@@ -165,7 +170,6 @@ script.
 				.height(Math.max(150, height + 30))
 				.focus()
 				.trigger('keyup');
-			comment_content.siblings('.comment-content-preview').show();
 		})
 		.fail(function(xhr) {
 			if (console) console.log('Error fetching comment: ', xhr);
@@ -205,7 +209,7 @@ script.
 		.done(function(comment_id, comment_html) {
 			commentEditCancel($button, false)
 
-			$container.find('.comment-content')
+			$container.find('.comment-body')
 				.html(comment_html)
 				.flashOnce();