From 411b173ffff2e77cf86d50206acf0e859ffb4d56 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Fri, 8 Jan 2016 15:17:48 +0900
Subject: [PATCH 1/6] link to profile from user name

---
 public/templates/comments/comments.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/templates/comments/comments.tpl b/public/templates/comments/comments.tpl
index 75ca202a..8fb8027c 100644
--- a/public/templates/comments/comments.tpl
+++ b/public/templates/comments/comments.tpl
@@ -39,7 +39,7 @@
 						</a>
 					</div>
 					<div class="topic-text">
-						<div class="post-content" itemprop="text"><small><strong>{user.username}</strong> commented {posts.timestamp}</small><br />{posts.content}</div>
+						<div class="post-content" itemprop="text"><small><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp}</small><br />{posts.content}</div>
 					</div>
 				</div>
 			</div>

From 89eeaab45b483d1d1fe5670e97db94f703568968 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Fri, 8 Jan 2016 19:19:22 +0900
Subject: [PATCH 2/6] layout for reply comments

---
 public/css/comments.css                | 64 +++++++++++++++++++++++++-
 public/templates/comments/comments.tpl | 12 ++++-
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/public/css/comments.css b/public/css/comments.css
index 45ff9a3c..4f42b575 100644
--- a/public/css/comments.css
+++ b/public/css/comments.css
@@ -58,6 +58,7 @@
 	color: #333;
 	overflow: hidden;
 	word-wrap: break-word;
+	transition: background-color 0.6s ease;
 }
 
 #nodebb .topic-text blockquote {
@@ -89,7 +90,7 @@
 
 #nodebb > ul {
     margin-bottom: 0px;
-    margin-top: 20px;
+    margin-top: 25px;
     list-style-type: none;
     padding: 0px;
 }
@@ -205,4 +206,63 @@
 	width: 20px;
 	height: 20px;
 	border-radius: 100%;
-}
\ No newline at end of file
+}
+
+.sub-reply-input {
+	margin-left: 20px;
+	margin-right: 20px;
+	margin-bottom: 10px;
+	padding-bottom: 48px;
+}
+
+.no-select {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+.post-tools {
+	float: right;
+	text-transform: lowercase;
+}
+
+.post-tools a {
+	padding-right: 10px;
+	cursor: pointer;
+	color: #38C071;
+	text-decoration: none;
+}
+
+.reply-label {
+	padding: 1px 5px;
+	margin: 0;
+	font-size: 12px;
+	line-height: 1.5;
+	color: #333;
+	background-color: #fff;
+	cursor: pointer;
+	border: 1px solid #ccc;
+	white-space: nowrap;
+	-webkit-appearance: button;
+	-moz-appearance: button;
+}
+
+.reply-label:hover {
+	background-color: #E6E6E6;
+}
+
+.hidden {
+	display: none;
+}
+
+.highlight {
+	background-color: rgba(240, 173, 78, 0.75);
+}
+
+.post-content blockquote {
+	font-size: 12px;
+	padding: 10px 20px;
+	margin: 0 0 20px;
+	font-size: 17.5px;
+	border-left: 5px solid #eee;
+}
diff --git a/public/templates/comments/comments.tpl b/public/templates/comments/comments.tpl
index 8fb8027c..4126b897 100644
--- a/public/templates/comments/comments.tpl
+++ b/public/templates/comments/comments.tpl
@@ -27,7 +27,7 @@
 	<ul id="nodebb-comments-list">
 		<!-- BEGIN posts -->
 		<li <!-- IF pagination --> class="nodebb-post-fadein" <!-- ENDIF pagination --> <!-- IF !posts.index --> class="nodebb-post-fadein" <!-- ENDIF !posts.index --> >
-			<div class="topic-item">
+			<div class="topic-item" data-pid="{posts.pid}" data-userslug="{user.userslug}">
 				<div class="topic-body">
 					<div class="topic-profile-pic">
 						<a href="{relative_path}/user/{user.userslug}">
@@ -39,9 +39,17 @@
 						</a>
 					</div>
 					<div class="topic-text">
-						<div class="post-content" itemprop="text"><small><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp}</small><br />{posts.content}</div>
+						<div class="post-content" itemprop="text"><small><span class="post-tools no-select"><a component="post/reply">reply</a><a component="post/quote">quote</a></span><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp} <!-- IF posts.isReply --> <button component="post/parent" class="reply-label no-select" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parentUsername}</button> <!-- ENDIF posts.isReply --> </small><br /><div class="post-body">{posts.content}</div></div>
 					</div>
 				</div>
+				<form action="{relative_path}/comments/reply" method="post" class="sub-reply-input hidden">
+					<textarea id="nodebb-content" class="form-control" name="content" placeholder="Join the conversation" rows="3"></textarea>
+					<button class="btn btn-primary">Reply to {user.username}</button>
+					<input type="hidden" name="_csrf" value="{token}" />
+					<input type="hidden" name="tid" value="{tid}" />
+					<input type="hidden" name="toPid" value="{posts.pid}" />
+					<input type="hidden" name="url" value="{redirect_url}" />
+				</form>
 			</div>
 		</li>
 		<!-- END posts -->

From 14fc1ca5c4f7b87757953188aac55da6fa747620 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Tue, 12 Jan 2016 19:53:34 +0900
Subject: [PATCH 3/6] logic for reply comments

---
 public/lib/general.js   | 47 +++++++++++++++++++++++++++++++++++++++++
 public/lib/ghost.js     | 47 +++++++++++++++++++++++++++++++++++++++++
 public/lib/wordpress.js | 47 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 141 insertions(+)

diff --git a/public/lib/general.js b/public/lib/general.js
index 13f3b050..aab14a17 100644
--- a/public/lib/general.js
+++ b/public/lib/general.js
@@ -64,6 +64,8 @@
 			for (var post in data.posts) {
 				if (data.posts.hasOwnProperty(post)) {
 					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
+					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
+					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
 					if (data.posts[post]['blog-comments:url']) {
 						delete data.posts[post];
 					}
@@ -144,6 +146,51 @@
 						authenticate('login');
 					}
 				}
+
+				var nodebbCommentsList = nodebbDiv.querySelector('#nodebb-comments-list');
+				var bindOnClick = function(nodeList, handler) {
+					for (var i = nodeList.length - 1; i >= 0; i--) {
+					  nodeList[i].onclick = handler;
+					}
+				};
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
+					goTo.scrollIntoView(true);
+					goTo.classList.add('highlight');
+					setTimeout(function() {
+						goTo.classList.remove('highlight');
+					}, 1000);
+
+				});
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/reply"],[component="post/quote"]'), function(event) {
+					var topicItem = event.target;
+					while (topicItem && !topicItem.classList.contains('topic-item')) {
+						topicItem = topicItem.parentElement;
+					}
+
+					if (topicItem) {
+						var elementForm = topicItem.querySelector('form');
+						var visibleForm = nodebbCommentsList.querySelector('li .topic-item form:not(.hidden)');
+						var formInput = elementForm.querySelector('textarea');
+
+						if (visibleForm && visibleForm !== elementForm) {
+							visibleForm.classList.add('hidden');
+						}
+
+						if (/\/quote$/.test(event.target.getAttribute('component'))) {
+							var postBody = topicItem.querySelector('.post-content .post-body');
+							var quote = (postBody.innerText ? postBody.innerText : postBody.textContent).split('\n').map(function(line) { return line ? '> ' + line : line; }).join('\n');
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ' said:\n' + quote + formInput.value;
+						} else {
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ': ' + formInput.value
+						}
+
+						elementForm.classList.remove('hidden');
+					}
+				});
+
 			} else {
 				if (data.isAdmin) {
 						if (articleData) {
diff --git a/public/lib/ghost.js b/public/lib/ghost.js
index 8ab7df1a..4e2221f2 100644
--- a/public/lib/ghost.js
+++ b/public/lib/ghost.js
@@ -64,6 +64,8 @@
 			for (var post in data.posts) {
 				if (data.posts.hasOwnProperty(post)) {
 					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
+					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
+					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
 					if (data.posts[post]['blog-comments:url']) {
 						delete data.posts[post];
 					}
@@ -143,6 +145,51 @@
 						authenticate('login');
 					}
 				}
+
+				var nodebbCommentsList = nodebbDiv.querySelector('#nodebb-comments-list');
+				var bindOnClick = function(nodeList, handler) {
+					for (var i = nodeList.length - 1; i >= 0; i--) {
+					  nodeList[i].onclick = handler;
+					}
+				};
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
+					goTo.scrollIntoView(true);
+					goTo.classList.add('highlight');
+					setTimeout(function() {
+						goTo.classList.remove('highlight');
+					}, 1000);
+
+				});
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/reply"],[component="post/quote"]'), function(event) {
+					var topicItem = event.target;
+					while (topicItem && !topicItem.classList.contains('topic-item')) {
+						topicItem = topicItem.parentElement;
+					}
+
+					if (topicItem) {
+						var elementForm = topicItem.querySelector('form');
+						var visibleForm = nodebbCommentsList.querySelector('li .topic-item form:not(.hidden)');
+						var formInput = elementForm.querySelector('textarea');
+
+						if (visibleForm && visibleForm !== elementForm) {
+							visibleForm.classList.add('hidden');
+						}
+
+						if (/\/quote$/.test(event.target.getAttribute('component'))) {
+							var postBody = topicItem.querySelector('.post-content .post-body');
+							var quote = (postBody.innerText ? postBody.innerText : postBody.textContent).split('\n').map(function(line) { return line ? '> ' + line : line; }).join('\n');
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ' said:\n' + quote + formInput.value;
+						} else {
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ': ' + formInput.value
+						}
+
+						elementForm.classList.remove('hidden');
+					}
+				});
+
 			} else {
 				if (data.isAdmin) {
 					var markdown = document.getElementById('nbb-markdown').innerHTML
diff --git a/public/lib/wordpress.js b/public/lib/wordpress.js
index b1554a46..37496143 100644
--- a/public/lib/wordpress.js
+++ b/public/lib/wordpress.js
@@ -64,6 +64,8 @@
 			for (var post in data.posts) {
 				if (data.posts.hasOwnProperty(post)) {
 					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
+					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
+					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
 					if (data.posts[post]['blog-comments:url']) {
 						delete data.posts[post];
 					}
@@ -144,6 +146,51 @@
 						authenticate('login');
 					}
 				}
+
+				var nodebbCommentsList = nodebbDiv.querySelector('#nodebb-comments-list');
+				var bindOnClick = function(nodeList, handler) {
+					for (var i = nodeList.length - 1; i >= 0; i--) {
+					  nodeList[i].onclick = handler;
+					}
+				};
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
+					goTo.scrollIntoView(true);
+					goTo.classList.add('highlight');
+					setTimeout(function() {
+						goTo.classList.remove('highlight');
+					}, 1000);
+
+				});
+
+				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/reply"],[component="post/quote"]'), function(event) {
+					var topicItem = event.target;
+					while (topicItem && !topicItem.classList.contains('topic-item')) {
+						topicItem = topicItem.parentElement;
+					}
+
+					if (topicItem) {
+						var elementForm = topicItem.querySelector('form');
+						var visibleForm = nodebbCommentsList.querySelector('li .topic-item form:not(.hidden)');
+						var formInput = elementForm.querySelector('textarea');
+
+						if (visibleForm && visibleForm !== elementForm) {
+							visibleForm.classList.add('hidden');
+						}
+
+						if (/\/quote$/.test(event.target.getAttribute('component'))) {
+							var postBody = topicItem.querySelector('.post-content .post-body');
+							var quote = (postBody.innerText ? postBody.innerText : postBody.textContent).split('\n').map(function(line) { return line ? '> ' + line : line; }).join('\n');
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ' said:\n' + quote + formInput.value;
+						} else {
+							formInput.value = '@' + topicItem.getAttribute('data-userslug') + ': ' + formInput.value
+						}
+
+						elementForm.classList.remove('hidden');
+					}
+				});
+
 			} else {
 				if (data.isAdmin) {
 					var adminXHR = newXHR();

From 267167033b3bfc7654216c82630a0bad7e2745fe Mon Sep 17 00:00:00 2001
From: psychobunny <rodrigues.andrew@gmail.com>
Date: Fri, 8 Jan 2016 11:08:23 -0500
Subject: [PATCH 4/6] 0.4.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b7148e78..a81da62f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-blog-comments",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "NodeBB Blog Comments (Ghost / WP Commenting Engine)",
   "main": "library.js",
   "scripts": {

From 06c5a08e5b1c09ab9003b3bf51e5680d5cacd2e8 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Tue, 12 Jan 2016 20:58:44 +0900
Subject: [PATCH 5/6] include toPid in requests

---
 library.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/library.js b/library.js
index df2a1846..3db3ba95 100644
--- a/library.js
+++ b/library.js
@@ -110,11 +110,13 @@
 		var content = req.body.content,
 			tid = req.body.tid,
 			url = req.body.url,
+			toPid = req.body.toPid,
 			uid = req.user ? req.user.uid : 0;
 
 		topics.reply({
 			tid: tid,
 			uid: uid,
+			toPid: toPid,
 			content: content
 		}, function(err, postData) {
 			if(err) {

From 2b236a08d316e4418bccbe1e4b035fd6a8500f0e Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Wed, 13 Jan 2016 13:26:48 +0900
Subject: [PATCH 6/6] improved reply label behavior

---
 public/css/comments.css                | 34 ++++++++++++------
 public/lib/general.js                  | 49 +++++++++++++++++++++-----
 public/lib/ghost.js                    | 49 +++++++++++++++++++++-----
 public/lib/wordpress.js                | 49 +++++++++++++++++++++-----
 public/templates/comments/comments.tpl |  2 +-
 5 files changed, 145 insertions(+), 38 deletions(-)

diff --git a/public/css/comments.css b/public/css/comments.css
index 4f42b575..9f7b10c3 100644
--- a/public/css/comments.css
+++ b/public/css/comments.css
@@ -25,6 +25,7 @@
 	color: #333;
 	min-height: 75px;
 	position: relative;
+	transition: background-color 0.6s ease;
 }
 
 #nodebb .topic-body {
@@ -58,7 +59,6 @@
 	color: #333;
 	overflow: hidden;
 	word-wrap: break-word;
-	transition: background-color 0.6s ease;
 }
 
 #nodebb .topic-text blockquote {
@@ -208,32 +208,32 @@
 	border-radius: 100%;
 }
 
-.sub-reply-input {
+#nodebb .sub-reply-input {
 	margin-left: 20px;
 	margin-right: 20px;
 	margin-bottom: 10px;
 	padding-bottom: 48px;
 }
 
-.no-select {
+#nodebb .no-select {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 }
 
-.post-tools {
+#nodebb .post-tools {
 	float: right;
 	text-transform: lowercase;
 }
 
-.post-tools a {
+#nodebb .post-tools a {
 	padding-right: 10px;
 	cursor: pointer;
 	color: #38C071;
 	text-decoration: none;
 }
 
-.reply-label {
+#nodebb .reply-label {
 	padding: 1px 5px;
 	margin: 0;
 	font-size: 12px;
@@ -243,23 +243,37 @@
 	cursor: pointer;
 	border: 1px solid #ccc;
 	white-space: nowrap;
+	transition: background-color 0.6s ease;
 	-webkit-appearance: button;
 	-moz-appearance: button;
 }
 
-.reply-label:hover {
+#nodebb .reply-label i {
+	pointer-events: none;
+}
+
+#nodebb .reply-label:hover {
 	background-color: #E6E6E6;
 }
 
-.hidden {
+#nodebb .hidden {
 	display: none;
 }
 
-.highlight {
+#nodebb-load-more {
+	transition: background-color 0.6s ease;
+}
+
+#nodebb .highlight {
+	background-color: rgba(240, 173, 78, 0.75);
+}
+
+#nodebb .btn.btn-primary.highlight {
+	border-color: rgba(240, 173, 78, 0.75);
 	background-color: rgba(240, 173, 78, 0.75);
 }
 
-.post-content blockquote {
+#nodebb .post-content blockquote {
 	font-size: 12px;
 	padding: 10px 20px;
 	margin: 0 0 20px;
diff --git a/public/lib/general.js b/public/lib/general.js
index aab14a17..37f71bee 100644
--- a/public/lib/general.js
+++ b/public/lib/general.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -153,13 +164,33 @@
 					  nodeList[i].onclick = handler;
 					}
 				};
+				var isInViewport = function(element) {
+					var rect = element.getBoundingClientRect();
+					return (
+					    rect.top >= 0 && rect.left >= 0 &&
+					    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+					    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+					);
+				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					if (!isInViewport(goTo)) {
+						goTo.scrollIntoView(false);
+					}
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/lib/ghost.js b/public/lib/ghost.js
index 4e2221f2..0178cce9 100644
--- a/public/lib/ghost.js
+++ b/public/lib/ghost.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -152,13 +163,33 @@
 					  nodeList[i].onclick = handler;
 					}
 				};
+				var isInViewport = function(element) {
+					var rect = element.getBoundingClientRect();
+					return (
+					    rect.top >= 0 && rect.left >= 0 &&
+					    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+					    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+					);
+				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					if (!isInViewport(goTo)) {
+						goTo.scrollIntoView(false);
+					}
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/lib/wordpress.js b/public/lib/wordpress.js
index 37496143..d83eedcb 100644
--- a/public/lib/wordpress.js
+++ b/public/lib/wordpress.js
@@ -61,13 +61,24 @@
 			data.pagination = pagination;
 			data.postCount = parseInt(data.postCount, 10);
 
-			for (var post in data.posts) {
-				if (data.posts.hasOwnProperty(post)) {
-					data.posts[post].timestamp = timeAgo(parseInt(data.posts[post].timestamp), 10);
-					data.posts[post].isReply = data.posts[post].hasOwnProperty('toPid') && parseInt(data.posts[post].toPid) !== parseInt(data.tid) - 1;
-					data.posts[post].parentUsername = data.posts[post].hasOwnProperty('parent') ? data.posts[post].parent.username : '';
-					if (data.posts[post]['blog-comments:url']) {
-						delete data.posts[post];
+			for (var p in data.posts) {
+				if (data.posts.hasOwnProperty(p)) {
+					var post = data.posts[p];
+					post.timestamp = timeAgo(parseInt(post.timestamp), 10);
+					post.isReply = post.hasOwnProperty('toPid') && parseInt(post.toPid) !== parseInt(data.tid) - 1;
+					post.deletedReply = false;
+					post.parentUsername = '';
+
+					if (post.hasOwnProperty('parent')) {
+						if (post.parent.hasOwnProperty('username')) {
+							post.parentUsername = post.parent.username;
+						} else {
+							post.deletedReply = true;
+						}
+					}
+
+					if (post['blog-comments:url']) {
+						delete data.posts[p];
 					}
 				}
 			}
@@ -153,13 +164,33 @@
 					  nodeList[i].onclick = handler;
 					}
 				};
+				var isInViewport = function(element) {
+					var rect = element.getBoundingClientRect();
+					return (
+					    rect.top >= 0 && rect.left >= 0 &&
+					    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+					    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+					);
+				};
 
 				bindOnClick(nodebbCommentsList.querySelectorAll('[component="post/parent"]'), function(event) {
-					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + event.target.getAttribute('data-topid') + '"] .topic-text')
-					goTo.scrollIntoView(true);
+					var element = event.target;
+					var goTo = nodebbCommentsList.querySelector('.topic-item[data-pid="' + element.getAttribute('data-topid') + '"]');
+
+					if (!goTo) {
+						goTo = nodebbDiv.querySelector('#nodebb-load-more');
+					}
+
+					if (!isInViewport(goTo)) {
+						goTo.scrollIntoView(false);
+					}
+
 					goTo.classList.add('highlight');
+					element.classList.add('highlight');
+
 					setTimeout(function() {
 						goTo.classList.remove('highlight');
+						element.classList.remove('highlight');
 					}, 1000);
 
 				});
diff --git a/public/templates/comments/comments.tpl b/public/templates/comments/comments.tpl
index 4126b897..932fa1c0 100644
--- a/public/templates/comments/comments.tpl
+++ b/public/templates/comments/comments.tpl
@@ -39,7 +39,7 @@
 						</a>
 					</div>
 					<div class="topic-text">
-						<div class="post-content" itemprop="text"><small><span class="post-tools no-select"><a component="post/reply">reply</a><a component="post/quote">quote</a></span><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp} <!-- IF posts.isReply --> <button component="post/parent" class="reply-label no-select" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parentUsername}</button> <!-- ENDIF posts.isReply --> </small><br /><div class="post-body">{posts.content}</div></div>
+						<div class="post-content" itemprop="text"><small><span class="post-tools no-select"><a component="post/reply">reply</a><a component="post/quote">quote</a></span><a href="{relative_path}/user/{user.userslug}" style="color: inherit; text-decoration: none;"><strong>{user.username}</strong></a> commented {posts.timestamp} <!-- IF posts.isReply --> <!-- IF !posts.deletedReply --> <button component="post/parent" class="reply-label no-select" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parentUsername}</button> <!-- ENDIF !posts.deletedReply --> <!-- ENDIF posts.isReply --> </small><br /><div class="post-body">{posts.content}</div></div>
 					</div>
 				</div>
 				<form action="{relative_path}/comments/reply" method="post" class="sub-reply-input hidden">