nodebb-theme-harmony 1.0.0-beta.10 → 1.0.0-beta.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.12",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -5,6 +5,7 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -103,6 +104,7 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
 	function setupNProgress() {
 		require(['nprogress'], function (NProgress) {
 			window.nprogress = NProgress;
@@ -117,4 +119,17 @@ $(document).ready(function () {
 			}
 		});
 	}
+
+	function handleMobileNavigator() {
+		const paginationBlockEl = $('.pagination-block');
+		require(['hooks'], function (hooks) {
+			hooks.on('action:ajaxify.end', function () {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+			});
+			hooks.on('filter:navigator.scroll', function (hookData) {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+				return hookData;
+			});
+		});
+	}
 });

package/scss/common.scss

@@ -14,8 +14,13 @@ body {
 .text-sm { font-size: 0.875rem!important; } // 14px
 .text-xs { font-size: 0.75rem!important; } // 12px
 
-.btn-link:hover {
-	text-decoration: none;
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
 }
 
 .sticky-tools {
@@ -35,6 +40,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +60,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
+$btn-ghost-hover-color: mix($light, $dark, 90);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,18 +16,6 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
@@ -67,6 +57,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +107,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/account/categories.tpl

@@ -11,7 +11,6 @@
 					<div class="btn-group bottom-sheet" component="category/watch/all">
 						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 							<span>[[user:change_all]]</span>
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>

package/templates/category.tpl

@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info mt-3" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/flags/detail.tpl

@@ -146,7 +146,6 @@
 						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-street-view"></i>
 							[[flags:flagged-user]]
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>

package/templates/flags/list.tpl

@@ -18,7 +18,7 @@
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
+				<i class="fa fa-clone"></i> <span class="fw-semibold">[[flags:bulk-actions]]</span>
 			</button>
 			<ul class="dropdown-menu">
 				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>

package/templates/partials/category-filter-content.tpl

@@ -9,7 +9,7 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li role="presentation" class="category" data-all="all">

package/templates/partials/category-selector-content.tpl

@@ -12,7 +12,7 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">

package/templates/partials/mobile-footer.tpl

@@ -1,73 +1,78 @@
-<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="">
-		<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
-			<span class="position-relative">
-				<i class="fa fa-fw fa-lg fa-bars"></i>
-				<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
-			</span>
-		</a>
-		<ul class="navigation-dropdown dropdown-menu">
-			{{{ each navigation }}}
-			<!-- IF function.displayMenuItem, @index -->
-			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
-				{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
-					<span class="d-inline-flex justify-content-between align-items-center w-100">
-						<span class="text-nowrap truncate-open">
-							{{{ if ./iconClass }}}
-							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
-							{{{ end }}}
+<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary  gap-1 align-items-center">
+
+	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+
+	<div class="bottombar p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+		<div class="">
+			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<span class="position-relative">
+					<i class="fa fa-fw fa-lg fa-bars"></i>
+					<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+				</span>
+			</a>
+			<ul class="navigation-dropdown dropdown-menu">
+				{{{ each navigation }}}
+				<!-- IF function.displayMenuItem, @index -->
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+					{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<span class="d-inline-flex justify-content-between align-items-center w-100">
+							<span class="text-nowrap truncate-open">
+								{{{ if ./iconClass }}}
+								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+								{{{ end }}}
+								{{{ if navigation.text }}}
+								<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
+								{{{ end }}}
+							</span>
+							<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
-						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-					</span>
-				</a>
-				{{{ if navigation.dropdown }}}
-				<div class="ps-3">
-					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-						{navigation.dropdownContent}
-					</ul>
-				</div>
-				{{{ end }}}
-			</li>
-			<!-- ENDIF function.displayMenuItem -->
-			{{{end}}}
-		</ul>
-	</div>
+					</a>
+					{{{ if navigation.dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{navigation.dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
+				<!-- ENDIF function.displayMenuItem -->
+				{{{end}}}
+			</ul>
+		</div>
 
-	<div class="">
-		{{{ if config.loggedIn }}}
-		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
-			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search">
-			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-			</li>
-			{{{ end }}}
+		<div class="">
+			{{{ if config.loggedIn }}}
+			<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+				{{{ if config.searchEnabled }}}
+				<li component="sidebar/search" class="nav-item m-0 search">
+				<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications">
-			<!-- IMPORT partials/sidebar/notifications.tpl -->
-			</li>
+				<li component="notifications" class="nav-item m-0 notifications">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
 
-			{{{ if canChat }}}
-			<li class="nav-item m-0 chats">
-			<!-- IMPORT partials/sidebar/chats.tpl -->
-			</li>
-			{{{ end }}}
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts">
-			<!-- IMPORT partials/sidebar/drafts.tpl -->
-			</li>
+				<li component="sidebar/drafts" class="nav-item m-0 drafts">
+				<!-- IMPORT partials/sidebar/drafts.tpl -->
+				</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 usermenu">
-			<!-- IMPORT partials/sidebar/user-menu.tpl -->
-			</li>
-		</ul>
-		{{{ else }}}
-		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
-			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
-		</ul>
-		{{{ end }}}
+				<li id="user_label" class="nav-item m-0 py-2 usermenu">
+				<!-- IMPORT partials/sidebar/user-menu.tpl -->
+				</li>
+			</ul>
+			{{{ else }}}
+			<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+				<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+			</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/templates/partials/sidebar/notifications.tpl

@@ -4,7 +4,7 @@
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 		</span>
-		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+		<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>

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

@@ -1,14 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="clearfix">
-	<div class="icon float-start">
-		<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
-			{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username}
+<div class="d-flex gap-2 mb-2 justify-content-between align-items-center flex-nowrap">
+	<div class="icon text-truncate">
+		<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">
+			{buildAvatar(post.user, "24px", true)} {post.user.username}
 		</a>
 	</div>
-	<small class="float-end">
-		<span class="timeago" title="{post.timestampISO}"></span>
-	</small>
+	<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
 </div>
 
 <div>{post.content}</div>

package/templates/partials/topic/navigator-mobile.tpl

@@ -0,0 +1,43 @@
+<div class="d-flex justify-content-end w-100">
+	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300" style="height:50px;">
+		<div class="position-relative">
+			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:50px;"></div>
+		</div>
+		<div class="wrapper d-flex align-items-center h-100" style="padding: 5px 0px;">
+			<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop" style="z-index: 1;"></i>
+
+			<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
+				<span class="pagination-text position-relative fw-bold"></span>
+			</a>
+
+			<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom" style="z-index: 1;"></i>
+			<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
+				<li class="p-3">
+					<div class="row">
+						<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
+						<div class="col-4 text-end">
+							<div class="scroller-content">
+								<span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
+								<div class="scroller-container border-gray-200" style="height: 300px; border-right: 3px solid; margin-right: 5.5px;">
+									<div class="scroller-thumb position-relative" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
+										<span class="thumb-text fw-bold user-select-none position-relative" style="top: -15px; padding-right: 10px;"></span>
+										<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
+									</div>
+								</div>
+								<span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-6">
+							<button id="myNextPostBtn" class="btn btn-outline-secondary form-control text-truncate" disabled>[[topic:go-to-my-next-post]]</button>
+						</div>
+						<div class="col-6">
+							<input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>

package/templates/partials/topic/post.tpl

@@ -104,7 +104,7 @@
 				<i class="fa fa-chevron-up text-primary"></i>
 			</a>
 
-			<div class="d-inline-block px-3 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
+			<div class="d-inline-block px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
 			{{{ if !downvote:disabled }}}
 			<a component="post/downvote" href="#" class="btn-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}">

package/templates/partials/topic/quickreply.tpl

@@ -15,8 +15,8 @@
 		</div>
 		<div>
 			<div class="d-flex justify-content-end gap-2">
+				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-outline" formmethod="get"><i class="fa fa-expand"></i></button>
 				<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
-				<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-primary" formmethod="get"><i class="fa fa-expand"></i></button>
 			</div>
 		</div>
 	</form>

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

@@ -1,5 +1,5 @@
 <nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded">
-	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
+	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if template.category }}}
 			<!-- IMPORT partials/category/watch.tpl -->
@@ -27,11 +27,11 @@
 			{{{ end }}}
 
 			<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
-				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+				<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
 			</a>
 		</ul>
 
-		<div class="d-flex gap-1 align-items-stretch">
+		<div class="d-flex gap-1 align-items-center">
 			{{{ if template.category }}}
 				{{{ if privileges.topics:create }}}
 				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>

package/templates/popular.tpl

@@ -7,7 +7,7 @@
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[recent:no_popular_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

package/templates/post-queue.tpl

@@ -0,0 +1,113 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="btn-toolbar justify-content-end">
+	{{{ if (!singlePost && posts.length) }}}
+	<div class="me-2">
+	<!-- IMPORT partials/category-filter-right.tpl -->
+	</div>
+	<div class="btn-group bottom-sheet" component="post-queue/bulk-actions">
+		<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false">
+			<i class="fa fa-clone"></i><span class="fw-semibold"> [[post-queue:bulk-actions]]</span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-end">
+			{{{ if canAccept }}}
+			<li><a class="dropdown-item" href="#" data-action="accept-all">[[post-queue:accept-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="accept-selected">[[post-queue:accept-selected]]</a></li>
+			<li class="dropdown-divider"></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-all">[[post-queue:reject-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-selected">[[post-queue:reject-selected]]</a></li>
+			{{{ else }}}
+			<li><a class="dropdown-item" href="#" data-action="reject-all">[[post-queue:remove-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-selected">[[post-queue:remove-selected]]</a></li>
+			{{{ end }}}
+		</ul>
+	</div>
+	{{{ end }}}
+</div>
+<hr/>
+<div class="row">
+	<div class="col-12">
+		<div class="post-queue preventSlideout posts-list">
+			{{{ if !posts.length }}}
+			{{{ if isAdmin }}}
+			<div class="card card-body">
+				<p>
+				[[post-queue:description, {config.relative_path}/admin/settings/post#post-queue]]
+				</p>
+			</div>
+			{{{ end }}}
+			{{{ end }}}
+
+			{{{ each posts }}}
+			<div class="card mb-3" data-id="{posts.id}">
+				<div class="card-header">
+					{{{ if !singlePost }}}
+					<input type="checkbox" class="form-check-input" autocomplete="off" />
+					{{{ end }}}
+					<strong>{{{ if posts.data.tid }}}[[post-queue:reply]]{{{ else }}}[[post-queue:topic]]{{{ end }}}</strong>
+					<span class="timeago float-end" title={posts.data.timestampISO}></span>
+				</div>
+				<div class="card-body">
+					<div class="row">
+						<div class="col-lg-2 col-12">
+							<strong>[[post-queue:user]]</strong>
+							<div>
+								{{{ if posts.user.userslug}}}
+								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24px", true, "not-responsive")} {posts.user.username}</a>
+								{{{ else }}}
+								{posts.user.username}
+								{{{ end }}}
+							</div>
+						</div>
+						<div class="col-lg-3 col-12">
+							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-bs-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}">
+									<div class="category-item d-inline-block">
+										{buildCategoryIcon(./category, "24px", "rounded-circle")}
+										{posts.category.name}
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="col-lg-7 col-12">
+							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-title text-break">
+								{{{ 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-bs-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
+						<div class="post-content text-break">{posts.data.content}</div>
+						<div class="post-content-editable hidden">
+							<textarea class="form-control w-100" style="height:300px;">{posts.data.rawContent}</textarea>
+						</div>
+					</div>
+				</div>
+				<div class="card-footer text-end">
+					<div>
+						{{{ if canAccept }}}
+						<button class="btn btn-danger btn-sm" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
+						<button class="btn btn-info btn-sm" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
+						<button class="btn btn-success btn-sm" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
+						{{{ else }}}
+						<button class="btn btn-danger btn-sm" 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>

package/templates/recent.tpl

@@ -9,7 +9,7 @@
 
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[recent:no_recent_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

package/templates/top.tpl

@@ -7,7 +7,7 @@
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[top:no_top_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[top:no_top_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

package/templates/topic.tpl

@@ -11,7 +11,7 @@
 </h2>
 
 <div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
-	<span component="topic/labels" class="d-flex gap-2 lh-1">
+	<span component="topic/labels" class="d-flex gap-2">
 		<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
 			<i class="fa fa-clock-o"></i>
 			[[topic:scheduled]]

package/templates/unread.tpl

@@ -6,7 +6,7 @@
 <div class="unread">
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
-		<div id="category-no-topics" class="alert alert-warning {{{ if topics.length }}}hidden{{{ end }}}">[[unread:no_unread_topics]]</div>
+		<div id="category-no-topics" class="alert alert-info mt-3 {{{ if topics.length }}}hidden{{{ end }}}">[[unread:no_unread_topics]]</div>
 
 		<!-- IMPORT partials/topics_list.tpl -->
 		<button id="load-more-btn" class="btn btn-primary hide">[[unread:load_more]]</button>