Fix markdown on coments

src/styles/_comments.sass

@@ -436,15 +436,17 @@ $comments-width-max: 710px
 
 					.comment-reply-preview
 						position: relative
-						margin: 0 auto 5px auto
+						margin: 10px auto 5px auto
 						padding: 10px
 						color: $color-text-dark-primary
+						border-top: thin solid $color-background-dark
+						border-bottom: thin solid $color-background
 						transition: all 150ms ease-in-out
 
 						&:before
 							content: 'Live Preview'
 							position: absolute
-							top: -28px
+							top: -20px
 							font-size: .9em
 							color: $color-text-dark-hint
 							transition: color 150ms ease-in-out
@@ -462,6 +464,7 @@ $comments-width-max: 710px
 						color: transparent
 						margin: 0 auto
 						padding: 0 10px
+						border: none
 
 						&:before
 							content: ''
@@ -497,10 +500,6 @@ $comments-width-max: 710px
 						.comment-rules
 							padding-right: 8px
 							margin-right: 8px
-							&:after
-								content: "·"
-								position: relative
-								right: -8px
 
 							a
 								color: $color-text-dark-hint
@@ -520,7 +519,7 @@ $comments-width-max: 710px
 						min-height: 30px
 						transition: all 200ms ease-in-out
 
-						+button($color-success, 6px)
+						+button($color-success, 3px)
 						position: relative
 
 						span.hint
@@ -550,7 +549,7 @@ $comments-width-max: 710px
 
 
 						&.button-field-error
-							+button($color-danger, 6px)
+							+button($color-danger, 3px)
 							background: transparent
 
 							pointer-events: none
@@ -567,7 +566,7 @@ $comments-width-max: 710px
 							left: 15px
 							right: 15px
 
-						+button($color-text-dark-secondary, 6px)
+						+button($color-text-dark-secondary, 3px)
 						border-color: transparent
 
 						i

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

@@ -6,7 +6,9 @@
 		.comment-reply-container
 			| {% if can_post_comments %}
 			.comment-reply-avatar
-				img(src="{{ current_user.gravatar }}")
+				img(
+					title="Commenting as {{ current_user.full_name }}",
+					src="{{ current_user.gravatar }}")
 
 			.comment-reply-form
 
@@ -14,20 +16,17 @@
 					textarea(
 						id="comment_field",
 						data-parent-id="{{ node_id }}",
-						placeholder="Join the conversation...",)
+						placeholder="Join the conversation...")
 
 					.comment-reply-meta
 						.comment-details
 							.comment-rules
 								a(
-									title="Markdown Supported"
+									title="Markdown Supported",
+									target="_blank",
 									href="https://guides.github.com/features/mastering-markdown/")
 									i.pi-markdown
 
-							.comment-author
-								span.commenting-as commenting as
-								span.author-name {{ current_user.full_name }}
-
 						button.comment-action-cancel.btn.btn-outline(
 							type="button",
 							title="Cancel")
@@ -35,9 +34,8 @@
 						button.comment-action-submit.btn.btn-outline(
 							id="comment_submit",
 							type="button",
-							title="Post Comment")
+							title="Post Comment (Ctrl+Enter)")
 							| Post Comment
-							span.hint (Ctrl+Enter)
 
 					.comment-reply-preview
 
@@ -78,9 +76,16 @@
 				| {{ macros.render_comment(comment, False) }}
 				| {% endfor %}
 		| {% endif %}
-| {% block comment_scripts %}
 
+| {% block comment_scripts %}
+script(src="{{ url_for('static_pillar', filename='assets/js/markdown.min.js', v=141020161) }}")
 script.
+
+	// Markdown initialization
+	var convert = new Markdown.getSanitizingConverter();
+	Markdown.Extra.init(convert);
+	convert = convert.makeHtml;
+
 	/* Submit new comment */
 	$('.comment-action-submit').click(function(e){
 		var $button = $(this);
@@ -122,21 +127,28 @@ script.
 	/* Edit comment */
 
 	// Markdown convert as we type in the textarea
-	$(document).on('keyup','body .comment-content textarea',function(e){
+	$(document).on('keyup','body .comment-reply-field textarea',function(e){
 		var $textarea = $(this);
 		var $container = $(this).parent();
-		var $preview = $container.next();
+		var $preview = $textarea.next().next();
 
 		// TODO: communicate with back-end to do the conversion,
 		// rather than relying on our JS-converted Markdown.
 		$preview.html(convert($textarea.val()));
 
 		// While we are at it, style if empty
-		if (!$textarea.val()) {
-			$container.addClass('empty');
+		if ($textarea.val()) {
+			$container.addClass('filled');
 		} else {
-			$container.removeClass('empty');
-		};
+			$container.removeClass('filled');
+		}
+
+		// Send on ctrl+enter
+		if ($textarea.is(":focus")) {
+			if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey){
+				$( ".comment-action-submit" ).trigger( "click" );
+			}
+		}
 	});