nodebb-theme-persona 14.0.1 → 14.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "nbbpm": {
     "compatibility": "^4.0.0"
   },

package/public/modules/mobile-menu.js

@@ -129,7 +129,7 @@ define('persona/mobile-menu', [
 		function loadNotificationsAndChats() {
 			require(['notifications', 'chat'], function (notifications, chat) {
 				const notifList = $('#chats-menu [data-section="notifications"] ul');
-				notifications.loadNotifications(notifList, function () {
+				notifications.loadNotifications(null, notifList, function () {
 					notifList.find('.deco-none').removeClass('deco-none');
 					chat.loadChatsDropdown($('#chats-menu .chat-list'));
 				});

package/scss/account.scss

@@ -55,6 +55,7 @@
 				font-size: 23px;
 				top: 17px;
 				right: -3px;
+				padding: 10px;
 			}
 
 			.chat, .follow {

package/scss/modules/topics-list.scss

@@ -18,7 +18,7 @@ ul.topics-list, ul.categories-list {
 
 		// all other skins use link-color for unread titles
 		&.unread .title a {
-			color: $link-color;
+			color: $link-color!important;
 			font-weight: bold;
 		}
 
@@ -35,7 +35,7 @@ ul.topics-list, ul.categories-list {
 .skin-noskin {
 	ul.topics-list, ul.categories-list {
 		li.unread .title {
-			color: $primary;
+			color: $primary!important;
 		}
 	}
 }

package/scss/overrides.scss

@@ -1,5 +1,7 @@
 // only overrides to bs5 variables here
 
+$navbar-nav-link-padding-x: 0.875rem!default;
+
 // persona colors
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;

package/scss/style.scss

@@ -40,27 +40,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	}
 }
 
-.status {
-	font-size: 10px;
-	vertical-align: middle;
-
-	&.online {
-		color: $success;
-	}
-
-	&.away {
-		color: $warning;
-	}
-
-	&.dnd {
-		color: $danger;
-	}
-
-	&.offline {
-		color: $gray-600;
-	}
-}
-
 
 .topic .topic-item, .category .category-item {
 	-webkit-transition: background-color 500ms linear;

package/scss/topic.scss

@@ -14,6 +14,9 @@
 
 
 			> a > .status {
+				display: inline-block;
+				width: 4px;
+				height: 4px;
 				position: absolute;
 				right: 12px;
 				font-size: 12px;
@@ -21,6 +24,8 @@
 				z-index: 1;
 
 				@include media-breakpoint-up(md) {
+					width: 15px;
+					height: 15px;
 					top: 2px;
 					font-size: 16px;
 				}

package/templates/partials/account/header.tpl

@@ -14,7 +14,7 @@
 			<!-- ELSE -->
 			<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;" title="{username}">{icon:text}</div>
 			<!-- ENDIF picture -->
-			<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+			<span component="user/status" class="position-absolute border border-white border-2 rounded-circle status {status}"><span class="visually-hidden">[[global:{status}]]</span></span>
 
 			<!-- IF loggedIn -->
 			<!-- IF !isSelf -->

package/templates/partials/categories/link.tpl

@@ -1,11 +1,11 @@
-<!-- IF ../isSection -->
-{../name}
-<!-- ELSE -->
-<!-- IF ../link -->
-<a href="{../link}" itemprop="url">
-<!-- ELSE -->
-<a href="{config.relative_path}/category/{../slug}" itemprop="url">
-<!-- ENDIF ../link -->
-{../name}
-</a>
+<!-- IF ../isSection -->
+{../name}
+<!-- ELSE -->
+<!-- IF ../link -->
+<a href="{../link}" itemprop="url">
+<!-- ELSE -->
+<a href="{config.relative_path}/category/{../slug}" itemprop="url">
+<!-- ENDIF ../link -->
+{../name}
+</a>
 <!-- ENDIF ../isSection -->

package/templates/partials/chats-menu.tpl

@@ -11,7 +11,6 @@
 	<li class="nav-item">
 		<a class="nav-link active text-decoration-none" href="#" data-bs-target="#profile" data-bs-toggle="tab">
 			{buildAvatar(user, "24px", true, "user-icon")}
-			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
 		</a>
 	</li>
 </ul>

package/templates/partials/header/notifications.tpl

@@ -1,7 +1,5 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex gap-2 justify-content-between align-items-center position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]">
-	<span class="d-flex gap-2 align-items-center">
-		<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>
-	</span>
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link position-relative" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]">
+	<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>
 </a>
 
 <ul class="notifications-dropdown dropdown-menu dropdown-menu-end p-1 shadow" role="menu">

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

@@ -1,10 +1,10 @@
-<li id="user_label" class="nav-item dropdown" title="[[global:header.profile]]">
+<li id="user_label" class="nav-item dropdown px-3" title="[[global:header.profile]]">
 	<a href="#" for="user-control-list-check" data-bs-toggle="dropdown" id="user_dropdown" role="button" component="header/avatar" aria-haspopup="true" aria-expanded="false">
 		{buildAvatar(user, "32px", true)}
 		<span id="user-header-name" class="d-block d-sm-none">{user.username}</span>
 	</a>
 	<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
-	<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" role="menu">
+	<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu dropdown-menu-end shadow p-1 text-sm ff-base" role="menu">
 		<li>
 			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}" role="menuitem" aria-label="[[user:profile]]">
 				<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>

package/templates/partials/menu.tpl

@@ -44,7 +44,7 @@
 			</div>
 
 			<div id="nav-dropdown" class="collapse navbar-collapse d-none d-lg-block">
-				<ul id="main-nav" class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
+				<ul id="main-nav" class="navbar-nav me-auto mb-2 mb-lg-0">
 					{{{each navigation}}}
 					<!-- IF function.displayMenuItem, @index -->
 					<li class="nav-item {navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}" title="{navigation.title}">
@@ -77,14 +77,14 @@
 					</li>
 				</ul>
 				{{{ if (config.searchEnabled && user.privileges.search:content) }}}
-				<div class="navbar-nav mb-2 me-2 mb-lg-0 position-relative">
+				<div class="navbar-nav mb-2 mb-lg-0 position-relative">
 					<!-- IMPORT partials/header/search.tpl -->
 				</div>
 				{{{ end }}}
 
 				{{{ if !maintenanceHeader }}}
 				{{{ if config.loggedIn }}}
-				<ul id="logged-in-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center gap-2">
+				<ul id="logged-in-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center">
 					<li class="nav-item notifications dropdown d-none d-sm-block" component="notifications" title="[[global:header.notifications]]">
 						<!-- IMPORT partials/header/notifications.tpl -->
 					</li>
@@ -98,7 +98,7 @@
 					<!-- IMPORT partials/header/user-menu.tpl -->
 				</ul>
 				{{{ else }}}
-				<ul id="logged-out-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center gap-2">
+				<ul id="logged-out-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center">
 					{{{ if allowRegistration }}}
 					<li class="nav-item">
 						<a class="nav-link" href="{relative_path}/register">

package/templates/partials/users/item.tpl

@@ -3,10 +3,7 @@
 
 	<div class="user-info">
 		<div class="text-nowrap text-truncate">
-			<span>
-				<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
-				<a  href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
-			</span>
+			<a href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
 		</div>
 		<!-- IF section_online -->
 		<div class="lastonline">

package/theme.json

@@ -1,7 +1,7 @@
-{
-    "id": "nodebb-theme-persona",
-    "name": "Persona",
-    "description": "The default theme for NodeBB. Uses a standard approach to forum design.",
-    "url": "https://github.com/psychobunny/nodebb-theme-persona",
-    "screenshot": "screenshot.png"
+{
+    "id": "nodebb-theme-persona",
+    "name": "Persona",
+    "description": "The default theme for NodeBB. Uses a standard approach to forum design.",
+    "url": "https://github.com/psychobunny/nodebb-theme-persona",
+    "screenshot": "screenshot.png"
 }