nodebb-theme-harmony 1.0.0-beta.27 → 1.0.0-beta.29

package/languages/en-GB/harmony.json

@@ -1,6 +1,7 @@
 {
 	"skins": "Skins",
 	"collapse": "Collapse",
+	"toggle-sidebars": "Toggle sidebars",
 	"login-register-to-search": "Login or register to search.",
 	"settings.title": "Theme settings",
 	"settings.enableQuickReply": "Enable quick reply",

package/package.json

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

package/public/harmony.js

@@ -6,6 +6,7 @@ $(document).ready(function () {
 	setupSearch();
 	setupDrafts();
 	handleMobileNavigator();
+	setupNavTooltips();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -142,4 +143,25 @@ $(document).ready(function () {
 			});
 		});
 	}
+
+	function setupNavTooltips() {
+		// remove title from user icon in sidebar to prevent double tooltip
+		$('.sidebar [component="header/avatar"] .avatar').removeAttr('title');
+		const tooltipEls = $('.sidebar [title]');
+		tooltipEls.tooltip({
+			trigger: 'manual',
+			animation: false,
+		});
+
+		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) {
+				$(this).tooltip('show');
+			}
+		});
+		tooltipEls.on('click mouseleave', function () {
+			$(this).tooltip('hide');
+		});
+	}
 });

package/scss/harmony.scss

@@ -21,5 +21,6 @@
 @import "modules/topics-list";
 @import "modules/cover";
 @import "modules/nprogress";
+@import "modules/paginator";
 
 @import "skins";

package/scss/modules/paginator.scss

@@ -0,0 +1,24 @@
+.skin-noskin [component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $body-color;
+		background-color: $gray-300;
+		border-color: $gray-300;
+	}
+
+	.page-item:not(.disabled):hover .page-link {
+		color: $body-color;
+	}
+}
+
+[component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $pagination-active-color;
+	}
+	.page-item:not(.disabled):hover .page-link {
+		color: $pagination-hover-color;
+		background-color: $pagination-hover-bg;
+	}
+	.page-item:not(.disabled) .page-link {
+		color: $body-color;
+	}
+}

package/templates/category.tpl

@@ -1,13 +1,4 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ end }}}
-
 <div class="d-flex flex-column gap-2">
 	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
@@ -25,6 +16,15 @@
 	</div>
 </div>
 
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
+
 <div class="row mt-3">
 	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		<!-- IMPORT partials/category/subcategory.tpl -->

package/templates/groups/members.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="users">
 	<!-- IMPORT partials/users_list.tpl -->

package/templates/partials/category/tags.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ each tags }}}
 <a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
 {{{ end }}}

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="cookie-consent">
-    <button class="float-end btn btn-primary">{dismiss}</button>
-    {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
+<div class="d-flex justify-content-center position-fixed start-0 bottom-0 w-100 mb-5 mb-md-0">
+    <div class="cookie-consent text-bg-info w-50 p-3 rounded d-flex gap-2 mb-5 mb-md-3 justify-content-between align-items-center">
+        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
+        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+    </div>
 </div>

package/templates/partials/paginator.tpl

@@ -1,45 +1,45 @@
 <div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
 	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
 		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
 			{{{ if pagination.pages.separator }}}
 			<li component="pagination/select-page" class="page-item page select-page">
-				<a class="page-link rounded fw-secondary text-reset px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
+				<a class="page-link rounded fw-secondary px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
 			{{{ else }}}
 			<li class="page-item page{{{ if pagination.pages.active }}} active{{{ end }}}" >
-				<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+				<a class="page-link rounded fw-secondary px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
 			{{{ end }}}
 		{{{end}}}
 
 		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
 	<ul class="pagination pagination-sm hidden-md hidden-lg justify-content-center">
 		<li class="page-item first{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
 		<li class="page-item previous{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		<li component="pagination/select-page" class="page-item page select-page">
-			<a class="page-link fw-secondary text-reset" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+			<a class="page-link fw-secondary  href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
 		<li class="page-item next{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link fw-secondary  href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
 		<li class="page-item last{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
 </div>

package/templates/partials/sidebar/chats.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.chats]]" component="chat/dropdown">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" component="chat/dropdown">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="chat/icon" class="fa fa-fw {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} unread-count" data-content="{unreadCount.chat}"></i>

package/templates/partials/sidebar/drafts.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.drafts]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="drafts/icon" class="fa fa-fw fa-pen-to-square unread-count"></i>

package/templates/partials/sidebar/logged-in-menu.tpl

@@ -1,23 +1,23 @@
-<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="[[global:header.profile]]">
+<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="{user.username}">
 	<!-- IMPORT partials/sidebar/user-menu.tpl -->
 </li>
 
 {{{ if config.searchEnabled }}}
-<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative">
+<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative" title="[[global:header.search]]">
 <!-- IMPORT partials/sidebar/search.tpl -->
 </li>
 {{{ end }}}
 
-<li component="notifications" class="nav-item mx-2 notifications dropstart">
+<li component="notifications" class="nav-item mx-2 notifications dropstart" title="[[global:header.notifications]]">
 <!-- IMPORT partials/sidebar/notifications.tpl -->
 </li>
 
 {{{ if canChat }}}
-<li class="nav-item mx-2 chats dropstart">
+<li class="nav-item mx-2 chats dropstart" title="[[global:header.chats]]">
 <!-- IMPORT partials/sidebar/chats.tpl -->
 </li>
 {{{ end }}}
 
-<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart">
+<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart" title="[[global:header.drafts]]">
 <!-- IMPORT partials/sidebar/drafts.tpl -->
 </li>

package/templates/partials/sidebar/notifications.tpl

@@ -1,4 +1,4 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.notifications]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>

package/templates/partials/sidebar/search.tpl

@@ -1,4 +1,4 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>

package/templates/partials/sidebar-left.tpl

@@ -33,7 +33,7 @@
 		{{{ end }}}
 
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
-			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap" title="[[harmony:toggle-sidebars]]">
 				<i class="fa fa-fw fa-angles-right"></i>
 				<i class="fa fa-fw fa-angles-left"></i>
 				<span class="nav-text visible-open fw-semibold small lh-1">[[harmony:collapse]]</span>

package/templates/partials/skin-switcher.tpl

@@ -1,5 +1,5 @@
-<div class="dropend m-2" component="skinSwitcher">
-	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative" title="[[harmony:skins]]">
+<div class="dropend m-2" component="skinSwitcher" title="[[harmony:skins]]">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative">
 		<span class="justify-content-between w-100">
 			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 				<span>

package/templates/partials/topic/browsing-users.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- This partial intentionally left blank; overwritten by nodebb-plugin-browsing-users -->

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

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <small data-editor="{editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {editor.username}]] <span class="timeago" title="{editedISO}"></span></small>

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

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IF posts.display_moderator_tools -->
 <li>
 	<a class="dropdown-item" component="post/edit" role="menuitem" tabindex="-1" href="#">

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

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ if privileges.editable }}}
 <li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="dropdown-item <!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
 <li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="dropdown-item <!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>

package/templates/modules/usercard.tpl

@@ -1,39 +0,0 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="persona-usercard">
-	<a href="{config.relative_path}/user/{userslug}">
-		<!-- IF picture -->
-		<div class="usercard-picture" style="background-image:url({picture})"></div>
-		<!-- ELSE -->
-		<div class="usercard-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
-		<!-- ENDIF picture -->
-	</a>
-	<div class="usercard-body">
-		<a href="{config.relative_path}/user/{userslug}">
-			<span class="usercard-name"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></span><br />
-			<span class="usercard-username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></span>
-			<!-- IF !banned -->
-			<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
-			<!-- ENDIF !banned -->
-		</a>
-
-		<div class="row usercard-info">
-			<div class="col-4">
-				<small>[[global:posts]]</small>
-				<span class="human-readable-number">{postcount}</span>
-			</div>
-			<div class="col-4">
-				<small>[[global:reputation]]</small>
-				<span class="human-readable-number">{reputation}</span>
-			</div>
-
-			<button class="btn-morph persona-fab <!-- IF banned --> hide<!-- ENDIF banned -->">
-				<span>
-					<span class="s1"></span>
-					<span class="s2"></span>
-					<span class="s3"></span>
-				</span>
-			</button>
-		</div>
-	</div>
-</div>

package/templates/partials/acceptTos.tpl

@@ -1,11 +0,0 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="form-group">
-	<label for="agree-terms">[[register:terms_of_use]]</label>
-	<div class="tos">{termsOfUse}</div>
-	<div class="checkbox">
-		<label>
-			<input type="checkbox" name="agree-terms" id="agree-terms"> [[register:agree_to_terms_of_use]]
-		</label>
-	</div>
-</div>

package/templates/partials/slideout-menu.tpl

@@ -1,6 +0,0 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<section class="menu-section" data-section="navigation">
-	<ul class="menu-section-list text-bg-dark"></ul>
-</section>
-