nodebb-theme-harmony 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "nbbpm": {
     "compatibility": "^3.3.0"
   },

package/scss/account.scss

@@ -3,14 +3,6 @@
 }
 .account {
 	margin-top: 200px;
-	width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-
-	.avatar-wrapper {
-		border: 4px solid white;
-		border-radius: 50%;
-	}
 
 	@include media-breakpoint-up(md) {
 		margin-top: 300px;
@@ -18,17 +10,11 @@
 
 	.categories {
 		[component="categories/category"] {
-			.depth-1 {
-				padding-left: 50px;
-			}
-			.depth-2 {
-				padding-left: 100px;
-			}
-			.depth-3 {
-				padding-left: 150px;
-			}
-			.depth-4 {
-				padding-left: 150px;
+			$category-pad: 50;
+			@for $i from 1 through 6 {
+				.depth-#{$i} {
+					padding-left: #{$category-pad * $i}px;
+				}
 			}
 		}
 	}

package/scss/chats.scss

@@ -1,9 +1,5 @@
 // chats need a bit of css
 
-.page-user-chats #content {
-	max-width: 100%;
-}
-
 .stacked-avatars {
 	width: 32px;
 	height: 32px;
@@ -18,6 +14,9 @@
 }
 
 body.page-user-chats {
+	#content {
+		max-width: 100%;
+	}
 	overflow: hidden;
 	[data-widget-area="footer"] {
 		display: none;

package/scss/common.scss

@@ -93,12 +93,6 @@ body:not(.page-user) {
 	background-color: initial;
 }
 
-.skin-noskin {
-	.sticky-tools .btn-link {
-		color: $dark;
-	}
-}
-
 .btn-link {
 	&:hover, &.active {
 		background-color: $btn-ghost-hover-color;

package/scss/harmony.scss

@@ -9,7 +9,6 @@
 @import "status";
 @import "account";
 @import "groups";
-@import "flags";
 @import "modals";
 
 @import "modules/breadcrumbs";

package/scss/mixins.scss

@@ -136,16 +136,6 @@
 	}
 
 	@include media-breakpoint-up(sm) {
-		&.minimal {
-			.post-footer, .timeline-event, [component="topic/quickreply/container"], .bookmarked {
-				display: none !important;
-			}
-
-			[component="post/content"] {
-				@include line-clamp(1);
-			}
-		}
-
 		> [component="post"], .timeline-event, > [component="post/placeholder"] {
 			border-left: 2px solid $border-color;
 

package/scss/overrides.scss

@@ -14,14 +14,9 @@ $gray-900: #212529 !default;
 $black:    #000 !default;
 
 $blue:    #0d6efd !default;
-// $indigo:  #6610f2 !default;
-// $purple:  #6f42c1 !default;
-// $pink:    #d63384 !default;
 $red:     #dc3545 !default;
-// $orange:  #fd7e14 !default;
 $yellow:  #ffc107 !default;
 $green:   #198754 !default;
-// $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
 
 $primary:       $blue !default;
@@ -47,7 +42,6 @@ $enable-caret: false;
 // disable smooth scroll, this makes window.scrollTo(0,0) in ajaxify.js take x milliseconds
 $enable-smooth-scroll: false;
 
-// used in site title
 $enable-shadows: true;
 
 $link-decoration: none;

package/scss/topic.scss

@@ -1,9 +1,4 @@
 .page-topic {
-	[component="topic/reply"], [component="topic/reply/locked"], [component="topic/reply/guest"] {
-		font-size: 14px;
-		line-height: 20px;
-	}
-
 	.topic {
 		.posts-container {
 			max-width: 960px;

package/templates/account/profile.tpl

@@ -28,15 +28,15 @@
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[global:reputation]]</span>
-				<span class="human-readable-number fs-2 ff-secondary" title="{reputation}">{reputation}</span>
+				<span class="fs-2 ff-secondary" title="{reputation}">{humanReadableNumber(reputation)}</span>
 			</div>
 		</div>
 		{{{ end }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
 				<span class="stat-label text-xs fw-semibold">[[user:profile_views]]</span>
-				<span class="human-readable-number fs-2 ff-secondary" title="
-				{profileviews}">{profileviews}</span>
+				<span class="fs-2 ff-secondary" title="
+				{profileviews}">{humanReadableNumber(profileviews)}</span>
 			</div>
 		</div>
 

package/templates/category.tpl

@@ -6,11 +6,11 @@
 	</div>
 	<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="human-readable-number fw-bold">{totalTopicCount}</span>
+			<span title="{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="human-readable-number fw-bold">{totalPostCount}</span>
+			<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
 			<span class="text-lowercase fw-normal">[[global:posts]]</span>
 		</span>
 	</div>

package/templates/flags/detail.tpl

@@ -76,7 +76,7 @@
 			</div>
 		</form>
 
-		<div class="overflow-auto" component="flag/history">
+		<div class="overflow-auto" component="flag/history" style="max-height: 30rem;">
 			<h2 class="h6 fw-bold">[[flags:history]]</h2>
 			{{{ if !history.length }}}
 			<div class="alert alert-success text-center">[[flags:no-history]]</div>

package/templates/notifications.tpl

@@ -14,7 +14,7 @@
 				{{{ else }}}
 				<a class="btn-ghost fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
 					<div class="flex-grow-1">{filters.name}</div>
-					<span class="flex-shrink-0 text-xs human-readable-number" title="{./count}">{./count}</span>
+					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 				</a>
 				{{{ end }}}
 				{{{ end }}}

package/templates/partials/account/header.tpl

@@ -1,4 +1,4 @@
-<div class="account">
+<div class="account w-100 mx-auto">
 	<div data-widget-area="header">
 		{{{each widgets.header}}}
 		{{widgets.header.html}}
@@ -22,7 +22,7 @@
 	</div>
 
 	<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
-		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border-4 position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
+		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border border-white border-4 rounded-circle position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
 			{buildAvatar(@value, "142px", true)}
 			{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
 			<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">

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

@@ -11,50 +11,50 @@
 			{{{ 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 human-readable-number" title="{counts.posts}">{counts.posts}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.posts}">{humanReadableNumber(counts.posts)}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost fw-semibold
 			{{{ if template.account/topics }}}active{{{ end }}}
 			{{{ 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 human-readable-number" title="{counts.topics}">{counts.topics}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.topics}">{humanReadableNumber(counts.topics)}</span>
 		</a>
 		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost fw-semibold
 			{{{ if template.account/groups }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:header.groups]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.groups}">{counts.groups}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost fw-semibold
 			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:followers]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.followers}">{counts.followers}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.followers}">{humanReadableNumber(counts.followers)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost fw-semibold
 			{{{ if template.account/following }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:following]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.following}">{counts.following}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.following}">{humanReadableNumber(counts.following)}</span>
 		</a>
 
 		{{{ if canEdit }}}
 		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost fw-semibold
 			{{{ if template.account/categories }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched_categories]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost fw-semibold
 			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:blocked-users]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.blocks}">{counts.blocks}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.blocks}">{humanReadableNumber(counts.blocks)}</span>
 		</a>
 
 		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost fw-semibold
 			{{{ if template.account/uploads }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:uploads]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{counts.uploaded}">{counts.uploaded}</span>
+			<span class="flex-shrink-0 text-xs" title="{counts.uploaded}">{humanReadableNumber(counts.uploaded)}</span>
 		</a>
 		{{{ end }}}
 

package/templates/partials/categories/item.tpl

@@ -43,12 +43,12 @@
 		<div class="d-flex col-lg-5 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="human-readable-number fs-5 ff-secondary lh-1" title="{./totalTopicCount}" data-toFixed="0">{./totalTopicCount}</span>
+					<span class="fs-5 ff-secondary lh-1" title="{./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="human-readable-number fs-5 ff-secondary lh-1" title="{./totalPostCount}" data-toFixed="0">{./totalPostCount}</span>
+					<span class="fs-5 ff-secondary lh-1" title="{./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 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-ghost fw-semibold">
 			<div class="flex-grow-1">[[groups:members]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
+			<span class="flex-shrink-0 text-xs" title="{group.memberCount}">{humanReadableNumber(group.memberCount)}</span>
 		</button>
 
 		{{{ if group.isOwner }}}
 		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost fw-semibold">
 			<div class="flex-grow-1">[[groups:details.pending]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
+			<span class="flex-shrink-0 text-xs" title="{group.pending.length}">{humanReadableNumber(group.group.pending.length)}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost fw-semibold">
 			<div class="flex-grow-1">[[groups:details.invited]]</div>
-			<span class="flex-shrink-0 text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
+			<span class="flex-shrink-0 text-xs" title="{group.invited.length}">{humanReadableNumber(group.group.invited.length)}</span>
 		</button>
 
 		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost fw-semibold">

package/templates/partials/tags_list.tpl

@@ -1,6 +1,6 @@
 {{{each tags}}}
 <a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn-ghost flex-column gap-0 align-items-start justify-content-start text-truncate p-2 ff-base">
 	<div class="fw-semibold text-nowrap tag-item w-100 text-truncate">{./valueEscaped}</div>
-	<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {./score}]]</div>
+	<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {formattedNumber(./score)}]]</div>
 </a>
 {{{end}}}

package/templates/partials/topic/stats.tpl

@@ -1,15 +1,15 @@
 <span class="badge text-body border border-gray-300 stats text-xs">
 	<i class="fa fa-fw fa-pencil visible-xs-inline" title="[[global:posts]]"></i>
-	<span component="topic/post-count" title="{postcount}" class="human-readable-number fw-bold">{postcount}</span>
+	<span component="topic/post-count" title="{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="human-readable-number fw-bold">{postercount}</span>
+	<span title="{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="human-readable-number fw-bold" title="{viewcount}">{viewcount}</span>
+	<span class="fw-bold" title="{viewcount}">{humanReadableNumber(viewcount)}</span>
 	<span class="hidden-xs text-lowercase fw-normal">[[global:views]]</span>
 </span>

package/templates/partials/topics_list.tpl

@@ -78,18 +78,18 @@
 			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
 				{{{ if !reputation:disabled }}}
 				<div class="stats-votes card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./votes}" data-toFixed="0">{./votes}</span>
+					<span class="fs-5 ff-secondary lh-1" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
 					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
 					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
 				</div>
 				{{{ end }}}
 				<div class="stats-postcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./postcount}" data-toFixed="0">{./postcount}</span>
+					<span class="fs-5 ff-secondary lh-1" title="{./postcount}">{humanReadableNumber(./postcount, 0)}</span>
 					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
 					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-message"></i>
 				</div>
 				<div class="stats-viewcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="human-readable-number fs-5 ff-secondary lh-1" title="{./viewcount}" data-toFixed="0">{./viewcount}</span>
+					<span class="fs-5 ff-secondary lh-1" title="{./viewcount}">{humanReadableNumber(./viewcount, 0)}</span>
 					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
 					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
 				</div>

package/templates/partials/users/item.tpl

@@ -18,19 +18,19 @@
 
 		{{{ if section_sort-reputation }}}
 		<div class="text-xs text-muted text-truncate">
-			<span class="formatted-number">{./reputation}</span>
+			<span>{formattedNumber(./reputation)}</span>
 		</div>
 		{{{ end }}}
 
 		{{{ if section_sort-posts }}}
 		<div class="text-xs text-muted text-truncate">
-			<span class="formatted-number">{./postcount}</span>
+			<span>{formattedNumber(./postcount)}</span>
 		</div>
 		{{{ end }}}
 
 		{{{ if section_flagged }}}
 		<div class="text-xs text-muted text-truncate">
-			<span class="formatted-number">{./flags}</span>
+			<span>{formattedNumber(./flags)}</span>
 		</div>
 		{{{ end }}}
 	</div>

package/templates/post-queue.tpl

@@ -91,11 +91,11 @@
 						</div>
 						<div>
 							<span class="badge text-body border border-gray-300 stats text-xs">
-								<span title="{posts.user.postcount}" class="human-readable-number fw-bold">{posts.user.postcount}</span>
+								<span title="{posts.user.postcount}" class="fw-bold">{humanReadableNumber(posts.user.postcount)}</span>
 								<span class="text-lowercase fw-normal">[[global:posts]]</span>
 							</span>
 							<span class="badge text-body border border-gray-300 stats text-xs">
-								<span title="{posts.user.reputation}" class="human-readable-number fw-bold">{posts.user.reputation}</span>
+								<span title="{posts.user.reputation}" class="fw-bold">{humanReadableNumber(posts.user.reputation)}</span>
 								<span class="text-lowercase fw-normal">[[global:reputation]]</span>
 							</span>
 							<span class="badge text-body border border-gray-300 stats text-xs">

package/scss/flags.scss

@@ -1,5 +0,0 @@
-.page-flags {
-	[component="flag/history"] {
-		max-height: 30rem;
-	}
-}