nodebb-theme-harmony 1.0.0-beta.99 → 1.0.1

package/languages/en-GB/harmony.json

@@ -6,6 +6,7 @@
 	"settings.title": "Theme settings",
 	"settings.enableQuickReply": "Enable quick reply",
 	"settings.centerHeaderElements": "Center header elements",
+	"settings.mobileTopicTeasers": "Show topic teasers on mobile",
 	"settings.stickyToolbar": "Sticky toolbar",
 	"settings.stickyToolbar.help": "The toolbar on topic and category pages will stick to the top of the page",
 	"settings.autohideBottombar": "Auto hide bottom bar",

package/library.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const nconf = require.main.require('nconf');
 const meta = require.main.require('./src/meta');
 const _ = require.main.require('lodash');
 const user = require.main.require('./src/user');
@@ -11,6 +12,7 @@ const library = module.exports;
 const defaults = {
 	enableQuickReply: 'on',
 	centerHeaderElements: 'off',
+	mobileTopicTeasers: 'off',
 	stickyToolbar: 'on',
 	autohideBottombar: 'off',
 	openSidebars: 'off',
@@ -28,8 +30,26 @@ library.init = async function (params) {
 		middleware.canViewUsers,
 		middleware.checkAccountPermissions,
 	], controllers.renderThemeSettings);
+
+	if (nconf.get('isPrimary') && process.env.NODE_ENV === 'production') {
+		setTimeout(buildSkins, 0);
+	}
 };
 
+async function buildSkins() {
+	try {
+		const plugins = require.main.require('./src/plugins');
+		await plugins.prepareForBuild(['client side styles']);
+		for (const skin of meta.css.supportedSkins) {
+			// eslint-disable-next-line no-await-in-loop
+			await meta.css.buildBundle(`client-${skin}`, true);
+		}
+		require.main.require('./src/meta/minifier').killAll();
+	} catch (err) {
+		console.error(err.stack);
+	}
+}
+
 library.addAdminNavigation = async function (header) {
 	header.plugins.push({
 		route: '/plugins/harmony',
@@ -98,6 +118,16 @@ library.defineWidgetAreas = async function (areas) {
 			template: 'global',
 			location: 'brand-header',
 		},
+		{
+			name: 'About me (before)',
+			template: 'account/profile.tpl',
+			location: 'profile-aboutme-before',
+		},
+		{
+			name: 'About me (after)',
+			template: 'account/profile.tpl',
+			location: 'profile-aboutme-after',
+		},
 	]);
 
 	return areas;
@@ -112,6 +142,7 @@ async function loadThemeConfig(uid) {
 	const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
 	config.enableQuickReply = config.enableQuickReply === 'on';
 	config.centerHeaderElements = config.centerHeaderElements === 'on';
+	config.mobileTopicTeasers = config.mobileTopicTeasers === 'on';
 	config.stickyToolbar = config.stickyToolbar === 'on';
 	config.autohideBottombar = config.autohideBottombar === 'on';
 	config.openSidebars = config.openSidebars === 'on';
@@ -119,7 +150,7 @@ async function loadThemeConfig(uid) {
 }
 
 library.getThemeConfig = async function (config) {
-	config.theme = await loadThemeConfig(config.uid);;
+	config.theme = await loadThemeConfig(config.uid);
 	config.openDraftsOnPageLoad = false;
 	return config;
 };

package/package.json

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

package/public/harmony.js

@@ -1,6 +1,7 @@
 'use strict';
 
 $(document).ready(function () {
+	setupSkinSwitcher();
 	setupNProgress();
 	setupMobileMenu();
 	setupSearch();
@@ -9,21 +10,22 @@ $(document).ready(function () {
 	setupNavTooltips();
 	fixPlaceholders();
 
-	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
-		const skin = $(this).attr('data-value');
-		$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
-		$(this).find('.fa-check').removeClass('invisible');
-		require(['forum/account/settings'], function (accountSettings) {
-			$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').addClass('fa-fade');
-			accountSettings.changeSkin(skin);
+	function setupSkinSwitcher() {
+		$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
+			const skin = $(this).attr('data-value');
+			$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
+			$(this).find('.fa-check').removeClass('invisible');
+			require(['forum/account/settings', 'hooks'], function (accountSettings, hooks) {
+				hooks.one('action:skin.change', function () {
+					$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').removeClass('fa-fade');
+				});
+				$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').addClass('fa-fade');
+				accountSettings.changeSkin(skin);
+			});
 		});
-	});
+	}
 
 	require(['hooks'], function (hooks) {
-		hooks.on('action:skin.change', function () {
-			$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').removeClass('fa-fade');
-		});
-
 		$(window).on('action:composer.resize action:sidebar.toggle', function () {
 			$('[component="composer"]').css({
 				left: $('.sidebar-left').outerWidth(true),
@@ -65,6 +67,9 @@ $(document).ready(function () {
 			$body.on('hidden.bs.dropdown', '.sticky-tools', function () {
 				bottomBar.removeClass('hidden');
 			});
+			function isSearchVisible() {
+				return !!$('[component="bottombar"] [component="sidebar/search"] .search-dropdown.show').length;
+			}
 
 			let lastScrollTop = 0;
 			let newPostsLoaded = false;
@@ -76,7 +81,7 @@ $(document).ready(function () {
 					lastScrollTop = st;
 					return;
 				}
-				if (st !== lastScrollTop && !navigator.scrollActive) {
+				if (st !== lastScrollTop && !navigator.scrollActive && !isSearchVisible()) {
 					const diff = Math.abs(st - lastScrollTop);
 					const scrolledDown = st > lastScrollTop;
 					const scrolledUp = st < lastScrollTop;

package/scss/chats.scss

@@ -4,6 +4,19 @@
 	max-width: 100%;
 }
 
+.stacked-avatars {
+	width: 32px;
+	height: 32px;
+	span:first-child {
+		top: 0;
+		left: 8px;
+	}
+	span:last-child {
+		left: 0;
+		top: 8px;
+	}
+}
+
 body.page-user-chats {
 	overflow: hidden;
 	[data-widget-area="footer"] {
@@ -66,7 +79,16 @@ body.page-user-chats {
 }
 
 /* Mobile handling of chat page */
+@include media-breakpoint-down(lg) {
+	.page-user-chats.chat-loaded  {
+		padding-bottom: 4.75rem;
+	}
+}
+
 @include media-breakpoint-down(md) {
+	.page-user-chats.chat-loaded  {
+		padding-bottom: initial;
+	}
 	[component="chat/nav-wrapper"] {
 		width: 100%;
 	}

package/scss/modals.scss

@@ -1,9 +1,6 @@
 .tool-modal {
-	bottom: $spacer * 3;
-	right: $spacer * 4;
-
-	@include media-breakpoint-down(md) {
-		right: $spacer;
-		left: $spacer;
+	@include media-breakpoint-up(md) {
+		bottom: $spacer * 3;
+		right: $spacer * 4;
 	}
 }

package/scss/modules/tags.scss

@@ -1,6 +1,6 @@
 .tag-list {
 	.tag {
-		background-color: $gray-200;
-		color: $gray-700;
+		background-color: $gray-200!important;
+		color: $gray-700!important;
 	}
 }

package/scss/modules/topic-navigator.scss

@@ -1,5 +1,7 @@
 .topic .pagination-block {
-	min-width: 150px;
+	.scroller-content {
+		min-width: 150px;
+	}
 	.scroller-container {
 		left: 10px;
 		height: 300px;

package/scss/topic.scss

@@ -40,6 +40,9 @@
 			}
 
 			[component="post"] {
+				&.selected .post-container {
+					background-color: mix($body-bg, $body-color, 90%);
+				}
 				&.deleted .post-container {
 					opacity: .5;
 				}
@@ -50,6 +53,9 @@
 					pre {
 						max-height: calc($font-size-base * 24);
 					}
+					table { // text-break breaks table formatting
+						word-break:initial!important;
+					}
 				}
 
 				> [component="post/footer"] {

package/templates/account/profile.tpl

@@ -1,10 +1,27 @@
 <!-- IMPORT partials/account/header.tpl -->
+
+{{{ if widgets.profile-aboutme-before.length }}}
+<div data-widget-area="profile-aboutme-before">
+{{{each widgets.profile-aboutme-before}}}
+{./html}
+{{{end}}}
+</div>
+{{{ end }}}
+
 {{{ if aboutme }}}
 <div component="aboutme" class="text-sm text-break">
 {aboutmeParsed}
 </div>
 {{{ end }}}
 
+{{{ if widgets.profile-aboutme-after.length }}}
+<div data-widget-area="profile-aboutme-after">
+{{{each widgets.profile-aboutme-after}}}
+{./html}
+{{{end}}}
+</div>
+{{{ end }}}
+
 <div class="account-stats container">
 	<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2">
 		{{{ if !reputation:disabled }}}

package/templates/account/theme.tpl

@@ -17,6 +17,11 @@
 		<label class="form-check-label" for="centerHeaderElements">[[harmony:settings.centerHeaderElements]]</label>
 	</div>
 
+	<div class="form-check mb-3">
+		<input class="form-check-input" type="checkbox" id="mobileTopicTeasers" name="mobileTopicTeasers" {{{ if config.theme.mobileTopicTeasers }}}checked{{{ end }}}>
+		<label class="form-check-label" for="mobileTopicTeasers">[[harmony:settings.mobileTopicTeasers]]</label>
+	</div>
+
 	<div class="form-check mb-3">
 		<input class="form-check-input" type="checkbox" id="stickyToolbar" name="stickyToolbar" {{{ if config.theme.stickyToolbar }}}checked{{{ end }}}>
 		<label class="form-check-label" for="stickyToolbar">

package/templates/admin/plugins/harmony.tpl

@@ -10,6 +10,10 @@
 				<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
 				<label for="centerHeaderElements" class="form-check-label">[[harmony:settings.centerHeaderElements]]</label>
 			</div>
+			<div class="form-check form-switch">
+				<input type="checkbox" class="form-check-input" id="mobileTopicTeasers" name="mobileTopicTeasers" />
+				<label for="mobileTopicTeasers" class="form-check-label">[[harmony:settings.mobileTopicTeasers]]</label>
+			</div>
 			<div class="form-check form-switch">
 				<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
 				<div for="stickyToolbar" class="form-check-label">

package/templates/chats.tpl

@@ -20,7 +20,7 @@
 			{{{end}}}
 		</div>
 	</div>
-	<div class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper">
+	<div class="flex-grow-1 ms-md-2 ps-md-2 border-1 border-start-md h-100" component="chat/main-wrapper" style="min-width: 0;">
 		<!-- IMPORT partials/chats/message-window.tpl -->
 	</div>
 	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>

package/templates/flags/list.tpl

@@ -2,6 +2,5 @@
 
 <div class="d-flex flex-column gap-3">
 	<!-- IMPORT partials/flags/filters.tpl -->
-	<!-- IMPORT partials/flags/bulk-actions.tpl -->
 	<!-- IMPORT partials/flags/results.tpl -->
 </div>

package/templates/partials/categories/item.tpl

@@ -1,6 +1,6 @@
 <li component="categories/category" data-cid="{./cid}" class="w-100 border-bottom py-3 py-lg-4 gap-1 d-flex flex-column flex-lg-row align-items-start category-{./cid}">
 	<meta itemprop="name" content="{./name}">
-	
+
 	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
 		<div class="flex-shrink-0">
 		{buildCategoryIcon(@value, "40px", "rounded-1")}
@@ -10,7 +10,7 @@
 				<!-- IMPORT partials/categories/link.tpl -->
 			</h2>
 			{{{ if ./descriptionParsed }}}
-			<div class="description text-muted text-xs w-100">
+			<div class="description text-muted text-sm w-100">
 				{./descriptionParsed}
 			</div>
 			{{{ end }}}
@@ -54,7 +54,7 @@
 				</div>
 			</div>
 			{{{ if !config.hideCategoryLastPost }}}
-			<div component="topic/teaser" class="teaser col-lg-6">
+			<div component="topic/teaser" class="teaser col-lg-6 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
 				<!-- IMPORT partials/categories/lastpost.tpl -->
 			</div>
 			{{{ end }}}

package/templates/partials/categories/lastpost.tpl

@@ -9,7 +9,7 @@
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>
 		</div>
-		<div class="post-content text-xs line-clamp-2 lh-sm">
+		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm">
 			{./content}
 		</div>
 	</div>

package/templates/partials/chats/message-window.tpl

@@ -24,8 +24,10 @@
 	<div component="chat/composer" class="d-flex flex-column flex-md-row gap-2 border-top pt-2 align-items-start align-items-md-end">
 		<div class="w-100 flex-grow-1 position-relative input-group">
 			<button component="chat/upload/button" class="btn btn-outline-primary btn-sm align-self-stretch px-3 px-md-2" type="button"><i class="fa fa-fw fa-upload"></i></button>
-			<textarea component="chat/input" placeholder="[[modules:chat.placeholder.mobile]]" class="form-control chat-input mousetrap" style="height:0;resize:none;"></textarea>
-			<span component="chat/message/remaining" class="text-xs text-muted position-absolute me-5 mb-1 end-0 bottom-0">{maximumChatMessageLength}</span>
+			<div class="flex-grow-1 position-relative">
+				<textarea component="chat/input" placeholder="[[modules:chat.placeholder.mobile]]" class="form-control chat-input mousetrap rounded-0" style="height:0;max-height:30vh;resize:none;"></textarea>
+				<span component="chat/message/remaining" class="text-xs text-muted position-absolute me-1 mb-1 end-0 bottom-0">{maximumChatMessageLength}</span>
+			</div>
 			<button class="btn btn-primary btn-sm align-self-stretch px-3 px-md-2" type="button" data-action="send"><i class="fa fa-fw fa-paper-plane"></i></button>
 		</div>
 		<form class="hidden" component="chat/upload" method="post" enctype="multipart/form-data">

package/templates/partials/chats/message.tpl

@@ -1,11 +1,11 @@
-<li component="chat/message" class="chat-message mx-2 pe-2 clear{{{ if ./deleted }}} deleted{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
+<li component="chat/message" class="chat-message mx-2 pe-2 clear{{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header lh-1 d-flex align-items-center gap-2 text-sm {{{ if !messages.newSet }}}hidden{{{ end }}} pb-2">
 		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "18px", true, "not-responsive")}</a>
 		<span class="chat-user fw-semibold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
-		{{{ if ./fromUser.banned }}}
+		{{{ if messages.fromUser.banned }}}
 		<span class="badge bg-danger">[[user:banned]]</span>
 		{{{ end }}}
-		{{{ if ./fromUser.deleted }}}
+		{{{ if messages.fromUser.deleted }}}
 		<span class="badge bg-danger">[[user:deleted]]</span>
 		{{{ end }}}
 		<span class="chat-timestamp text-muted ms-2 timeago" title="{messages.timestampISO}"></span>
@@ -18,7 +18,7 @@
 			{messages.content}
 		</div>
 
-		{{{ if (!config.disableChatMessageEditing && ./self ) }}}
+		{{{ if (!config.disableChatMessageEditing && messages.self ) }}}
 		<div class="position-relative">
 			<div class="btn-group border shadow-sm controls position-absolute small hover-d-block" style="bottom:5px; right:30px; display:none;">
 				<button class="btn btn-sm btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>

package/templates/partials/chats/recent_room.tpl

@@ -5,9 +5,9 @@
 				<a class="stretched-link" href="{config.relative_path}/me/chats/{./roomId}"></a>
 				{{{ if ./users.length }}}
 				{{{ if ./groupChat}}}
-				<div class="position-relative" style="width:32px; height:32px;">
-					<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
-					<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
+				<div class="position-relative stacked-avatars">
+					<span class="text-decoration-none position-absolute" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
+					<span class="text-decoration-none position-absolute" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
 				</div>
 				{{{ else }}}
 				<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>

package/templates/partials/flags/bulk-actions.tpl

@@ -1,8 +1,8 @@
-<div class="btn-group float-end" component="flags/bulk-actions">
+<div class="dropdown" component="flags/bulk-actions">
 	<button class="filter-btn btn btn-light btn-sm border" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
 		<span class="filter-label">[[flags:bulk-actions]]</span>
 	</button>
-	<ul class="dropdown-menu p-1 text-sm">
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm">
 		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
 		<li><a href="#" class="dropdown-item rounded-1" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
 	</ul>

package/templates/partials/flags/filters.tpl

@@ -176,6 +176,8 @@
 		</a>
 	</div>
 
+	<!-- IMPORT partials/flags/bulk-actions.tpl -->
+
 	<form role="form">
 		<input type="hidden" name="sort" value="{./sort}" />
 		<input type="hidden" name="state" value="{./filters.state}" />

package/templates/partials/groups/invited.tpl

@@ -10,7 +10,7 @@
 </div>
 
 <div class="mb-2 clearfix">
-	<button class="btn btn-primary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
+	<button type="button" class="btn btn-primary btn-sm float-end" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
 </div>
 
 <table component="groups/invited" class="table table-hover">

package/templates/partials/groups/memberlist.tpl

@@ -1,5 +1,5 @@
 <div class="d-flex {{{ if group.isOwner }}}justify-content-between{{{ else }}}justify-content-end{{{ end }}} mb-3">
-	{{{ if group.isOwner }}}
+	{{{ if isAdmin }}}
 	<div class="flex-shrink-0">
 		<button component="groups/members/add" type="button" class="btn btn-primary btn-sm me-3" title="[[groups:details.add-member]]"><i class="fa fa-user-plus"></i> [[groups:details.add-member]]</button>
 	</div>

package/templates/partials/notifications_list.tpl

@@ -8,16 +8,16 @@
 {{{ each notifications }}}
 <li class="{./readClass} mb-2 p-1" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
 	<div class="d-flex gap-1 justify-content-between">
-		<div class="d-flex gap-0 flex-grow-1 align-items-start">
+		<div class="btn-ghost-sm d-flex gap-2 flex-grow-1 align-items-start">
 			{{{ if ./image }}}
 			{{{ if ./from }}}
-			<a class="btn-ghost-sm p-1 flex-grow-0 flex-shrink-0" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
+			<a class="flex-grow-0 flex-shrink-0" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
 			{{{ end }}}
 			{{{ else }}}
-			<a class="btn-ghost-sm p-1 flex-grow-0 flex-shrink-0"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
+			<a class="flex-grow-0 flex-shrink-0"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
 			{{{ end }}}
 			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
-				<a href="{./path}" class="btn-ghost-sm d-inline-block text-reset text-break text-sm ff-sans stretched-link">
+				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link">
 					{./bodyShort}
 				</a>
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>

package/templates/partials/sidebar/notifications.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="list-container notification-list list-unstyled overscroll-behavior-contain ff-base">
+		<ul component="notifications/list" class="list-container notification-list list-unstyled overscroll-behavior-contain pe-1 ff-base">
 			<li class="mb-2 p-1">
 				<div class="d-flex gap-1 justify-content-between">
 					<div class="d-flex gap-2 flex-grow-1 placeholder-wave">

package/templates/partials/sidebar/user-menu.tpl

@@ -5,7 +5,7 @@
 <ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown">
 	<li>
 		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
-			<span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
 			<span class="fw-semibold" component="header/username">{user.username}</span>
 		</a>
 	</li>
@@ -13,28 +13,28 @@
 	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online">
-			<span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
 			<span class="flex-grow-1">[[global:online]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away">
-			<span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
 			<span class="flex-grow-1">[[global:away]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd">
-			<span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
 			<span class="flex-grow-1">[[global:dnd]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>
 	</li>
 	<li>
 		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline">
-			<span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
+			<span component="user/status" class="flex-shrink-0 border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
 			<span class="flex-grow-1">[[global:invisible]]</span>
 			<i class="fa-solid fa-check text-muted flex-shrink-0"></i>
 		</a>

package/templates/partials/topic/navigator.tpl

@@ -1,23 +1,25 @@
 <div class="pagination-block d-none d-lg-block flex-grow-1 mb-2">
-	<div class="ps-1 ps-md-0 d-inline-block sticky-top" style="top:6rem;z-index:1;">
-		<div class="scroller-content d-flex gap-2 flex-column align-items-start">
-			<div class="pointer pagetop btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted" title="{./timestampISO}"></span></div>
-			<div class="scroller-container position-relative">
-				<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
-					<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
-					<div>
-						<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
-						<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
+	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
+		<div class="ps-1 ps-md-0 d-inline-block">
+			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
+				<div class="pointer pagetop btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></div>
+				<div class="scroller-container position-relative">
+					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
+						<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
+						<div>
+							<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
+							<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
+						</div>
 					</div>
-				</div>
 
-				<div class="unread d-inline-block position-absolute bottom-0">
-					<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
-						<a class="text-decoration-none" href="{url}"></a>
+					<div class="unread d-inline-block position-absolute bottom-0">
+						<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
+							<a class="text-decoration-none" href="{url}"></a>
+						</div>
 					</div>
 				</div>
+				<div class="pointer pagebottom btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></div>
 			</div>
-			<div class="pointer pagebottom btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted" title="{./lastposttimeISO}"></span></div>
 		</div>
 	</div>
 </div>

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

@@ -6,12 +6,12 @@
 </li>
 <li {{{ if posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/delete" role="menuitem" tabindex="-1" href="#" class="{{{ if posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-trash-o"></i><span> [[topic:delete]]
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-trash-o"></i></span> [[topic:delete]]
 	</a>
 </li>
 <li {{{ if !posts.deleted }}}hidden{{{ end }}}>
 	<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="post/restore" role="menuitem" tabindex="-1" href="#" class="{{{ if !posts.deleted }}}hidden{{{ end }}}">
-		<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i><span> [[topic:restore]]
+		<span class="menu-icon"><i class="fa fa-fw text-muted fa-history"></i></span> [[topic:restore]]
 	</a>
 </li>
 {{{ if posts.display_purge_tools }}}

package/templates/partials/topic/post.tpl

@@ -10,7 +10,7 @@
 	<div class="icon py-1 bg-body d-none d-sm-block">
 		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
-			<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+			<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
 		</a>
 	</div>
 
@@ -19,7 +19,7 @@
 			<div class="icon bg-body d-sm-none">
 				<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 					{buildAvatar(posts.user, "20px", true, "", "user/picture")}
-					<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+					<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
 				</a>
 			</div>
 

package/templates/partials/topic/quickreply.tpl

@@ -3,7 +3,7 @@
 	<div class="icon hidden-xs">
 		<a class="d-inline-block position-relative" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
-			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
+			{{{ if loggedInUser.status }}}<span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {loggedInUser.status}"><span class="visually-hidden">[[global:{loggedInUser.status}]]</span></span>{{{ end }}}
 		</a>
 	</div>
 	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">

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

@@ -1,5 +1,5 @@
 <div component="topic/reply/container" class="btn-group action-bar {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
-	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
+	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold " component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
 	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
@@ -11,15 +11,15 @@
 {{{ if loggedIn }}}
 	{{{ if !privileges.topics:reply }}}
 		{{{ if locked }}}
-		<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-primary disabled" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+		<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary disabled" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
 		{{{ end }}}
 	{{{ end }}}
 
 	{{{ if !locked }}}
-	<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-primary disabled hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
+	<a component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary disabled hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
 	{{{ end }}}
 {{{ else }}}
 	{{{ if !privileges.topics:reply }}}
-	<a component="topic/reply/guest" href="{config.relative_path}/login" class="d-flex align-items-center fw-semibold btn btn-primary">[[topic:guest-login-reply]]</a>
+	<a component="topic/reply/guest" href="{config.relative_path}/login" class="d-flex align-items-center fw-semibold btn btn-sm btn-primary">[[topic:guest-login-reply]]</a>
 	{{{ end }}}
 {{{ end }}}

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

@@ -46,7 +46,7 @@
 				{{{ end }}}
 				<!-- only show login button if not logged in and doesn't have any posting privilege -->
 				{{{ if (!loggedIn && (!privileges.topics:create && !canPost))}}}
-				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-sm btn-primary">[[category:guest-login-post]]</a>
 				{{{ end }}}
 			</div>
 		</div>

package/templates/partials/topics_list.tpl

@@ -15,8 +15,8 @@
 					{buildAvatar(./user, "40px", true, "avatar avatar-tooltip")}
 				</a>
 				{{{ if showSelect }}}
-				<div class="checkbox position-absolute top-100 start-50 translate-middle-x p-1 m-0 d-none d-lg-flex" style="max-width:max-content">
-					<i component="topic/select" class="fa text-muted pointer fa-square-o"></i>
+				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1"></i>
 				</div>
 				{{{ end }}}
 			</div>
@@ -52,11 +52,14 @@
 					{{{ if ./tags.length }}}
 					<span class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1">
 						{{{ each ./tags }}}
-						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 text-muted fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
 						{{{ end }}}
 					</span>
 					{{{ end }}}
-					<span class="hidden-xs badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></span>
+					<a href="{config.relative_path}/topic/{./slug}" class="hidden-xs badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></a>
+					{{{ if !config.theme.mobileTopicTeasers}}}
+					<span class="visible-xs-inline badge bg-transparent text-muted fw-normal timeago" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+					{{{ end }}}
 				</span>
 			</div>
 			{{{ if ./thumbs.length }}}
@@ -87,7 +90,7 @@
 					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
 				</div>
 			</div>
-			<div component="topic/teaser" class="meta teaser col-lg-6">
+			<div component="topic/teaser" class="meta teaser col-lg-6 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
 				<div class="lastpost background-link-container border-start border-2 lh-sm h-100" style="border-color: {./category.bgColor}!important;">
 					<a class="background-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
 					{{{ if ./unreplied }}}
@@ -101,7 +104,7 @@
 						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
 						</a>
 					</div>
-					<div class="post-content text-xs ps-2 line-clamp-2 lh-sm text-break">
+					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break">
 						{./teaser.content}
 					</div>
 					{{{ end }}}
@@ -110,8 +113,8 @@
 			</div>
 		</div>
 		{{{ if showSelect }}}
-		<div class="checkbox position-absolute top-0 end-0 p-1 mt-3 m-0 d-flex d-lg-none" style="max-width:max-content">
-			<i component="topic/select" class="fa fa-square-o text-muted pointer"></i>
+		<div class="checkbox position-absolute top-0 end-0 mt-3 m-0 d-flex d-lg-none" style="max-width:max-content">
+			<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
 		</div>
 		{{{ end }}}
 	</li>