https://github.com/NodeBB/NodeBB/issues/8778

less/topic.less

@@ -182,12 +182,11 @@
 	}
 
 	.threaded-replies {
-		margin-left: 61px;
-		text-decoration: none;
 		margin-left: 60px;
+		margin-top: 10px;
+		text-decoration: none;
 		font-size: 11px;
 
-
 		img, .user-icon {
 			.user-icon-style(16px, 10px, 50%);
 			vertical-align: 1px;
@@ -419,10 +418,13 @@
 	.posts {
 		list-style-type: none;
 		padding: 0;
-
+		[component="post"][data-index="0"] {
+			border-bottom: 5px solid @post-border-color;
+		}
 		[component="post"] {
 			position: relative;
 			border-bottom: 1px solid @post-border-color;
+
 			padding-bottom: @post-padding;
 			margin-bottom: @post-padding;
 
@@ -599,6 +601,12 @@
 }
 
 [component="post"] {
+	&.topic-owner-post .post-header .avatar {
+		-webkit-box-shadow: 0px 0px 5px 2px @brand-primary;
+		-moz-box-shadow: 0px 0px 5px 2px @brand-primary;
+		box-shadow: 0px 0px 5px 2px @brand-primary;
+	}
+
 	.avatar.avatar-sm2x {
 		font-size: 2.875rem;
 	}

templates/partials/topic/post.tpl

@@ -58,6 +58,23 @@
 	<div component="post/signature" data-uid="{posts.user.uid}" class="post-signature">{posts.user.signature}</div>
 	<!-- ENDIF posts.user.signature -->
 
+	{{{ if !hideReplies }}}
+	<a component="post/reply-count" href="#" class="threaded-replies no-select pull-left {{{ if !posts.replies.count }}}hidden{{{ end }}}">
+		<span component="post/reply-count/avatars" class="avatars {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
+			{{{each posts.replies.users}}}
+			{buildAvatar(posts.replies.users, "xs", true, "")}
+			{{{end}}}
+		</span>
+
+		<span class="replies-count" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+		<span class="replies-last hidden-xs">[[topic:last_reply_time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+
+		<i class="fa fa-fw fa-chevron-right" component="post/replies/open"></i>
+		<i class="fa fa-fw fa-chevron-down hidden" component="post/replies/close"></i>
+		<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
+	</a>
+	{{{ end }}}
+
 	<small class="pull-right">
 		<span class="post-tools">
 			<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
@@ -82,21 +99,4 @@
 
 		<!-- IMPORT partials/topic/post-menu.tpl -->
 	</small>
-
-	<!-- IF !hideReplies -->
-	<a component="post/reply-count" href="#" class="threaded-replies no-select <!-- IF !posts.replies.count -->hidden<!-- ENDIF !posts.replies.count -->">
-		<span component="post/reply-count/avatars" class="avatars <!-- IF posts.replies.hasMore -->hasMore<!-- ENDIF posts.replies.hasMore -->">
-			{{{each posts.replies.users}}}
-			{buildAvatar(posts.replies.users, "xs", true, "")}
-			{{{end}}}
-		</span>
-
-		<span class="replies-count" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
-		<span class="replies-last hidden-xs">[[topic:last_reply_time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
-
-		<i class="fa fa-fw fa-chevron-right" component="post/replies/open"></i>
-		<i class="fa fa-fw fa-chevron-down hidden" component="post/replies/close"></i>
-		<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
-	</a>
-	<!-- ENDIF !hideReplies -->
 </div>

templates/partials/topic/sort.tpl

@@ -1,4 +1,4 @@
-<div title="[[topic:sort_by]]" class="btn-group bottom-sheet" component="thread/sort">
+<div title="[[topic:sort_by]]" class="btn-group bottom-sheet hidden-xs" component="thread/sort">
 	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
 	<span><i class="fa fa-fw fa-sort"></i></span></button>
 	<ul class="dropdown-menu dropdown-menu-right">

templates/topic.tpl

@@ -57,7 +57,7 @@
 
 		<ul component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
 			{{{each posts}}}
-				<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
+				<li component="post" class="{{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 					<a component="post/anchor" data-index="{posts.index}" id="{posts.index}"></a>
 
 					<meta itemprop="datePublished" content="{posts.timestampISO}">