closes #163

templates/partials/post_bar.tpl

@@ -11,20 +11,16 @@
 		<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
 	</span>
 
-	<div class="stats">
+	<!-- IMPORT partials/topic/stats.tpl -->
-		<span component="topic/post-count" class="human-readable-number" title="{postcount}">{postcount}</span><br />
-		<small>[[global:posts]]</small>
-	</div>
-	<div class="stats">
-		<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
-		<small>[[global:views]]</small>
-	</div>
 
+	<br class="visible-xs"/>
 
 	<!-- IMPORT partials/topic/reply-button.tpl -->
 
+	<!-- IMPORT partials/topic/watch.tpl -->
+
+	<!-- IMPORT partials/topic/sort.tpl -->
+
 	<!-- IMPORT partials/thread_tools.tpl -->
 </div>
-<div class="clearfix"></div>
 
-<hr />

templates/partials/topic/sort.tpl

@@ -1,7 +1,8 @@
 <!-- IF loggedIn -->
-<div class="btn-group hidden-xs hidden-sm" component="thread/sort">
+<div class="btn-group" component="thread/sort">
-	<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">[[topic:sort_by]] <span class="caret"></span></button>
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
-	<ul class="dropdown-menu">
+	<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
+	<ul class="dropdown-menu dropdown-menu-right">
 		<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
 		<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
 		<li><a href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>

templates/partials/topic/stats.tpl

@@ -0,0 +1,8 @@
+<div class="stats hidden-xs">
+	<span component="topic/post-count" class="human-readable-number" title="{postcount}">{postcount}</span><br />
+	<small>[[global:posts]]</small>
+</div>
+<div class="stats hidden-xs">
+	<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
+	<small>[[global:views]]</small>
+</div>

templates/partials/topic/watch.tpl

@@ -0,0 +1,7 @@
+<button component="topic/follow" class="btn btn-info <!-- IF isFollowing -->hidden<!-- ENDIF isFollowing -->">
+	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watch]]</span> <i class="fa fa-eye"></i>
+</button>
+
+<button component="topic/unfollow" class="btn btn-warning <!-- IF !isFollowing -->hidden<!-- ENDIF !isFollowing -->">
+	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:unwatch]]</span> <i class="fa fa-eye-slash"></i>
+</button>

templates/topic.tpl

@@ -4,15 +4,7 @@
 	<h1 component="post/header" itemprop="name">
 
 		<i class="fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
-		<!-- IMPORT partials/topic/sort.tpl -->
 
-		<button component="topic/follow" class="btn hidden-xs hidden-sm <!-- IF isFollowing -->hidden<!-- ENDIF isFollowing -->">
-			<span>[[topic:watch]]</span> <i class="fa fa-eye"></i>
-		</button>
-
-		<button component="topic/unfollow" class="btn hidden-xs hidden-sm <!-- IF !isFollowing -->hidden<!-- ENDIF !isFollowing -->">
-			<span>[[topic:unwatch]]</span> <i class="fa fa-eye-slash"></i>
-		</button>
 
 		<span class="browsing-users hidden hidden-xs hidden-sm pull-right">
 			<span>[[category:browsing]]</span>
@@ -36,18 +28,20 @@
 				<!-- IMPORT partials/topic/post.tpl -->
 
 				<!-- IF !posts.index -->
-				<div class="post-bar" data-index="{posts.index}">
+				<div class="post-bar clearfix" data-index="{posts.index}">
 					<!-- IMPORT partials/post_bar.tpl -->
 				</div>
+				<hr />
 				<!-- ENDIF !posts.index -->
 			</li>
 
 		<!-- END posts -->
 	</ul>
 
-	<div class="post-bar bottom-post-bar <!-- IF unreplied -->hidden<!-- ENDIF unreplied -->">
+	<div class="post-bar bottom-post-bar clearfix <!-- IF unreplied -->hidden<!-- ENDIF unreplied -->">
 		<!-- IMPORT partials/post_bar.tpl -->
 	</div>
+	<hr />
 
 	<!-- IF config.usePagination -->
 		<!-- IMPORT partials/paginator.tpl -->