nodebb-theme-persona 14.0.15 → 14.0.17

package/package.json

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

package/public/modules/mobile-menu.js

@@ -19,7 +19,7 @@ define('persona/mobile-menu', [
 		if (!menuEl || !chatsMenuEl) {
 			return;
 		}
-		const chatMenuVisible = app.user && parseInt(app.user.uid, 10);
+		const chatMenuVisible = app.user && app.user.userslug;
 		let swapped = !!Storage.getItem('persona:menus:legacy-layout');
 		const margin = window.innerWidth;
 
@@ -118,7 +118,7 @@ define('persona/mobile-menu', [
 		$('#user-control-list').children().clone(true, true).appendTo($('#chats-menu [data-section="profile"] ul'));
 
 		socket.on('event:user_status_change', function (data) {
-			if (parseInt(data.uid, 10) === app.user.uid) {
+			if (String(data.uid) === String(app.user.uid)) {
 				app.updateUserStatus($('#chats-menu [component="user/status"]'), data.status);
 				navSlideout.close();
 			}

package/public/persona.js

@@ -166,35 +166,30 @@ $(document).ready(function () {
 	function generateUserCard(ev) {
 		var avatar = $(this);
 		var uid = avatar.parents('[data-uid]').attr('data-uid');
-		var data = (ajaxify.data.topics || ajaxify.data.posts);
-
-		for (var i = 0, ii = data.length; i < ii; i++) {
-			if (parseInt(data[i].uid, 10) === parseInt(uid, 10)) {
-				data = data[i].user;
-				break;
-			}
-		}
+		const topicOrPost = (ajaxify.data.topics || ajaxify.data.posts || []).find(d => String(d.uid) === String(uid));
+		if (!topicOrPost) return;
+		const user = topicOrPost.user;
 
 		$('.persona-usercard').remove();
 
-		if (parseInt(data.uid, 10) === 0) {
+		if (!user.userslug) {
 			return false;
 		}
 
-		socket.emit('user.isFollowing', { uid: data.uid }, function (err, isFollowing) {
+		socket.emit('user.isFollowing', { uid: user.uid }, function (err, isFollowing) {
 			if (err) {
 				return err;
 			}
 
-			app.parseAndTranslate('modules/usercard', data, function (html) {
+			app.parseAndTranslate('modules/usercard', user, function (html) {
 				var card = $(html);
 				avatar.parents('a').after(card.hide());
 
-				if (parseInt(app.user.uid, 10) === parseInt(data.uid, 10) || !app.user.uid) {
+				if (String(app.user.uid) === String(user.uid) || !app.user.uid) {
 					card.find('.btn-morph').hide();
 				} else {
-					const uid = isFinite(data.uid) ? data.uid : encodeURIComponent(data.userslug);
-					setupFavouriteMorph(card, uid, data.username);
+					const uid = isFinite(user.uid) ? user.uid : encodeURIComponent(user.userslug);
+					setupFavouriteMorph(card, uid, user.username);
 
 					if (isFollowing) {
 						$('.btn-morph').addClass('heart');

package/scss/account.scss

@@ -13,14 +13,6 @@
 	> .row {
 		margin-left: auto;
 		margin-right: auto;
-
-		.fullname {
-			text-align: center;
-			font-size: 20px;
-			color: $gray-600;
-			font-weight: 300;
-			margin-bottom: 24px;
-		}
 	}
 
 	.cover {
@@ -188,51 +180,6 @@
 			margin-bottom: 12px;
 			font-size: 32px;
 		}
-
-		.username {
-			text-transform: uppercase;
-			text-align: center;
-			margin-top: 0px;
-			font-size: 15px;
-		}
-
-		.aboutme > p {
-			max-width: 75%;
-			margin-left: auto;
-			margin-right: auto;
-			color: $gray-600;
-		}
-
-		.profile-meta {
-			font-size: 10px;
-			text-transform: uppercase;
-			color: #777;
-			margin-top: 25px;
-
-			strong {
-				color: #333;
-			}
-		}
-
-		.account-stats {
-			text-align: center;
-			font-size: 35px;
-			line-height: 25px;
-			margin-top: 25px;
-			margin-bottom: -20px;
-
-			.stat {
-				display: inline-block;
-				min-width: 100px;
-				margin-bottom: 20px;
-			}
-
-			.stat-label {
-				font-size: 12px;
-				text-transform: uppercase;
-				color: $gray-600;
-			}
-		}
 	}
 
 	.show-success {

package/scss/mixins.scss

@@ -21,7 +21,7 @@
 			// Opaque ring
 			position: relative;
 			z-index: 1;
-			box-shadow: 0 0 0 ($spacer * .5) var(--bs-body-bg);
+			box-shadow: 0 0 0 4px var(--bs-body-bg);
 		}
 
 		[component="user/locality"] {

package/scss/persona.scss

@@ -28,3 +28,5 @@
 @import "modules/composer";
 @import "modules/user-menu";
 @import "modules/topics-list";
+
+@import "skins";

package/scss/posts_list.scss

@@ -3,7 +3,6 @@
 
 	.posts-list-item {
 		width: 100%;
-		margin-bottom: 0px;
 
 		&.deleted {
 			-moz-opacity: 0.30;
@@ -29,28 +28,11 @@
 		}
 
 		.topic-title {
-			color: $gray-800;
 			font-weight: 900;
 			font-size: 125%;
 			text-decoration: underline;
 		}
 
-		.topic-category {
-			text-transform: uppercase;
-			font-size: 10px;
-			color: $gray-600;
-			margin-top: 6px;
-			margin-right: 10px;
-			margin-bottom: 25px;
-			display: inline-block;
-			margin-top: 10px;
-
-			a {
-				font-weight: 900;
-				color: $gray-600;
-			}
-		}
-
 		.content {
 			max-height: 240px;
 			position: relative;
@@ -102,15 +84,10 @@
 			.post-author {
 				padding-left: 25px;
 				margin-top: -14px;
-				color: $gray-600;
 
 				a {
-					color: $gray-600;
 					font-weight: 900;
-
 				}
-
-				text-transform: uppercase;
 			}
 		}
 	}

package/scss/skins.scss

@@ -0,0 +1,64 @@
+.skin-quartz {
+	// $body-bg-image is gradient in quartz
+	[component="post"] {
+		.icon {
+			background-color: transparent !important;
+			.avatar {
+				box-shadow: none!important;
+			}
+		}
+		.timeline-badge {
+			box-shadow: none!important;
+		}
+	}
+	.form-control::placeholder {
+		color:$gray-100!important;
+	}
+	.topic-header {
+		background-color: transparent!important;
+		backdrop-filter: blur(5px);
+	}
+}
+
+.skin-solar {
+	.form-control::placeholder {
+		color:$gray-100!important;
+	}
+}
+
+.skin-yeti {
+	.badge {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
+}
+
+// table color fix, remove once https://github.com/thomaspark/bootswatch/issues/1276 is published
+.skin-darkly, .skin-superhero, .skin-solar, .skin-quartz {
+	table > :not(caption) > * > * {
+		color: white;
+	}
+}
+
+.skin-superhero {
+	// fix read button in dropdowns
+	.mark-read .read {
+		color: $primary!important;
+	}
+}
+
+.skin-slate {
+	// fix unread button colors in dropdowns
+	.mark-read .unread {
+		color: $secondary!important;
+	}
+}
+
+:root {
+	.skin-darkly, .skin-slate, .skin-cyborg {
+		--bs-border-color: #929292;
+	}
+	.skin-zephyr {
+		--bs-secondary-rgb: var(--bs-secondary-color);
+	}
+}

package/scss/topics_list.scss

@@ -5,10 +5,7 @@
 
 .topic-list-header {
     top: calc(var(--panel-offset));
-    background-color: $body-bg;
     z-index: $zindex-dropdown; // allows for top nav dropdowns to appear on top
-    border-top: 1px solid $post-border-color;
-    border-bottom: 1px solid $post-border-color;
 }
 
 .topic-list .title small {

package/templates/account/profile.tpl

@@ -1,9 +1,9 @@
 <!-- IMPORT partials/account/header.tpl -->
 
 <div class="profile row">
-	<h1 class="fullname"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></h1>
+	<h1 class="fullname text-center fs-2 text-secondary fw-light">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h1>
 	<div class="d-flex gap-2 justify-content-center mb-2" component="user/badges"></div>
-	<h2 class="username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></h2>
+	<h2 class="username text-center fs-5"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></h2>
 	<!-- IF isAdminOrGlobalModeratorOrModerator -->
 	<!-- IF banned -->
 	<div class="text-center">
@@ -24,43 +24,42 @@
 	<!-- ENDIF selectedGroup.slug -->
 	{{{end}}}
 	</div>
-	<br/>
 	<!-- ENDIF selectedGroup.length -->
 
 	<!-- IF aboutme -->
-	<span component="aboutme" class="text-center aboutme">{aboutmeParsed}</span>
+	<div component="aboutme" class="text-center aboutme text-secondary w-75 mx-auto text-center">{aboutmeParsed}</div>
 	<!-- ENDIF aboutme -->
 
-	<div class="account-stats">
+	<div class="account-stats fs-1 text-center mb-3">
 		<!-- IF !reputation:disabled -->
-		<div class="stat">
+		<div class="stat d-inline-block" style="min-width: 100px;">
 			<div title="{reputation}">{humanReadableNumber(reputation)}</div>
-			<span class="stat-label">[[global:reputation]]</span>
+			<div class="stat-label text-xs text-uppercase text-secondary">[[global:reputation]]</div>
 		</div>
 		<!-- ENDIF !reputation:disabled -->
 
-		<div class="stat">
+		<div class="stat d-inline-block" style="min-width: 100px;">
 			<div title="{profileviews}">{humanReadableNumber(profileviews)}</div>
-			<span class="stat-label">[[user:profile-views]]</span>
+			<div class="stat-label text-xs text-uppercase text-secondary">[[user:profile-views]]</div>
 		</div>
 
-		<div class="stat">
+		<div class="stat d-inline-block" style="min-width: 100px;">
 			<div><a title="{counts.posts}" href="{config.relative_path}/user/{userslug}/posts">{humanReadableNumber(counts.posts)}</a></div>
-			<span class="stat-label">[[global:posts]]</span>
+			<div class="stat-label text-xs text-uppercase text-secondary">[[global:posts]]</div>
 		</div>
 
-		<div class="stat">
+		<div class="stat d-inline-block" style="min-width: 100px;">
 			<div><a title="{counts.followers}" href="{config.relative_path}/user/{userslug}/followers">{humanReadableNumber(counts.followers)}</a></div>
-			<span class="stat-label">[[user:followers]]</span>
+			<div class="stat-label text-xs text-uppercase text-secondary">[[user:followers]]</div>
 		</div>
 
-		<div class="stat">
+		<div class="stat d-inline-block" style="min-width: 100px;">
 			<div><a title="{counts.following}" href="{config.relative_path}/user/{userslug}/following">{humanReadableNumber(counts.following)}</a></div>
-			<span class="stat-label">[[user:following]]</span>
+			<div class="stat-label text-xs text-uppercase text-secondary">[[user:following]]</div>
 		</div>
 	</div>
 
-	<div class="profile-meta d-flex gap-3 flex-wrap justify-content-center">
+	<div class="profile-meta text-xs text-uppercase d-flex gap-3 flex-wrap justify-content-center">
 		<div class="w-100 d-flex gap-3 justify-content-center">
 			<div>
 				<span class="stat-label">[[user:joined]]</span>
@@ -81,8 +80,8 @@
 		{{{ end }}}
 
 		{{{ if age }}}
-		<div>
-			<span class="stat-label">[[user:age]]</span>
+		<div class="">
+			<span class="stat-label text-secondary ">[[user:age]]</span>
 			<span class="fw-bold">{age}</span>
 		</div>
 		{{{ end }}}

package/templates/category.tpl

@@ -9,7 +9,7 @@
 		<!-- IMPORT partials/category/subcategory.tpl -->
 
 		{{{ if (topics.length || privileges.topics:create) }}}
-		<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-center py-2 mb-2 flex-nowrap">
+		<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-center p-1 mb-2 flex-nowrap">
 			<div class="d-flex gap-1">
 				{{{ if privileges.topics:create }}}
 				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new-topic-button]]</a>

package/templates/partials/posts_list_item.tpl

@@ -1,31 +1,33 @@
-<li component="post" class="posts-list-item row<!-- IF ../deleted --> deleted<!-- ELSE --><!-- IF ../topic.deleted --> deleted<!-- ENDIF --><!-- ENDIF -->{{{ if ../topic.scheduled }}} scheduled{{{ end }}}" data-pid="{../pid}" data-uid="{../uid}">
-    <div class="col-lg-11 col-sm-10 col-9 post-body">
-        <a class="topic-title" href="{config.relative_path}/post/{encodeURIComponent(../pid)}">
-            <!-- IF !../isMainPost -->RE: <!-- ENDIF -->{../topic.title}
+<li component="post" class="posts-list-item row {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
+    <div class="col-lg-11 col-sm-10 col-9 post-body pb-3">
+        <a class="topic-title text-reset" href="{config.relative_path}/post/{encodeURIComponent(../pid)}">
+            {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
         </a>
 
-        <div component="post/content" class="content">
+        <div component="post/content" class="content mb-3">
             {../content}
         </div>
 
-        <small class="topic-category"><a href="{config.relative_path}/category/{../category.slug}">[[global:posted-in, {../category.name}]]</a></small>
+        <div class="mb-3">
+            <a class="topic-category text-xs fw-bold text-uppercase text-secondary mb-3" href="{config.relative_path}/category/{../category.slug}">[[global:posted-in, {../category.name}]]</a>
 
-        {{{ if ../isMainPost }}}
-        {{{ if ../topic.tags.length }}}
-        <span class="tag-list">
-            {{{ each ../topic.tags }}}
-            <a href="{config.relative_path}/tags/{topic.tags.valueEncoded}"><span class="tag tag-item tag-class-{topic.tags.class}">{topic.tags.valueEscaped}</span></a>
+            {{{ if ../isMainPost }}}
+            {{{ if ../topic.tags.length }}}
+            <span class="tag-list">
+                {{{ each ../topic.tags }}}
+                <a href="{config.relative_path}/tags/{topic.tags.valueEncoded}"><span class="tag tag-item tag-class-{topic.tags.class}">{topic.tags.valueEscaped}</span></a>
+                {{{ end }}}
+            </span>
             {{{ end }}}
-        </span>
-        {{{ end }}}
-        {{{ end }}}
+            {{{ end }}}
+        </div>
 
         <div class="post-info">
-            <a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(../user, "28px", true, "user-img not-responsive")}</a>
+            <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "28px", true, "user-img not-responsive")}</a>
 
-            <div class="post-author">
-                <a href="{config.relative_path}/user/{../user.userslug}">{../user.displayname}</a><br />
-                <span class="timeago" title="{../timestampISO}"></span>
+            <div class="post-author text-secondary text-uppercase">
+                <a class="text-reset" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a><br />
+                <span class="timeago" title="{./timestampISO}"></span>
             </div>
         </div>
     </div>

package/templates/partials/topic/thumbs.tpl

@@ -0,0 +1,5 @@
+{{{ each thumbs }}}
+<a class="d-inline-block" href="{./url}">
+	<img class="rounded-1 bg-light" style="width:auto; max-width: 4rem; height: 3.33rem;object-fit: contain;" src="{./url}" />
+</a>
+{{{ end }}}

package/templates/partials/topics_list.tpl

@@ -54,7 +54,7 @@
 					{function.buildCategoryLabel, ./category, "a", "border"}
 					{{{ end }}}
 
-					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
+					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
 						{{{ each ./tags }}}
 						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
 						{{{ end }}}

package/templates/popular.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="popular">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-center py-2 mb-2 gap-1">
+	<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-center p-1 mb-2 gap-1">
 		<div class="d-flex gap-1">
 			{{{ if canPost }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->

package/templates/recent.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="recent">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-between py-2 mb-2 gap-1">
+	<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-between p-1 mb-2 gap-1">
 		<div class="d-flex gap-1">
 			{{{ if canPost }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->

package/templates/tag.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="tag">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-center py-2 mb-2 gap-1">
+	<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-center p-1 mb-2 gap-1">
 		<div class="d-flex gap-1">
 			{{{ if loggedIn }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->

package/templates/top.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="top">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-center py-2 mb-2 gap-1">
+	<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-center p-1 mb-2 gap-1">
 		<div class="d-flex gap-1">
 			{{{ if canPost }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->

package/templates/topic.tpl

@@ -16,7 +16,7 @@
 		</div>
 
 		<div class="topic-header sticky-top mb-3 bg-body">
-			<div class="d-flex flex-wrap gap-3 border-bottom pb-2">
+			<div class="d-flex flex-wrap gap-3 border-bottom p-2">
 				<div class="d-flex flex-column gap-2 flex-grow-1">
 					<h1 component="post/header" class="mb-0" itemprop="name">
 						<div class="topic-title d-flex">
@@ -56,13 +56,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="d-flex flex-wrap gap-2 align-items-center hidden-empty" component="topic/thumb/list">
-					{{{ each thumbs }}}
-					<a class="d-inline-block" href="{./url}">
-						<img class="rounded-1 bg-light" style="width:auto; max-width: 4rem; height: 3.33rem;object-fit: contain;" src="{./url}" />
-					</a>
-					{{{ end }}}
-				</div>
+				<div class="d-flex flex-wrap gap-2 align-items-center hidden-empty" component="topic/thumb/list"><!-- IMPORT partials/topic/thumbs.tpl --></div>
 			</div>
 		</div>
 		{{{ if merger }}}

package/templates/unread.tpl

@@ -5,7 +5,7 @@
 	{{{end}}}
 </div>
 <div class="unread">
-	<div class="topic-list-header sticky-top btn-toolbar justify-content-between align-items-center py-2 mb-2 gap-1">
+	<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between align-items-center p-1 mb-2 gap-1">
 		<div class="d-flex gap-1">
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">

package/templates/world.tpl

@@ -7,7 +7,7 @@
 <div class="row">
 	<div class="world {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
 		{{{ if (topics.length || privileges.topics:create) }}}
-		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 flex-nowrap">
+		<div class="topic-list-header text-bg-light sticky-top btn-toolbar justify-content-between p-1 mb-2 gap-1 flex-nowrap">
 			<div class="d-flex gap-1 align-items-stretch">
 				{{{ if privileges.topics:create }}}
 				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary text-nowrap" data-ajaxify="false" role="button">[[category:new-topic-button]]</a>