feat: sticky postbar (#507)

less/topic.less

@@ -9,9 +9,14 @@
 
 		.topic-title {
 			word-wrap: break-word;
-			font-size: 28px;
+			font-size: 24px;
 			color:inherit;
-			line-height: 36px;
+			line-height: 32px;
+			@media (max-width: @screen-sm-max) {
+				font-size: 18px;
+				line-height: 24px;
+				margin-top: 0px;
+			}
 		}
 
 		> span {
@@ -31,10 +36,22 @@
 			text-transform: initial;
 		}
 	}
+	[component="topic/browsing-users"] {
+		margin-bottom: -15px;
+	}
+	.topic-header {
+		position: sticky;
+		top: @navbar-height;
+		background-color: @body-bg;
+		z-index: @zindex-navbar;
+	}
+
 	.topic-info {
 		border-bottom: 1px solid @post-border-color;
 		margin-bottom: 10px;
-    	padding-bottom: 10px;
+		> * {
+			padding-bottom: 10px;
+		}
 	}
 	.category-item {
 		.icon {
@@ -220,7 +237,7 @@
 	.stats {
 		font-size: 12px;
 		margin: 0px 5px 0px 5px;
-		float: left;
+		display: inline-block;
 	}
 
 	.title {

public/persona.js

@@ -42,6 +42,16 @@ $(document).ready(function () {
 				showOnBottom: false,
 			});
 		}
+		navbarEl.on('show.autoHidingNavbar', function() {
+			if (ajaxify.data.template.topic) {
+				$('.topic .topic-header').css({top: '' });
+			}
+		});
+		navbarEl.on('hide.autoHidingNavbar', function() {
+			if (ajaxify.data.template.topic) {
+				$('.topic .topic-header').css('top', '0px');
+			}
+		});
 	}
 
 	function setupNProgress() {

templates/partials/post_bar.tpl

@@ -1,27 +1,20 @@
-<div class="clearfix">
+<div class="topic-main-buttons pull-right inline-block">
+	<span class="loading-indicator btn pull-left hidden" done="0">
+		<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
+	</span>
 
-	<!-- IMPORT partials/topic/browsing-users.tpl -->
+	<!-- IF loggedIn -->
+	<button component="topic/mark-unread" class="btn btn-sm btn-default" title="[[topic:mark_unread]]">
+		<i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"></span>
+	</button>
+	<!-- ENDIF loggedIn -->
 
-	<div class="topic-main-buttons pull-right">
+	<!-- IMPORT partials/topic/watch.tpl -->
-		<span class="loading-indicator btn pull-left hidden" done="0">
-			<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
-		</span>
 
-		<!-- IMPORT partials/topic/reply-button.tpl -->
+	<!-- IMPORT partials/topic/sort.tpl -->
 
-		<!-- IF loggedIn -->
+	<div class="inline-block">
-		<button component="topic/mark-unread" class="btn btn-default">
+	<!-- IMPORT partials/thread_tools.tpl -->
-			<i class="fa fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:mark_unread]]</span>
-		</button>
-		<!-- ENDIF loggedIn -->
-
-		<!-- IMPORT partials/topic/watch.tpl -->
-
-		<!-- IMPORT partials/topic/sort.tpl -->
-
-		<div class="pull-right">&nbsp;
-		<!-- IMPORT partials/thread_tools.tpl -->
-		</div>
 	</div>
+	<!-- IMPORT partials/topic/reply-button.tpl -->
 </div>
-<hr/>

templates/partials/thread_tools.tpl

@@ -1,9 +1,7 @@
 <!-- IF privileges.view_thread_tools -->
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+	<button title="[[topic:thread_tools.title]]" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
+		<i class="fa fa-fw fa-gear"></i>
-		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
-		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-right"></ul>
 </div>

templates/partials/topic/browsing-users.tpl

@@ -1,4 +1,4 @@
-<div component="topic/browsing-users">
+<div component="topic/browsing-users" class="inline-block hidden-xs">
 	{{{each browsingUsers}}}
 	<div class="pull-left" data-uid="{browsingUsers.uid}">
 		<a href="<!-- IF browsingUsers.userslug -->{config.relative_path}/user/{browsingUsers.userslug}<!-- ELSE -->#<!-- ENDIF browsingUsers.userslug -->">

templates/partials/topic/reply-button.tpl

@@ -1,6 +1,6 @@
 <div component="topic/reply/container" class="btn-group action-bar bottom-sheet <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
-	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
+	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-sm btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
-	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
+	<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu pull-right" role="menu">
@@ -11,17 +11,17 @@
 <!-- IF loggedIn -->
 <!-- IF !privileges.topics:reply -->
 <!-- IF locked -->
-<a component="topic/reply/locked" class="btn btn-primary" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+<a component="topic/reply/locked" class="btn btn-sm btn-primary" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
 <!-- ENDIF locked -->
 <!-- ENDIF !privileges.topics:reply -->
 
 <!-- IF !locked -->
-<a component="topic/reply/locked" class="btn btn-primary hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+<a component="topic/reply/locked" class="btn btn-sm btn-primary hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
 <!-- ENDIF !locked -->
 
 <!-- ELSE -->
 
 <!-- IF !privileges.topics:reply -->
-<a component="topic/reply/guest" href="{config.relative_path}/login" class="btn btn-primary">[[topic:guest-login-reply]]</a>
+<a component="topic/reply/guest" href="{config.relative_path}/login" class="btn btn-sm btn-primary">[[topic:guest-login-reply]]</a>
 <!-- ENDIF !privileges.topics:reply -->
 <!-- ENDIF loggedIn -->

templates/partials/topic/sort.tpl

@@ -1,7 +1,7 @@
 <!-- IF config.loggedIn -->
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<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>
+	<button title="[[topic:sort_by]]" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-	<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
+	<span><i class="fa fa-fw fa-sort"></i></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>

templates/partials/topic/watch.tpl

@@ -1,13 +1,12 @@
 <!-- IF config.loggedIn -->
 <div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
-	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watching]]</span></span>
+		<span title="[[topic:watching]]" component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i></span>
 
-		<span component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:not-watching]]</span></span>
+		<span title="[[topic:not-watching]]" component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i></span>
 
-		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:ignoring]]</span></span>
+		<span title="[[topic:ignoring]]" component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
 
-		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-right">
 		<li><a href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw <!-- IF isFollowing -->fa-check<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text hidden-xs"><small>[[topic:watching.description]]</small></p></a></li>

templates/topic.tpl

@@ -6,35 +6,37 @@
 </div>
 <div class="row">
 	<div class="topic <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
+		<div class="topic-header">
+			<h1 component="post/header" class="" itemprop="name">
+				<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
+				<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
+				<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
+				{{{each icons}}}@value{{{end}}}
+				<span class="topic-title" component="topic/title">{title}</span>
+			</h1>
 
-		<h1 component="post/header" class="hidden-xs" itemprop="name">
+			<div class="topic-info clearfix">
-			<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
+				<div class="category-item inline-block">
-			<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
+					{{{ if category.icon }}}
-			<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
+					<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">
-			{{{each icons}}}@value{{{end}}}
+						<i class="fa fa-fw {category.icon}"></i>
-			<span class="topic-title" component="topic/title">{title}</span>
+					</div>
-		</h1>
+					{{{ end }}}
+					<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
+				</div>
 
-		<div class="topic-info clearfix">
+				<div class="tags tag-list inline-block">
-			<div class="category-item inline-block">
+					<!-- IMPORT partials/topic/tags.tpl -->
-				{{{ if category.icon }}}
-				<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">
-					<i class="fa fa-fw {category.icon}"></i>
 				</div>
-				{{{ end }}}
+				<div class="inline-block">
-				<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
+					<!-- IMPORT partials/topic/stats.tpl -->
-			</div>
+				</div>
-			{{{ if tags.length }}}
+
-			&bull;
+				<!-- IMPORT partials/topic/browsing-users.tpl -->
-			{{{ end}}}
+
-			<div class="tags tag-list inline-block">
+				<!-- IMPORT partials/post_bar.tpl -->
-				<!-- IMPORT partials/topic/tags.tpl -->
-			</div>
-			<div class="pull-right">
-				<!-- IMPORT partials/topic/stats.tpl -->
 			</div>
 		</div>
-
 		<!-- IF merger -->
 		<div component="topic/merged/message" class="alert alert-warning clearfix">
 			<span class="pull-left">[[topic:merged_message, {config.relative_path}/topic/{mergeIntoTid}, {merger.mergedIntoTitle}]]</span>
@@ -59,11 +61,6 @@
 
 					<!-- IMPORT partials/topic/post.tpl -->
 				</li>
-				<!-- IF !posts.index -->
-				<li>
-					<div class="post-bar-placeholder"></div>
-				</li>
-				<!-- ENDIF !posts.index -->
 			{{{end}}}
 		</ul>
 
@@ -71,10 +68,6 @@
 		<!-- IMPORT partials/topic/quickreply.tpl -->
 		<!-- ENDIF config.enableQuickReply -->
 
-		<div class="post-bar">
-			<!-- IMPORT partials/post_bar.tpl -->
-		</div>
-
 		<!-- IF config.usePagination -->
 		<!-- IMPORT partials/paginator.tpl -->
 		<!-- ENDIF config.usePagination -->