nodebb-theme-harmony 2.0.0-pre.9 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.9",
+  "version": "2.0.0",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },
@@ -41,7 +41,7 @@
     "@fontsource/poppins": "5.0.8"
   },
   "devDependencies": {
-    "eslint": "^8.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-nodebb": "^0.2.0",
     "eslint-plugin-import": "^2.24.2"
   }

package/plugin.json

@@ -8,8 +8,7 @@
 		{ "hook": "filter:settings.get", "method": "getAdminSettings"},
 		{ "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
 		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
-		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
-		{ "hook": "filter:teasers.configureStripTags", "method": "filterTeasersConfigureStripTags"}
+		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" }
 	],
 	"scripts": [
 		"public/harmony.js"

package/public/harmony.js

@@ -72,7 +72,7 @@ $(document).ready(function () {
 				return !!$('[component="bottombar"] [component="sidebar/search"] .search-dropdown.show').length;
 			}
 
-			let lastScrollTop = 0;
+			let lastScrollTop = $window.scrollTop();
 			let newPostsLoaded = false;
 
 			function onWindowScroll() {
@@ -86,7 +86,7 @@ $(document).ready(function () {
 					const diff = Math.abs(st - lastScrollTop);
 					const scrolledDown = st > lastScrollTop;
 					const scrolledUp = st < lastScrollTop;
-					if (diff > 5) {
+					if (diff > 10) {
 						bottomBar.css({
 							bottom: !scrolledUp && scrolledDown ?
 								-bottomBar.find('.bottombar-nav').outerHeight(true) :
@@ -115,8 +115,10 @@ $(document).ready(function () {
 			});
 			hooks.on('action:ajaxify.end', function () {
 				$window.off('scroll', delayedScroll);
-				bottomBar.css({ bottom: 0 });
-				setTimeout(enableAutohide, 250);
+				if (config.theme.autohideBottombar) {
+					bottomBar.css({ bottom: 0 });
+					setTimeout(enableAutohide, 250);
+				}
 			});
 		});
 	}
@@ -252,20 +254,18 @@ $(document).ready(function () {
 			return;
 		}
 		['notifications', 'chat'].forEach((type) => {
-			const countEl = document.querySelector(`[component="${type}/count"]`);
-			if (!countEl) {
+			const countEl = $(`nav.sidebar [component="${type}/count"]`).first();
+			if (!countEl.length) {
 				return;
 			}
-			const count = parseInt(countEl.innerText, 10);
+			const count = parseInt(countEl.text(), 10);
 			if (count > 1) {
-				const listEls = document.querySelectorAll(`[component="${type}/list"]`);
-				listEls.forEach((listEl) => {
-					const placeholder = listEl.querySelector('*');
-					if (placeholder) {
-						for (let x = 0; x < count - 1; x++) {
-							const cloneEl = placeholder.cloneNode(true);
-							listEl.insertBefore(cloneEl, placeholder);
-						}
+				const listEls = $(`.dropdown-menu [component="${type}/list"]`);
+				listEls.each((index, el) => {
+					const placeholder = $(el).children().first();
+					for (let x = 0; x < count - 1; x++) {
+						const cloneEl = placeholder.clone(true);
+						cloneEl.insertAfter(placeholder);
 					}
 				});
 			}

package/scss/common.scss

@@ -90,13 +90,6 @@ body:not(.page-user) {
 	background-color: initial;
 }
 
-.btn-link {
-	&:hover, &.active {
-		background-color: var(--btn-ghost-hover-color);
-		text-decoration: none;
-	}
-}
-
 .flex-basis-md-200 {
 	@include media-breakpoint-up(md) {
 		flex-basis: 200px!important;
@@ -124,6 +117,7 @@ body:not(.page-user) {
 [component="chat/message/body"],
 [component="post/content"],
 [component="topic/teaser"] .post-content,
-[component="category/posts"] .post-content {
+[component="category/posts"] .post-content,
+.post-queue.posts-list .post-content {
 	a { text-decoration: underline;}
 }

package/scss/harmony.scss

@@ -15,7 +15,6 @@
 @import "modules/breadcrumbs";
 @import "modules/tags";
 @import "modules/user-menu";
-@import "modules/bottom-sheet";
 @import "modules/topic-navigator";
 @import "modules/topics-list";
 @import "modules/cover";

package/scss/header.scss

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

package/scss/mixins.scss

@@ -5,18 +5,25 @@
 		line-height: calc(var(--avatar-size) - 4px);
 	}
 
-	[component="user/status"] {
-		top: 20px;
-		left: 12px;
+	[component="user/locality"] {
+		transform: translate(-75%, -100%);
+		z-index: 2;
+		background-color: $body-bg;
+		font-size: .5rem;
+	}
 
+	[component="user/status"] {
+		transform: translate(-80%, -100%);
 		z-index: 2;
 	}
 
 	@include media-breakpoint-up(sm) {
 		[component="user/status"] {
 			padding: 5px;
-			top: 36px;
-			left: 36px;
+		}
+
+		[component="user/locality"] {
+			font-size: .75rem;
 		}
 	}
 }

package/scss/modules/cover.scss

@@ -10,10 +10,8 @@
 	left: auto;
 	right: 0px;
 
-	&:hover {
-		.controls {
-			opacity: 1;
-		}
+	&:hover .controls, .controls:focus-within {
+		opacity: 1;
 	}
 
 	.controls {

package/scss/modules/topics-list.scss

@@ -1,7 +1,7 @@
 ul.topics-list, ul.categories-list {
 	li {
 		&.deleted {
-			.meta, .topic-thumbs { display: none!important; }
+			.meta, .topic-thumbs { visibility: hidden!important; }
 			opacity: 0.65;
 		}
 

package/scss/overrides.scss

@@ -35,6 +35,10 @@ $text-muted: 		$gray-600 !default;
 $border-color: 		$gray-200 !default;
 $link-color: 		#0951be !default;
 
+$form-check-input-border: var(--bs-border-width) solid $gray-500 !default;
+
+$input-placeholder-color: $gray-600!important;
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/sidebar.scss

@@ -138,6 +138,9 @@
 }
 
 .bottombar-nav {
+	#user_dropdown .avatar {
+		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
+	}
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;
@@ -154,36 +157,32 @@
 		line-height: 12px;
 	}
 
+	.dropdown-menu {
+		left: 0!important;
+		right: 0!important;
+		box-shadow: none!important;
+		border-left: 0;
+		border-right: 0;
+		border-radius: 0;
+		.list-container {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
+	}
+
 	.navigation-dropdown, .user-dropdown {
 		> li {
 			> a, .dropdown-item {
 				padding: 10px 20px!important;
 			}
 		}
-		left: 0!important;
-		right: 0!important;
-		bottom: $spacer*0.5!important;
-		box-shadow: none!important;
+
 		max-height: 60vh!important;
 		overflow: auto!important;
 	}
+
 	.search-dropdown .quick-search-results {
 		max-height: 225px!important;
 		overflow-y: auto!important;
 	}
-	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
-		left: 0 !important;
-		right: 0 !important;
-		box-shadow: none!important;
-
-		border-left: 0;
-		border-right: 0;
-		border-bottom: 0;
-		border-radius: 0;
-
-		.list-container {
-			max-height: 60vh!important;
-			overflow-y: auto!important;
-		}
-	}
 }

package/scss/skins.scss

@@ -3,6 +3,15 @@
 	[component="post"] .icon {
 		background-color: transparent !important;
 	}
+	.form-control::placeholder {
+		color:$gray-100!important;
+	}
+}
+
+.skin-solar {
+	.form-control::placeholder {
+		color:$gray-100!important;
+	}
 }
 
 .skin-quartz, .skin-lux, .skin-morph {

package/scss/topic.scss

@@ -9,11 +9,6 @@ body.template-topic {
 		}
 
 		.posts {
-			// fixes code blocks pushing content out on mobile
-			@include media-breakpoint-down(md) {
-				max-width: calc(100vw - $grid-gutter-width);
-			}
-
 			&.timeline {
 				@include timeline-style;
 			}
@@ -27,10 +22,6 @@ body.template-topic {
 				}
 			}
 
-			> [component="post"] > [component="post/footer"] {
-				margin-left: calc($spacer * 2.5);
-			}
-
 			[component="post"] {
 				&.selected .post-container {
 					background-color: mix($body-bg, $body-color, 90%);
@@ -101,6 +92,7 @@ body.template-topic {
 			&:last-of-type {
 				padding-bottom: 0;
 				.post-footer {
+					padding-bottom: 0!important;
 					border-bottom: none !important;
 				}
 			}
@@ -108,12 +100,12 @@ body.template-topic {
 	}
 
 
-	[component="topic/thumb/list"] {
+	[component="topic/thumb/list"] > a{
 		height: calc($font-size-base * 4);
 	}
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(lg) {
 	body.template-topic {
 		.topic .posts {
 			[component="post"] {
@@ -129,7 +121,7 @@ body.template-topic {
 					opacity: 1;
 				}
 				&:hover {
-					> .post-footer > [component="post/actions"] {
+					> div > .post-container > [component="post/footer"] > div > [component="post/actions"] {
 						opacity: 1;
 					}
 				}

package/templates/account/blocks.tpl

@@ -7,14 +7,21 @@
 				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter-username]]" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false"/>
 
 				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;" role="menu">
-					<li><a href="#" class="dropdown-item" role="menuitem">[[admin/menu:search.start-typing]]</a></li>
+					<li component="blocks/start-typing">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[admin/menu:search.start-typing]]</a>
+					</li>
+					<li component="blocks/no-users" class="hidden">
+						<a href="#" class="dropdown-item rounded-1" role="menuitem">[[users:no-users-found]]</a>
+					</li>
 					{{{ each edit }}}
-					<li>
-						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between" role="menuitem">
+					<li component="blocks/search/match">
+						<div class="dropdown-item rounded-1 d-flex flex-nowrap gap-4 justify-content-between align-items-center" role="menuitem">
 							<div class="text-truncate">
 								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
 							</div>
-							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block-toggle]]</button>
+
+							<button class="btn btn-sm btn-outline-danger text-nowrap {{{ if ./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="block">[[user:block-user]]</button>
+							<button class="btn btn-sm btn-outline-primary text-nowrap {{{ if !./isBlocked }}}hidden{{{ end }}}" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
 						</div>
 					</li>
 					{{{ end }}}
@@ -28,12 +35,16 @@
 	</div>
 </div>
 <div class="users">
-	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+	<div class="alert alert-warning text-center m-0"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
+
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-3">
 		{{{ each users }}}
-		<!-- IMPORT partials/users/item.tpl -->
+		<div class="d-flex flex-column gap-1">
+			<!-- IMPORT partials/users/item.tpl -->
+			<button class="btn btn-sm btn-outline-primary text-nowrap mx-auto" data-uid="{./uid}" data-action="unblock">[[user:unblock-user]]</button>
+		</div>
 		{{{ end }}}
 	</div>
-	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has-no-blocks]]</div>
 	<!-- IMPORT partials/paginator.tpl -->
 </div>
 

package/templates/account/categories.tpl

@@ -7,7 +7,7 @@
 
 	<div class="d-flex gap-1">
 		<div class="btn-group bottom-sheet" component="category/watch/all">
-			<button class="btn-ghost-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
+			<button class="btn btn-ghost btn-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
 				<span>[[user:change-all]]</span>
 			</button>
 			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end" role="menu">

package/templates/account/consent.tpl

@@ -9,9 +9,9 @@
 <div class="row">
 	<div class="col-sm-6">
 		{{{ if gdpr_consent }}}
-		<div class="alert alert-success">
-			<i class="fa fa-check float-end fa-3x"></i>
+		<div class="alert alert-success d-flex gap-3">
 			[[user:consent.received]]
+			<i class="fa fa-check fa-3x"></i>
 		</div>
 		{{{ else }}}
 		<div class="alert alert-warning">

package/templates/account/edit/password.tpl

@@ -7,22 +7,22 @@
 			<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
 			{{{ if isSelf }}}
-			<div class="mb-2">
-				<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current-password]]</label>
+			<div class="mb-3">
+				<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current-password]]</label>
 				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current-password]]" value="" {{{ if !hasPassword }}} disabled{{{ end }}}>
 			</div>
 			{{{ end }}}
 
-			<div class="mb-2">
-				<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new-password]]</label>
+			<div class="mb-3">
+				<label class="form-label fw-semibold text-sm" for="inputNewPassword">[[user:new-password]]</label>
 				<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-				<span class="form-feedback" id="password-notify"></span>
+				<span class="form-text" id="password-notify"></span>
 			</div>
 
-			<div class="mb-2">
-				<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm-password]]</label>
+			<div class="mb-3">
+				<label class="form-label fw-semibold text-sm" for="inputNewPasswordAgain">[[user:confirm-password]]</label>
 				<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm-password]]" value="">
-				<span class="form-feedback" id="password-confirm-notify"></span>
+				<span class="form-text" id="password-confirm-notify"></span>
 			</div>
 
 			<div class="form-actions">

package/templates/account/edit/username.tpl

@@ -4,7 +4,7 @@
 <div class="row">
 	<div class="col-12 col-lg-4">
 		<form class="edit-form">
-			<div class="mb-2">
+			<div class="mb-3">
 				<label class="form-label fw-semibold text-sm" for="inputNewUsername">[[user:username]]</label>
 				<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
 			</div>
@@ -12,7 +12,7 @@
 			<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
 			{{{ if isSelf }}}
-			<div class="mb-2">
+			<div class="mb-3">
 				<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current-password]]</label>
 				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current-password]]" value=""{{{ if !hasPassword }}} disabled{{{ end }}}>
 			</div>
@@ -20,7 +20,6 @@
 
 			<input type="hidden" name="uid" id="inputUID" value="{uid}" />
 
-			<br/>
 			<div class="form-actions">
 				<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change-username]]</button>
 			</div>

package/templates/account/edit.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<div class="d-flex justify-content-between py-1 mb-3 align-items-center position-sticky top-0 bg-body">
+<div class="d-flex justify-content-between py-1 mb-3 align-items-center position-sticky top-0 bg-body z-1">
 	<h3 class="fw-semibold fs-5 mb-0">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
 	<button id="submitBtn" class="btn btn-sm btn-primary">[[global:save-changes]]</button>
 </div>
@@ -12,23 +12,37 @@
 				<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
 			</div>
 
-			{{{ if allowWebsite }}}
 			<div class="mb-3">
-				<label class="form-label fw-bold" for="website">[[user:website]]</label>
-				<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
+				<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
+				<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
 			</div>
-			{{{ end }}}
 
+			{{{ each customUserFields }}}
 			<div class="mb-3">
-				<label class="form-label fw-bold" for="location">[[user:location]]</label>
-				<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
-			</div>
+				<label class="form-label fw-bold" for="{./key}">{./name}</label>
+				{{{ if ((./type == "input-text") || (./type == "input-link")) }}}
+				<input class="form-control" type="text" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
 
-			<div class="mb-3">
-				<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
-				<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
+				{{{ if (./type == "input-number") }}}
+				<input class="form-control" type="number" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
+
+				{{{ if (./type == "input-date") }}}
+				<input class="form-control" type="date" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
+
+				{{{ if ((./type == "select") || (./type == "select-multi")) }}}
+				<select class="form-select" id="{./key}" name="{./key}" {{{ if (./type == "select-multi") }}} multiple{{{ end }}}>
+					{{{ each ./select-options}}}
+					<option value="{./value}" {{{ if ./selected }}}selected{{{ end }}}>{./value}</option>
+					{{{ end }}}
+				</select>
+				{{{ end }}}
 			</div>
+			{{{ end }}}
 
+			{{{ if groups.length }}}
 			<div class="mb-3">
 				<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
@@ -37,17 +51,18 @@
 					<div component="group/badge/item" class="d-flex gap-2 justify-content-between align-items-center" data-value="{./displayName}" data-selected="{./selected}">
 						<!-- IMPORT partials/groups/badge.tpl -->
 						<div class="d-flex gap-1">
-							<button component="group/toggle/hide" type="button" class="btn-ghost-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
-							<button component="group/toggle/show" type="button" class="btn-ghost-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
+							<button component="group/toggle/hide" type="button" class="btn btn-ghost btn-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
+							<button component="group/toggle/show" type="button" class="btn btn-ghost btn-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
 							{{{ if allowMultipleBadges }}}
-							<button component="group/order/up" type="button" class="btn-ghost-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
-							<button component="group/order/down" type="button" class="btn-ghost-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
+							<button component="group/order/up" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
+							<button component="group/order/down" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
 							{{{ end }}}
 						</div>
 					</div>
 					{{{ end }}}
 				</div>
 			</div>
+			{{{ end }}}
 
 			{{{ if allowAboutMe }}}
 			<div class="mb-3">