nodebb-theme-persona 12.1.6 → 12.1.7

package/templates/partials/topic/post.tpl

@@ -1,54 +1,49 @@
 <div class="clearfix post-header">
-	<div class="icon float-start">
+	<div class="icon pull-left">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
+			{buildAvatar(posts.user, "sm2x", true, "", "user/picture")}
 			<i component="user/status" class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
 		</a>
 	</div>
 
-	<small class="d-flex">
-		<div class="d-flex align-items-center gap-1 flex-wrap w-100">
-			<strong class="text-nowrap">
-				<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
-			</strong>
-
-			{{{ each posts.user.selectedGroups }}}
-			{{{ if posts.user.selectedGroups.slug }}}
-			<!-- IMPORT partials/groups/badge.tpl -->
-			{{{ end }}}
-			{{{ end }}}
-
-			<!-- IF posts.user.banned -->
-			<span class="badge bg-danger">[[user:banned]]</span>
-			<!-- ENDIF posts.user.banned -->
-
-			<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-				<!-- IF posts.toPid -->
-				<a component="post/parent" class="btn btn-sm btn-outline-secondary hidden-xs" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><i class="fa fa-reply"></i> @<!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
-				<!-- ENDIF posts.toPid -->
-
-				<span>
-					<!-- IF posts.user.custom_profile_info.length -->
-					&#124;
-					{{{each posts.user.custom_profile_info}}}
-					{posts.user.custom_profile_info.content}
-					{{{end}}}
-					<!-- ENDIF posts.user.custom_profile_info.length -->
-				</span>
+	<small class="pull-left">
+		<strong>
+			<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+		</strong>
+
+		<!-- IMPORT partials/topic/badge.tpl -->
+
+		<!-- IF posts.user.banned -->
+		<span class="label label-danger">[[user:banned]]</span>
+		<!-- ENDIF posts.user.banned -->
+
+		<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+			<!-- IF posts.toPid -->
+			<a component="post/parent" class="btn btn-xs btn-default hidden-xs" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><i class="fa fa-reply"></i> @<!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
+			<!-- ENDIF posts.toPid -->
+
+			<span>
+				<!-- IF posts.user.custom_profile_info.length -->
+				&#124;
+				{{{each posts.user.custom_profile_info}}}
+				{posts.user.custom_profile_info.content}
+				{{{end}}}
+				<!-- ENDIF posts.user.custom_profile_info.length -->
 			</span>
-			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
-				<span>
-					<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
-
-					<span data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>
-
-					<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-						<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
-					</span>
-				</span>
-				<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
-			</div>
-		</div>
+		</span>
+
+	</small>
+	<small class="pull-right">
+		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
+	</small>
+	<small class="pull-right">
+		<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
+
+		<small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></small>
+
+		<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+			<a class="permalink" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
+		</span>
 	</small>
 </div>
 
@@ -65,10 +60,10 @@
 
 	<div class="clearfix">
 	{{{ if !hideReplies }}}
-	<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="threaded-replies user-select-none float-start text-muted {{{ if !posts.replies.count }}}hidden{{{ end }}}">
+	<a component="post/reply-count" data-target-component="post/replies/container" 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, "16px", true, "")}
+			{buildAvatar(posts.replies.users, "xs", true, "")}
 			{{{end}}}
 		</span>
 
@@ -81,11 +76,11 @@
 	</a>
 	{{{ end }}}
 
-	<small class="float-end">
+	<small class="pull-right">
 		<!-- IMPORT partials/topic/reactions.tpl -->
 		<span class="post-tools">
-			<a component="post/reply" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
-			<a component="post/quote" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
+			<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
+			<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
 		</span>
 
 		<!-- IF !reputation:disabled -->

package/templates/partials/topic/quickreply.tpl

@@ -1,8 +1,8 @@
 <!-- IF privileges.topics:reply -->
 <div component="topic/quickreply/container" class="clearfix quick-reply">
-	<div class="icon float-start hidden-xs">
+	<div class="icon pull-left hidden-xs">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
+			{buildAvatar(loggedInUser, "46", true, "", "user/picture")}
 			<!-- IF loggedInUser.status -->
 			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
 			<!-- ENDIF loggedInUser.status -->
@@ -15,7 +15,7 @@
 			<textarea name="content" component="topic/quickreply/text" class="form-control" rows="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
-		<button type="submit" component="topic/quickreply/button" class="btn btn-primary float-end">[[topic:post-quick-reply]]</button>
+		<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">[[topic:post-quick-reply]]</button>
 	</form>
 	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
 		<input type="file" name="files[]" multiple class="hidden"/>

package/templates/partials/topic/reply-button.tpl

@@ -1,10 +1,10 @@
 <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-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-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
+	<ul class="dropdown-menu pull-right" role="menu">
+		<li><a href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
 

package/templates/partials/topic/sort.tpl

@@ -1,9 +1,9 @@
 <div title="[[topic:sort_by]]" class="btn-group bottom-sheet hidden-xs" component="thread/sort">
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<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-end">
-		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
+	<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>
 	</ul>
 </div>

package/templates/partials/topic/tags.tpl

@@ -1,3 +1,5 @@
-{{{ each tags }}}
-<!-- IMPORT partials/topic/tag.tpl -->
-{{{ end }}}
+{{{each tags}}}
+<a href="{config.relative_path}/tags/{tags.valueEncoded}">
+    <span class="tag tag-item tag-class-{tags.class}" data-tag="{tags.value}">{tags.valueEscaped}</span>
+</a>
+{{{end}}}

package/templates/partials/topic/topic-menu-list.tpl

@@ -1,32 +1,30 @@
-{{{ if privileges.editable }}}
-<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="dropdown-item <!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
-<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="dropdown-item <!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
-<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="dropdown-item <!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
-<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="dropdown-item <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
-
-<li><a component="topic/move" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
-<li><a component="topic/merge" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
-<li><a component="topic/fork" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
+<!-- IF privileges.editable -->
+<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="<!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
+<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="<!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
+<li><a component="topic/move" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
+<li><a component="topic/fork" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
 {{{ if !scheduled }}}
-<li><a component="topic/move-posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
-{{{ end }}}
-<li><a component="topic/mark-unread-for-all" class="dropdown-item" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
-<li class="dropdown-divider"></li>
+<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="<!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
+<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="<!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
+<li><a component="topic/move-posts" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
 {{{ end }}}
+<li><a component="topic/mark-unread-for-all" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
+<li class="divider"></li>
+<!-- ENDIF privileges.editable -->
 
 <!-- IF privileges.deletable -->
-<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="dropdown-item <!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
+<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="<!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
 {{{ if !scheduled }}}
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="<!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
 {{{ end }}}
 <!-- IF privileges.purge -->
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
+<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="<!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
 <!-- END -->
 <!-- IF privileges.isAdminOrMod -->
-<li><a component="topic/delete/posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
+<li><a component="topic/delete/posts" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
 <!-- ENDIF privileges.isAdminOrMod -->
 
 {{{each thread_tools}}}
-<li><a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
+<li><a href="#" class="{thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
 {{{end}}}
 <!-- ENDIF privileges.deletable -->

package/templates/partials/topic/watch.tpl

@@ -1,11 +1,10 @@
 <!-- IF config.loggedIn -->
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch"
-data-bs-toggle="tooltip"
-	{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
-	{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
-	{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
->
-	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button"
+		{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
+		{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
+		{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
+	>
 		<span 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>
@@ -13,10 +12,10 @@ data-bs-toggle="tooltip"
 		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
 
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end">
-		<li><a class="dropdown-item" 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>
-		<li><a class="dropdown-item" href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw <!-- IF isNotFollowing -->fa-check<!-- ENDIF isNotFollowing -->"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text hidden-xs"><small>[[topic:not-watching.description]]</small></p></a></li>
-		<li><a class="dropdown-item" href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text hidden-xs"><small>[[topic:ignoring.description]]</small></p></a></li>
+	<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>
+		<li><a href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw <!-- IF isNotFollowing -->fa-check<!-- ENDIF isNotFollowing -->"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text hidden-xs"><small>[[topic:not-watching.description]]</small></p></a></li>
+		<li><a href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text hidden-xs"><small>[[topic:ignoring.description]]</small></p></a></li>
 	</ul>
 </div>
 <!-- ENDIF config.loggedIn -->

package/templates/partials/topics_list.tpl

@@ -7,73 +7,71 @@
 		<meta itemprop="position" content="{../index}" />
 		<a id="{../index}" data-index="{../index}" component="topic/anchor"></a>
 
-		<div class="col-md-6 col-sm-9 col-10 content">
-			<div class="avatar float-start me-2">
+		<div class="col-md-6 col-sm-9 col-xs-10 content">
+			<div class="avatar pull-left">
 				<!-- IF showSelect -->
 				<div class="select" component="topic/select">
 					{{{ if ./thumbs.length }}}
 					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
 					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
+					{buildAvatar(../user, "46", true, "not-responsive")}
 					{{{ end }}}
 					<i class="fa fa-check"></i>
 				</div>
 				<!-- ENDIF showSelect -->
 
 				<!-- IF !showSelect -->
-				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="float-start">
+				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="pull-left">
 					{{{ if ./thumbs.length }}}
 					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
 					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
+					{buildAvatar(../user, "46", true, "not-responsive")}
 					{{{ end }}}
 				</a>
 				<!-- ENDIF !showSelect -->
 			</div>
 
-			<h2 component="topic/header" class="title mb-1">
+			<h2 component="topic/header" class="title">
 				<i component="topic/scheduled" class="fa fa-clock-o <!-- IF !topics.scheduled -->hide<!-- ENDIF !topics.scheduled -->" title="[[topic:scheduled]]"></i>
 				<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF (topics.scheduled || !topics.pinned) -->hide<!-- ENDIF (topics.scheduled || !topics.pinned) -->" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
 				<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->" title="[[topic:locked]]"></i>
 				<i component="topic/moved" class="fa fa-arrow-circle-right <!-- IF !topics.oldCid -->hide<!-- ENDIF !topics.oldCid -->" title="[[topic:moved]]"></i>
 				{{{each topics.icons}}}{@value}{{{end}}}
 
+
 				<!-- IF !topics.noAnchor -->
-				<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->">{topics.title}</a>
+				<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->">{topics.title}</a><br />
 				<!-- ELSE -->
-				<span>{topics.title}</span>
+				<span>{topics.title}</span><br />
 				<!-- ENDIF !topics.noAnchor -->
-			</h2>
-			<div class="info">
+
 				<!-- IF !template.category -->
-				<div class="category-item d-inline-block">
-					{buildCategoryIcon(./category, "24px", "rounded-circle")}
-					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
-				</div>
-				&bull;
+				<small>
+					<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg" style="{function.generateCategoryBackground, topics.category}"><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
+				</small>
 				<!-- ENDIF !template.category -->
 
 				{{{ if topics.tags.length }}}
 				<span class="tag-list hidden-xs">
-					{{{ each ./tags }}}
-					<!-- IMPORT partials/topic/tag.tpl -->
-					{{{ end }}}
-					&bull;
+					{{{each topics.tags}}}
+					<a href="{config.relative_path}/tags/{topics.tags.valueEncoded}"><span class="tag tag-item tag-class-{topics.tags.class}">{topics.tags.valueEscaped}</span></a>
+					{{{end}}}
+					<small>&bull;</small>
 				</span>
 				{{{ end }}}
 
-				<span class="hidden-xs"><span class="timeago text-muted" title="{topics.timestampISO}"></span> &bull; <a class="text-muted" href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.displayname}</a></span>
-				<span class="visible-xs-inline">
+				<small class="hidden-xs"><span class="timeago" title="{topics.timestampISO}"></span> &bull; <a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.displayname}</a></small>
+				<small class="visible-xs-inline">
 					<!-- IF topics.teaser.timestamp -->
 					<span class="timeago" title="{topics.teaser.timestampISO}"></span>
 					<!-- ELSE -->
 					<span class="timeago" title="{topics.timestampISO}"></span>
 					<!-- ENDIF topics.teaser.timestamp -->
-				</span>
-			</div>
+				</small>
+			</h2>
 		</div>
 
-		<div class="mobile-stat col-2 visible-xs text-end">
+		<div class="mobile-stat col-xs-2 visible-xs text-right">
 			<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
 		</div>
 
@@ -95,7 +93,7 @@
 		</div>
 
 		<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
-			<div class="lastpost background-link-container" style="border-color: {topics.category.bgColor}">
+			<div class="card background-link-container" style="border-color: {topics.category.bgColor}">
 				<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
 				<!-- IF topics.unreplied -->
 				<p>
@@ -104,8 +102,8 @@
 				<!-- ELSE -->
 				<!-- IF topics.teaser.pid -->
 				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24px", true, "not-responsive")}</a>
-					<a class="permalink text-muted" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24", true, "not-responsive")}</a>
+					<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
 						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
 					</a>
 				</p>

package/templates/partials/users_list.tpl

@@ -1,15 +1,14 @@
-<ul id="users-container" class="users-container list-unstyled d-flex flex-wrap gap-2">
 {{{each users}}}
-<li class="users-box registered-user text-center pb-3" data-uid="{users.uid}" style="width: 102px;">
-	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "64px", true)}</a>
-
+<li class="users-box registered-user" data-uid="{users.uid}">
+	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "lg", true)}</a>
+	<br/>
 	<div class="user-info">
-		<div class="text-nowrap text-truncate">
-			<span>
-				<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
-				<a  href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
-			</span>
-		</div>
+		<span>
+			<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
+			<a href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
+		</span>
+		<br/>
+
 		<!-- IF section_online -->
 		<div class="lastonline">
 			<span class="timeago" title="{users.lastonlineISO}"></span>
@@ -44,15 +43,4 @@
 		<!-- ENDIF section_flagged -->
 	</div>
 </li>
-{{{end}}}
-<!-- IF anonymousUserCount -->
-<li class="users-box anon-user text-center pb-3" style="width: 102px;">
-	<span class="avatar avatar-rounded text-bg-secondary" component="avatar/icon" style="--avatar-size: 64px;">G</span>
-	<br/>
-	<div class="user-info">
-		<span id="online_anon_count">{anonymousUserCount}</span>
-		<span>[[global:guests]]</span>
-	</div>
-</li>
-<!-- ENDIF anonymousUserCount -->
-</ul>
+{{{end}}}

package/templates/partials/users_list_menu.tpl

@@ -1,21 +1,11 @@
 <ul class="nav nav-pills">
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=online">[[global:online]]</a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>
-	</li>
-	{{{ if !reputation:disabled }}}
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a>
-	</li>
-	{{{ end }}}
-	{{{ if isAdminOrGlobalMod }}}
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a>
-	</li>
-	<li class="nav-item">
-		<a class="nav-link" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
-	</li>
-	{{{ end }}}
+	<li><a href="{config.relative_path}/users?section=online">[[global:online]]</a></li>
+	<li><a href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a></li>
+	<!-- IF !reputation:disabled -->
+	<li><a href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a></li>
+	<!-- ENDIF !reputation:disabled -->
+	<!-- IF isAdminOrGlobalMod -->
+	<li><a href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a></li>
+	<li><a href="{config.relative_path}/users?section=banned">[[user:banned]]</a></li>
+	<!-- ENDIF isAdminOrGlobalMod -->
 </ul>

package/templates/popular.tpl

@@ -5,20 +5,46 @@
 	{{{end}}}
 </div>
 <div class="popular">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1 flex-nowrap">
-		<div class="d-flex gap-1 align-items-stretch">
-			{{{ if canPost }}}
+	<div class="topic-list-header btn-toolbar">
+		<div class="pull-left">
+			<!-- IF canPost -->
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			{{{ else }}}
+			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			{{{ end }}}
+			<!-- ENDIF canPost -->
 		</div>
-		<div class="d-flex gap-1 align-items-stretch">
-		<!-- IMPORT partials/topic-terms.tpl -->
-		<!-- IMPORT partials/topic-filters.tpl -->
-		<!-- IMPORT partials/category-filter-right.tpl -->
+
+		<div class="btn-group pull-right">
 		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
+
+		<!-- IMPORT partials/category-filter-right.tpl -->
+
+		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				{{{each filters}}}
+				<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
+					<a role="menu-item" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw <!-- IF filters.selected -->fa-check<!-- ENDIF filters.selected -->"></i>{filters.name}</a>
+				</li>
+				{{{end}}}
+			</ul>
+		</div>
+
+		<div class="btn-group pull-right bottom-sheet <!-- IF !terms.length -->hidden<!-- ENDIF !terms.length -->">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+			{selectedTerm.name} <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				{{{each terms}}}
+				<li role="presentation" class="category">
+					<a role="menu-item" href="{config.relative_path}/{terms.url}"><i class="fa fa-fw <!-- IF terms.selected -->fa-check<!-- ENDIF terms.selected -->"></i>{terms.name}</a>
+				</li>
+				{{{end}}}
+			</ul>
+		</div>
 	</div>
 
 	<div class="category">