nodebb-theme-persona 11.4.2 → 12.0.0

package/less/account.less

@@ -166,12 +166,6 @@
 		}
 	}
 
-	@media (min-width: @screen-lg-min) {
-		.cover {
-			top: calc(var(--panel-offset) + @navbar-height);
-		}
-	}
-
 	@media (min-width: @screen-md-min) {
 		margin-top: 300px;
 

package/less/chats.less

@@ -22,7 +22,7 @@
 .chats-full, .chat-modal {
 	display: flex;
 	flex-wrap: nowrap;
-	height: calc(100vh - var(--panel-offset) - 70px);
+	height: calc(100vh - var(--panel-offset));
 
 	[component="chat/nav-wrapper"] {
 		flex: 1;
@@ -157,8 +157,7 @@
 }
 
 .chat-list {
-	margin-top: -6px;
-    margin-left: -1px;
+	margin-top: -5px;
 }
 
 .chats-list {
@@ -174,10 +173,10 @@
 	}
 
 	> li {
+		display: flex;
 		position: relative;
 		clear: both;
 		list-style-type: none;
-		padding: 0.5em;
 		height: 80px;
 		.pointer;
 
@@ -195,36 +194,29 @@
 		&.unread {
 			background: lighten(@brand-primary, 35%);
 			border-bottom: 0;
-
 		}
 
 		.teaser-content {
-			display: block;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
 			font-size: 13px;
 			opacity: 0.8;
 		}
 
-		.room-name {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: block;
-			[component="chat/title"] {
+		.notification-chat-content {
+			.room-name {
+				white-space: nowrap;
 				overflow: hidden;
-    			white-space: nowrap;
-    			text-overflow: ellipsis;
-    			max-width: 350px;
-    			display: inline-block;
+				text-overflow: ellipsis;
+				display: block;
+				[component="chat/title"] {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					max-width: 350px;
+					display: inline-block;
+				}
 			}
 		}
 
-		.teaser-content, .room-name {
-			padding-left: 80px;
-		}
-
 		&.bg-primary {
 			background: @brand-primary;
 			border-bottom: 0;
@@ -244,8 +236,8 @@
 
 		.teaser-timestamp {
 			font-size: 10px;
-			margin-top: 10px;
-			margin-right: 10px;
+			margin-top: .5rem;
+			margin-right: .5rem;
 		}
 
 		a {
@@ -307,26 +299,14 @@
 		}
 
 		.main-avatar {
-			position: absolute;
-			top: 0px;
-			left: 0px;
-
 			.avatar {
 				height: 80px;
 				width: 80px;
 				font-size: 40px;
 				border-radius: 0;
+				background: @gray-lighter;
 			}
 		}
-
-		.avatar-placeholder {
-			height: 80px;
-			width: 80px;
-			background: @gray-lighter;
-			position: absolute;
-			top: 0px;
-			left: 0px;
-		}
 	}
 }
 

package/less/groups.less

@@ -22,7 +22,7 @@
 		margin-bottom: 1em;
 		background-origin: content-box;
 		width: 100%;
-		top: calc(var(--panel-offset) + @navbar-height);
+		top: calc(var(--panel-offset) - 20px);
 		position: absolute;
 		left: auto;
 		right: 0px;

package/less/header.less

@@ -9,36 +9,51 @@
 		max-height: 250px;
 		padding: 0;
 
-		li.no-notifs {
-			text-align: center;
-		}
-
 		li {
+			display: flex;
+			gap: 1rem;
 			width: 400px;
 			text-align: left;
 			list-style-type: none;
-			padding: 0.5em;
-			clear: both;
+			padding: .75em 0.5em;
 
-			&.loading-text {
-				text-align: center;
+			&:hover {
+				background-color: @dropdown-link-hover-bg;
 			}
 
-			a {
-				white-space: normal;
-				margin: 0;
-				text-overflow: ellipsis;
+			&.loading-text, &.no-notifs {
+				justify-content: center;
 
-				.text {
-					margin-left: 40px;
-					margin-right: 60px;
-					display: block;
-					min-height: 32px;
+				a {
+					color: inherit;
 				}
+			}
+
+			.notification-chat-content {
+				flex: 1;
+
+				a {
+					white-space: normal;
+					margin: 0;
+					text-overflow: ellipsis;
+
+					.text {
+						margin-left: 40px;
+						margin-right: 60px;
+						display: block;
+						min-height: 32px;
+					}
+				}
+			}
+
+			.notification-chat-controls {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: .5rem;
+
 				.relTime {
 					font-size: 10px;
-					margin-top: 10px;
-					margin-right: 10px;
 				}
 			}
 
@@ -61,7 +76,11 @@
 			}
 
 			&.unread {
-				.bg-variant(@state-warning-bg);
+				background-color: @state-warning-bg;
+
+				&:hover {
+					background-color: darken(@state-warning-bg, 5%);
+				}
 
 				.mark-read:after {
 					font-weight: 900;
@@ -76,14 +95,20 @@
 		> li {
 			.pointer;
 			width: 500px;
-			padding-bottom: 1rem;
+			padding: 0;
 			margin: 0;
+			gap: 0;
+			overflow-y: hidden;
+
+			.notification-chat-content {
+				padding: 0.5rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 
 			.teaser-content {
 				white-space: nowrap;
 				max-height: 19px;
-				padding-left: 90px;
-    			padding-right: 10px;
 			}
 
 			&:not(:last-child) {

package/less/mobile.less

@@ -34,11 +34,6 @@
 }
 
 @media (max-width: @screen-md-max) {
-	body {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-
 	#panel {
 		background-color: inherit;
 		min-height: 100%;
@@ -180,7 +175,9 @@
 					text-overflow: ellipsis;
 				}
 				.teaser-timestamp {
-					margin-right: 10px;
+					font-size: 10px;
+					margin-right: 0.5rem;
+					margin-top: 0.5rem;
 				}
 			}
 		}
@@ -196,6 +193,15 @@
 				.unread {
 					background-color: inherit;
 				}
+
+				.notification-chat-content {
+					padding-top: 10px;
+					padding-right: 20px;
+				}
+
+				.notification-chat-controls {
+					display: none;
+				}
 			}
 			.chat-list .unread .room-name::after,
 			.notification-list-mobile .unread a::after {

package/less/modules/taskbar.less

@@ -6,12 +6,8 @@
 
 .taskbar {
 	display: none;
-	left: auto;
-
-	// Bootswatch fix
-	&.navbar-fixed-bottom {
-		left: auto;
-	}
+	left: 15px;
+	right: auto;
 
 	margin-top: 0;
 	.transition(.15s ease-in opacity);

package/less/style.less

@@ -4,17 +4,6 @@ html {
 }
 
 body {
-	@media (min-width: 979px)
-	{
-		padding-top: 70px;
-	}
-
-	@media (max-width: 979px)
-	{
-		padding-top: 70px;
-		padding-bottom: 50px;
-	}
-
 	min-height: 100%;
 }
 

package/less/topic.less

@@ -41,7 +41,7 @@
 	}
 	.topic-header {
 		position: sticky;
-		top: calc(var(--panel-offset) + @navbar-height);
+		top: calc(var(--panel-offset) - 20px);
 		background-color: @body-bg;
 		z-index: @zindex-navbar;
 		margin-left: -15px;
@@ -50,12 +50,6 @@
 		padding-right: 15px;
 	}
 
-	@media (max-width: @screen-md-max) {
-		.topic-header {
-			top: calc(var(--panel-offset) + @navbar-height - 70px);
-		}
-	}
-
 	.topic-info {
 		border-bottom: 1px solid @post-border-color;
 		margin-bottom: 10px;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "11.4.2",
+  "version": "12.0.0",
   "nbbpm": {
-    "compatibility": "^1.18.0"
+    "compatibility": "^2.0.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "library.js",

package/plugin.json

@@ -9,16 +9,13 @@
 		{ "hook": "filter:topic.build", "method": "addUserToTopic" }
 	],
 	"scripts": [
-		"public/persona.js",
-		"public/settings.js",
 		"public/modules/autohidingnavbar.js",
-		"public/modules/quickreply.js"
+		"public/persona.js"
 	],
 	"modules": {
-		"pulling.js": "node_modules/pulling/build/pulling-drawer.js"
+		"../admin/plugins/persona.js": "public/admin.js",
+		"persona/quickreply.js": "public/modules/quickreply.js",
+		"../client/account/theme.js": "public/settings.js"
 	},
-	"acpScripts": [
-		"public/admin.js"
-	],
 	"languages": "languages"
 }

package/public/persona.js

@@ -31,13 +31,9 @@ $(document).ready(function () {
 			(parseInt(headerStyle.marginTop, 10) || 0) +
 			(parseInt(headerStyle.marginBottom, 10) || 0);
 
-		// body element itself introduces a hardcoded 70px padding on desktop resolution
-		if (env === 'lg') {
-			offset -= 70;
-		}
-
 		offset = Math.max(0, offset);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
+		localStorage.setItem('panelOffset', offset);
 	}
 
 	var lastBSEnv = '';
@@ -207,7 +203,7 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['pulling', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
+		require(['pulling/build/pulling-drawer', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
 			if (!Pulling) {
 				return;
 			}

package/templates/footer.tpl

@@ -9,10 +9,6 @@
 	</div>
 	<!-- ENDIF !isSpider -->
 
-	<div class="hide">
-	<!-- IMPORT 500-embed.tpl -->
-	</div>
-
 	<!-- IMPORT partials/footer/js.tpl -->
 </body>
 </html>

package/templates/header.tpl

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection}; --panel-offset: 50px;" {{{end}}} >
+<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
 	<title>{browserTitle}</title>
 	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}

package/templates/modules/taskbar.tpl

@@ -1,3 +1,3 @@
-<div id="taskbar" class="taskbar navbar-fixed-bottom">
-	<div class="navbar-inner"><ul class="nav navbar-nav pull-right"></ul></div>
+<div id="taskbar" class="taskbar navbar-fixed-bottom">
+	<div class="navbar-inner"><ul class="nav navbar-nav"></ul></div>
 </div>

package/templates/partials/account/menu.tpl

@@ -33,16 +33,26 @@
 		<!-- ENDIF canEdit -->
 
 		<!-- IF !isSelf -->
-		<!-- IF canBan -->
+		{{{ if (canBan || canMute) }}}
 		<li role="separator" class="divider"></li>
 		<li class="dropdown-header">[[user:admin_actions_label]]</li>
+		{{{ end }}}
+		{{{ if canBan }}}
 		<li class="<!-- IF banned -->hide<!-- ENDIF banned -->">
 			<a component="account/ban" href="#">[[user:ban_account]]</a>
 		</li>
 		<li class="<!-- IF !banned -->hide<!-- ENDIF !banned -->">
 			<a component="account/unban" href="#">[[user:unban_account]]</a>
 		</li>
-		<!-- ENDIF canBan -->
+		{{{ end }}}
+		{{{ if canMute }}}
+		<li class="<!-- IF muted -->hide<!-- ENDIF muted -->">
+			<a component="account/mute" href="#">[[user:mute_account]]</a>
+		</li>
+		<li class="<!-- IF !muted -->hide<!-- ENDIF !muted -->">
+			<a component="account/unmute" href="#">[[user:unmute_account]]</a>
+		</li>
+		{{{ end }}}
 		<!-- IF isAdmin -->
 		<li>
 			<a component="account/delete-account" href="#" class="">[[user:delete_account_as_admin]]</a>

package/templates/partials/chats/dropdown.tpl

@@ -1,14 +1,6 @@
 <!-- IF rooms.length -->
 {{{each rooms}}}
 <li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
 	{{{each rooms.users}}}
 	<!-- IF @first -->
 	<div class="main-avatar">
@@ -25,8 +17,20 @@
 		{{{end}}}
 	</ul>
 
-	<span class="teaser-content"><strong class="teaser-username">{rooms.teaser.user.username}:</strong> {rooms.teaser.content}</span>
-	<span class="teaser-timestamp pull-right">{rooms.teaser.timeago}</span>
+	<div class="notification-chat-content">
+		<strong class="room-name">
+			<!-- IF !rooms.lastUser.uid -->
+			<span>[[modules:chat.no-users-in-room]]</span>
+			<!-- ELSE -->
+			<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</strong>
+		<span class="teaser-content">
+			<strong class="teaser-username">{rooms.teaser.user.username}:</strong>
+			{rooms.teaser.content}
+		</span>
+	</div>
+	<div class="teaser-timestamp notification-chat-controls">{rooms.teaser.timeago}</div>
 </li>
 {{{end}}}
 <!-- ELSE -->

package/templates/partials/chats/recent_room.tpl

@@ -1,12 +1,4 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
 	{{{each rooms.users}}}
 	<!-- IF @first -->
 	<div class="main-avatar">
@@ -22,4 +14,14 @@
 		</li>
 		{{{end}}}
 	</ul>
+
+	<div class="notification-chat-content">
+		<strong class="room-name">
+			<!-- IF !rooms.lastUser.uid -->
+			<span>[[modules:chat.no-users-in-room]]</span>
+			<!-- ELSE -->
+			<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</strong>
+	</div>
 </li>

package/templates/partials/notifications_list.tpl

@@ -13,11 +13,13 @@
 	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="pull-left avatar avatar-md avatar-rounded" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
 	<!-- ENDIF notifications.image -->
 
-	{{{ if ./nid }}}<div class="pull-right mark-read" aria-label="Mark Read"></div>{{{ end }}}
-	<a href="{notifications.path}" class="deco-none">
+	<a href="{notifications.path}" class="notification-chat-content deco-none">
 		<span class="text">{notifications.bodyShort}</span>
-		<span class="pull-right relTime">{notifications.timeago}</span>
 	</a>
-	<div class="clear"></div>
+
+	<div class="notification-chat-controls">
+		{{{ if ./nid }}}<div class="mark-read" aria-label="Mark Read"></div>{{{ end }}}
+		<span class="relTime">{notifications.timeago}</span>
+	</div>
 </li>
 {{{end}}}

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

@@ -1,4 +1,4 @@
-<span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
-	<a href="#" data-toggle="dropdown" data-ajaxify="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
-	<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
-</span>
+<span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
+	<a href="#" data-toggle="dropdown" data-ajaxify="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
+	<ul class="dropdown-menu dropdown-menu-right hidden" role="menu"></ul>
+</span>

package/templates/partials/users_list.tpl

@@ -1,46 +1,46 @@
-{{{each users}}}
-<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">
-		<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>
-		</div>
-		<!-- ENDIF section_online -->
-
-		<!-- IF section_joindate -->
-		<div class="joindate">
-			<span class="timeago" title="{users.joindateISO}"></span>
-		</div>
-		<!-- ENDIF section_joindate -->
-
-		<!-- IF section_sort-reputation -->
-		<div class="reputation">
-			<i class="fa fa-star"></i>
-			<span class="formatted-number">{users.reputation}</span>
-		</div>
-		<!-- ENDIF section_sort-reputation -->
-
-		<!-- IF section_sort-posts -->
-		<div class="post-count">
-			<i class="fa fa-pencil"></i>
-			<span class="formatted-number">{users.postcount}</span>
-		</div>
-		<!-- ENDIF section_sort-posts -->
-
-		<!-- IF section_flagged -->
-		<div class="flag-count">
-			<i class="fa fa-flag"></i>
-			<span><a class="formatted-number" href="{config.relative_path}/flags?targetUid={users.uid}">{users.flags}</a></span>
-		</div>
-		<!-- ENDIF section_flagged -->
-	</div>
-</li>
+{{{each users}}}
+<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">
+		<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>
+		</div>
+		<!-- ENDIF section_online -->
+
+		<!-- IF section_joindate -->
+		<div class="joindate">
+			<span class="timeago" title="{users.joindateISO}"></span>
+		</div>
+		<!-- ENDIF section_joindate -->
+
+		<!-- IF section_sort-reputation -->
+		<div class="reputation">
+			<i class="fa fa-star"></i>
+			<span class="formatted-number">{users.reputation}</span>
+		</div>
+		<!-- ENDIF section_sort-reputation -->
+
+		<!-- IF section_sort-posts -->
+		<div class="post-count">
+			<i class="fa fa-pencil"></i>
+			<span class="formatted-number">{users.postcount}</span>
+		</div>
+		<!-- ENDIF section_sort-posts -->
+
+		<!-- IF section_flagged -->
+		<div class="flag-count">
+			<i class="fa fa-flag"></i>
+			<span><a class="formatted-number" href="{config.relative_path}/flags?targetUid={users.uid}">{users.flags}</a></span>
+		</div>
+		<!-- ENDIF section_flagged -->
+	</div>
+</li>
 {{{end}}}

package/templates/post-queue.tpl

@@ -1,83 +1,83 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
-<div class="btn-toolbar">
-	<!-- IMPORT partials/category-filter-right.tpl -->
-</div>
-<hr/>
-<div class="row">
-	<div class="col-xs-12">
-		<div class="post-queue preventSlideout posts-list">
-			{{{ if !posts.length }}}
-			{{{ if isAdmin }}}
-			<p class="panel-body">
-				[[post-queue:description, {config.relative_path}/admin/settings/post#post-queue]]
-			</p>
-			{{{ end }}}
-			{{{ end }}}
-
-			{{{ each posts }}}
-			<div class="panel panel-default" data-id="{posts.id}">
-				<div class="panel-heading">
-					<strong>{{{ if posts.data.tid }}}[[post-queue:reply]]{{{ else }}}[[post-queue:topic]]{{{ end }}}</strong>
-					<span class="timeago pull-right" title={posts.data.timestampISO}></span>
-				</div>
-				<div class="panel-body">
-
-					<div class="row">
-						<div class="col-lg-2 col-xs-12">
-							<strong>[[post-queue:user]]</strong>
-							<div>
-								{{{ if posts.user.userslug}}}
-								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24", true, "not-responsive")} {posts.user.username}</a>
-								{{{ else }}}
-								{posts.user.username}
-								{{{ end }}}
-							</div>
-						</div>
-						<div class="col-lg-3 col-xs-12">
-							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:category-editable]]"></i>{{{ end }}}</strong>
-							<div class="topic-category" {{{if posts.data.cid}}}data-editable="editable"{{{end}}}">
-								<a href="{config.relative_path}/category/{posts.category.slug}"><!-- IF posts.category.icon --><span class="fa-stack"><i style="color: {posts.category.bgColor};" class="fa fa-circle fa-stack-2x"></i><i style="color: {posts.category.color};" class="fa fa-stack-1x fa-fw {posts.category.icon}"></i></span><!-- ENDIF posts.category.icon --> {posts.category.name}</a>
-							</div>
-						</div>
-						<div class="col-lg-7 col-xs-12">
-							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
-							<div class="topic-title">
-								{{{ if posts.data.tid }}}
-								<a href="{config.relative_path}/topic/{posts.data.tid}">{posts.topic.title}</a>
-								{{{ end }}}
-								<span class="title-text">{posts.data.title}</span>
-							</div>
-							{{{if !posts.data.tid}}}
-							<div class="topic-title-editable hidden">
-								<input class="form-control" type="text" value="{posts.data.title}"/>
-							</div>
-							{{{end}}}
-						</div>
-					</div>
-					<hr/>
-					<div>
-						<strong>[[post-queue:content]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
-						<div class="post-content">{posts.data.content}</div>
-						<div class="post-content-editable hidden">
-							<textarea class="form-control">{posts.data.rawContent}</textarea>
-						</div>
-					</div>
-				</div>
-				<div class="panel-footer text-right">
-					<div>
-						{{{ if canAccept }}}
-						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
-						<button class="btn btn-info btn-xs" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
-						<button class="btn btn-success btn-xs" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
-						{{{ else }}}
-						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:remove]]</button>
-						{{{ end }}}
-					</div>
-				</div>
-			</div>
-			{{{ end }}}
-		</div>
-
-		<!-- IMPORT partials/paginator.tpl -->
-	</div>
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="btn-toolbar">
+	<!-- IMPORT partials/category-filter-right.tpl -->
+</div>
+<hr/>
+<div class="row">
+	<div class="col-xs-12">
+		<div class="post-queue preventSlideout posts-list">
+			{{{ if !posts.length }}}
+			{{{ if isAdmin }}}
+			<p class="panel-body">
+				[[post-queue:description, {config.relative_path}/admin/settings/post#post-queue]]
+			</p>
+			{{{ end }}}
+			{{{ end }}}
+
+			{{{ each posts }}}
+			<div class="panel panel-default" data-id="{posts.id}">
+				<div class="panel-heading">
+					<strong>{{{ if posts.data.tid }}}[[post-queue:reply]]{{{ else }}}[[post-queue:topic]]{{{ end }}}</strong>
+					<span class="timeago pull-right" title={posts.data.timestampISO}></span>
+				</div>
+				<div class="panel-body">
+
+					<div class="row">
+						<div class="col-lg-2 col-xs-12">
+							<strong>[[post-queue:user]]</strong>
+							<div>
+								{{{ if posts.user.userslug}}}
+								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24", true, "not-responsive")} {posts.user.username}</a>
+								{{{ else }}}
+								{posts.user.username}
+								{{{ end }}}
+							</div>
+						</div>
+						<div class="col-lg-3 col-xs-12">
+							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:category-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-category" {{{if posts.data.cid}}}data-editable="editable"{{{end}}}">
+								<a href="{config.relative_path}/category/{posts.category.slug}"><!-- IF posts.category.icon --><span class="fa-stack"><i style="color: {posts.category.bgColor};" class="fa fa-circle fa-stack-2x"></i><i style="color: {posts.category.color};" class="fa fa-stack-1x fa-fw {posts.category.icon}"></i></span><!-- ENDIF posts.category.icon --> {posts.category.name}</a>
+							</div>
+						</div>
+						<div class="col-lg-7 col-xs-12">
+							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-title">
+								{{{ if posts.data.tid }}}
+								<a href="{config.relative_path}/topic/{posts.data.tid}">{posts.topic.title}</a>
+								{{{ end }}}
+								<span class="title-text">{posts.data.title}</span>
+							</div>
+							{{{if !posts.data.tid}}}
+							<div class="topic-title-editable hidden">
+								<input class="form-control" type="text" value="{posts.data.title}"/>
+							</div>
+							{{{end}}}
+						</div>
+					</div>
+					<hr/>
+					<div>
+						<strong>[[post-queue:content]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
+						<div class="post-content">{posts.data.content}</div>
+						<div class="post-content-editable hidden">
+							<textarea class="form-control">{posts.data.rawContent}</textarea>
+						</div>
+					</div>
+				</div>
+				<div class="panel-footer text-right">
+					<div>
+						{{{ if canAccept }}}
+						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
+						<button class="btn btn-info btn-xs" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
+						<button class="btn btn-success btn-xs" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
+						{{{ else }}}
+						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:remove]]</button>
+						{{{ end }}}
+					</div>
+				</div>
+			</div>
+			{{{ end }}}
+		</div>
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
 </div>