nodebb-theme-harmony 2.1.38 → 2.1.40

package/README.md

@@ -15,6 +15,10 @@ _The cards in the header are added by the recent cards plugin. https://github.co
 
 <img height="450" src="screenshots/categories.png">
 
+### Category
+
+<img height="450" src="screenshots/category.png">
+
 ### Recent
 <img height="450" src="screenshots/recent.png">
 

package/library.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const nconf = require.main.require('nconf');
+const { setTimeout } = require('timers/promises');
 const meta = require.main.require('./src/meta');
 const _ = require.main.require('lodash');
 const user = require.main.require('./src/user');
@@ -47,6 +48,8 @@ async function buildSkins() {
 		for (const skin of meta.css.supportedSkins) {
 			// eslint-disable-next-line no-await-in-loop
 			await meta.css.buildBundle(`client-${skin}`, true);
+			// eslint-disable-next-line no-await-in-loop
+			await setTimeout(5000);
 		}
 		require.main.require('./src/meta/minifier').killAll();
 	} catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.1.38",
+  "version": "2.1.40",
   "nbbpm": {
     "compatibility": "^4.0.0"
   },

package/public/harmony.js

@@ -251,7 +251,8 @@ $(document).ready(function () {
 		tooltipEls.on('mouseenter', function (ev) {
 			const target = $(ev.target);
 			const isDropdown = target.hasClass('dropdown-menu') || !!target.parents('.dropdown-menu').length;
-			if (!$('.sidebar').hasClass('open') && !isDropdown) {
+			const isSidebarOpen = target.parents('.sidebar').hasClass('open');
+			if (!isSidebarOpen && !isDropdown) {
 				$(this).tooltip('show');
 			}
 		});

package/scss/header.scss

@@ -1,7 +1,7 @@
 // hide brand/title on user and group details pages so it doesnt break covers
 body[class*="template-account-"], .template-chats, .template-groups-details {
 	.brand-container {
-		display: none;
+		display: none!important;
 	}
 }
 [component="brand/wrapper"] {

package/scss/sidebar.scss

@@ -75,14 +75,14 @@
 		.fa-angles-right { display: inline-block; }
 		.fa-angles-left { display: none; }
 	}
-
+	$dropdown-menu-width: 350px;
 	.search-dropdown {
-		width: 300px;
+		width: $dropdown-menu-width;
 	}
 
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
-		min-width: 300px;
-		width: 300px;
+		min-width: $dropdown-menu-width;
+		width: $dropdown-menu-width;
 		.list-container {
 			max-height: 400px;
 			overflow-y: auto;

package/scss/skins.scss

@@ -6,6 +6,10 @@
 	.form-control::placeholder {
 		color:$gray-100!important;
 	}
+	.position-sticky.bg-body {
+		background-color: transparent!important;
+		backdrop-filter: blur(5px);
+	}
 }
 
 .skin-solar {

package/templates/account/profile.tpl

@@ -28,7 +28,7 @@
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[global:reputation]]</span>
-				<span class="fs-2 ff-secondary" title="{reputation}">{humanReadableNumber(reputation)}</span>
+				<span class="fs-2 ff-secondary" title="{formattedNumber(reputation)}">{humanReadableNumber(reputation)}</span>
 			</div>
 		</div>
 		{{{ end }}}
@@ -36,7 +36,7 @@
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[user:profile-views]]</span>
 				<span class="fs-2 ff-secondary" title="
-				{profileviews}">{humanReadableNumber(profileviews)}</span>
+				{formattedNumber(profileviews)}">{humanReadableNumber(profileviews)}</span>
 			</div>
 		</div>
 

package/templates/category.tpl

@@ -10,11 +10,11 @@
 			<h1 class="tracking-tight fs-3 fw-semibold mb-0">{./name}</h1>
 			<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 				<span class="badge text-body border border-gray-300 stats text-xs">
-					<span title="{totalTopicCount}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
+					<span title="{formattedNumber(totalTopicCount)}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
 					<span class="text-lowercase fw-normal">[[global:topics]]</span>
 				</span>
 				<span class="badge text-body border border-gray-300 stats text-xs">
-					<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
+					<span title="{formattedNumber(totalPostCount)}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
 					<span class="text-lowercase fw-normal">[[global:posts]]</span>
 				</span>
 				{{{ if !isNumber(cid) }}}

package/templates/partials/account/sidebar-left.tpl

@@ -12,7 +12,7 @@
 			{{{ if template.account/downvoted }}}active{{{ end }}}
 			{{{ if template.account/bookmarks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:posts]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.posts}">{humanReadableNumber(counts.posts)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.posts)}">{humanReadableNumber(counts.posts)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
@@ -20,57 +20,57 @@
 			{{{ if template.account/watched }}}active{{{ end }}}
 			{{{ if template.account/ignored }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:topics]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.topics}">{humanReadableNumber(counts.topics)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.topics)}">{humanReadableNumber(counts.topics)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/shares" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/shares }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:shares]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.shares}">{humanReadableNumber(counts.shares)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.shares)}">{humanReadableNumber(counts.shares)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/groups" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/groups }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:header.groups]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.groups)}">{humanReadableNumber(counts.groups)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/followers" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:followers]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.followers}">{humanReadableNumber(counts.followers)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.followers)}">{humanReadableNumber(counts.followers)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/following" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/following }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:following]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.following}">{humanReadableNumber(counts.following)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.following)}">{humanReadableNumber(counts.following)}</span>
 		</a>
 
 		{{{ if canEdit }}}
 		<a href="{config.relative_path}/user/{userslug}/categories" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/categories }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-categories]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.categoriesWatched)}">{humanReadableNumber(counts.categoriesWatched)}</span>
 		</a>
 		{{{ if isSelf }}}
 		<a href="{config.relative_path}/user/{userslug}/tags" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/tags }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-tags]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.tagsWatched}">{counts.tagsWatched}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.tagsWatched)}">{humanReadableNumber(counts.tagsWatched)}</span>
 		</a>
 		{{{ end }}}
 
 		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:blocked-users]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.blocks}">{humanReadableNumber(counts.blocks)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.blocks)}">{humanReadableNumber(counts.blocks)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/uploads }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:uploads]]</div>
-			<span class="flex-shrink-0 text-xs" title="{counts.uploaded}">{humanReadableNumber(counts.uploaded)}</span>
+			<span class="flex-shrink-0 text-xs" title="{formattedNumber(counts.uploaded)}">{humanReadableNumber(counts.uploaded)}</span>
 		</a>
 		{{{ end }}}
 

package/templates/partials/categories/item.tpl

@@ -40,12 +40,12 @@
 	<div class="d-flex col-lg-5 col-12 align-content-stretch">
 		<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr;">
 			<div class="card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-				<span class="fs-5 ff-secondary lh-1" title="{./totalTopicCount}">{humanReadableNumber(./totalTopicCount, 0)}</span>
+				<span class="fs-5 ff-secondary lh-1" title="{formattedNumber(./totalTopicCount)}">{humanReadableNumber(./totalTopicCount, 0)}</span>
 				<span class="d-none d-xl-flex text-lowercase text-xs">[[global:topics]]</span>
 				<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-list"></i>
 			</div>
 			<div class="card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-				<span class="fs-5 ff-secondary lh-1" title="{./totalPostCount}">{humanReadableNumber(./totalPostCount, 0)}</span>
+				<span class="fs-5 ff-secondary lh-1" title="{formattedNumber(./totalPostCount)}">{humanReadableNumber(./totalPostCount, 0)}</span>
 				<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
 				<i class="d-xl-none fa-regular fa-fw text-xs text-muted opacity-75 fa-message"></i>
 			</div>

package/templates/partials/groups/sidebar-left.tpl

@@ -5,18 +5,18 @@
 		</button>
 		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:members]]</div>
-			<span component="group/member/count" class="flex-shrink-0 text-xs lh-1" title="{group.memberCount}">{humanReadableNumber(group.memberCount)}</span>
+			<span component="group/member/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.memberCount)}">{humanReadableNumber(group.memberCount)}</span>
 		</button>
 
 		{{{ if group.isOwner }}}
 		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:details.pending]]</div>
-			<span component="group/pending/count" class="flex-shrink-0 text-xs lh-1" title="{group.pending.length}">{humanReadableNumber(group.pending.length)}</span>
+			<span component="group/pending/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.pending.length)}">{humanReadableNumber(group.pending.length)}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold gap-2">
 			<div class="flex-grow-1">[[groups:details.invited]]</div>
-			<span component="group/invited/count" class="flex-shrink-0 text-xs lh-1" title="{group.invited.length}">{humanReadableNumber(group.invited.length)}</span>
+			<span component="group/invited/count" class="flex-shrink-0 text-xs lh-1" title="{formattedNumber(group.invited.length)}">{humanReadableNumber(group.invited.length)}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">

package/templates/partials/notifications_list.tpl

@@ -21,10 +21,15 @@
 				{{{ end }}}
 			</a>
 
-			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
+			<div class="d-flex flex-grow-1 flex-column gap-1 align-items-start position-relative">
 				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
 					{./bodyShort}
 				</a>
+				{{{ if ./bodyLong}}}
+				<div class="text-secondary text-sm line-clamp-2 hidden-blockquote hidden-leading-br">
+					{./bodyLong}
+				</div>
+				{{{ end }}}
 				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
 			</div>
 		</div>

package/templates/partials/sidebar/drafts.tpl

@@ -31,9 +31,7 @@
 					<div class="d-flex gap-1 justify-content-between ff-base">
 						<a href="#" class="d-flex flex-column flex-grow-1 gap-2 justify-content-start align-items-start btn btn-ghost btn-sm ff-sans text-start" component="drafts/open" data-save-id="{./save_id}" role="menuitem">
 							{{{ if (./action == "topics.post") }}}
-							{{{ if ./title}}}
-							<div class="text text-xs fw-semibold line-clamp-2 text-break">{./title}</div>
-							{{{ end }}}
+							<div class="text text-xs fw-semibold line-clamp-2 text-break">{{{ if ./title}}}{./title}{{{ else }}}[[topic:composer.untitled-topic]]{{{ end }}}</div>
 							{{{ end }}}
 
 							{{{ if (./action == "posts.reply") }}}

package/templates/partials/skin-switcher.tpl

@@ -13,7 +13,7 @@
 	<ul class="dropdown-menu p-1 text-sm overflow-auto p-1" role="menu">
 		<div class="d-flex">
 			<div>
-				<li class="dropdown-header">Light</li>
+				<li class="dropdown-header">[[themes/harmony:light]]</li>
 				<div class="d-grid" style="grid-template-columns: 1fr 1fr;">
 					{{{ each bootswatchSkinOptions.light }}}
 					<li>
@@ -23,7 +23,7 @@
 				</div>
 			</div>
 			<div>
-				<li class="dropdown-header">Dark</li>
+				<li class="dropdown-header">[[themes/harmony:dark]]</li>
 				{{{ each bootswatchSkinOptions.dark }}}
 				<li>
 					<a href="#" class="dropdown-item rounded-1" data-value="{./value}" role="menuitem">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>

package/templates/partials/topic/stats.tpl

@@ -1,30 +1,30 @@
 {{{ if ./crossposts.length }}}
 <span class="badge text-body border border-gray-300 stats text-xs position-relative">
 	<i class="fa-regular fa-fw fa-clone visible-xs-inline" title="[[global:crossposts]]"></i>
-	<span component="topic/crosspost-count" title="{crossposts.length}" class="fw-bold">{humanReadableNumber(crossposts.length)}</span>
+	<span component="topic/crosspost-count" title="{formattedNumber(crossposts.length)}" class="fw-bold">{humanReadableNumber(crossposts.length)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:crossposts]]</span>
 	<a href="#" aria-label="[[aria:show-crossposts]]" id="show-crossposts" class="stretched-link"></a>
 </span>
 {{{ end }}}
 <span class="badge text-body border border-gray-300 stats text-xs">
 	<i class="fa-regular fa-fw fa-message visible-xs-inline" title="[[global:posts]]"></i>
-	<span component="topic/post-count" title="{postcount}" class="fw-bold">{humanReadableNumber(postcount)}</span>
+	<span component="topic/post-count" title="{formattedNumber(postcount)}" class="fw-bold">{humanReadableNumber(postcount)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:posts]]</span>
 </span>
 <span class="badge text-body border border-gray-300 stats text-xs">
 	<i class="fa fa-fw fa-user visible-xs-inline" title="[[global:posters]]"></i>
-	<span title="{postercount}" class="fw-bold">{humanReadableNumber(postercount)}</span>
+	<span title="{formattedNumber(postercount)}" class="fw-bold">{humanReadableNumber(postercount)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:posters]]</span>
 </span>
 <span class="badge text-body border border-gray-300 stats text-xs">
 	<i class="fa fa-fw fa-eye visible-xs-inline" title="[[global:views]]"></i>
-	<span class="fw-bold" title="{viewcount}">{humanReadableNumber(viewcount)}</span>
+	<span class="fw-bold" title="{formattedNumber(viewcount)}">{humanReadableNumber(viewcount)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:views]]</span>
 </span>
 {{{ if ./followercount }}}
 <span class="badge text-body border border-gray-300 stats text-xs">
 	<i class="fa fa-fw fa-bell-o visible-xs-inline" title="[[global:watching]]"></i>
-	<span class="fw-bold" title="{viewcount}">{humanReadableNumber(followercount)}</span>
+	<span class="fw-bold" title="{formattedNumber(followercount)}">{humanReadableNumber(followercount)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:watching]]</span>
 </span>
 {{{ end }}}