nodebb-theme-persona 14.2.40 → 14.2.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "14.2.40",
+  "version": "14.2.42",
   "nbbpm": {
     "compatibility": "^4.13.0"
   },

package/public/persona.js

@@ -186,7 +186,7 @@ $(document).ready(function () {
 				avatar.parents('a').after(card.hide());
 
 				if (String(app.user.uid) === String(user.uid) || !app.user.uid) {
-					card.find('.btn-morph').hide();
+					card.find('.btn-morph').addClass('invisible');
 				} else {
 					const uid = isFinite(user.uid) ? user.uid : encodeURIComponent(user.userslug);
 					setupFavouriteMorph(card, uid, user.username);

package/scss/modules/usercard.scss

@@ -1,65 +1,13 @@
 .persona-usercard {
 	position: absolute;
-	background: #333;
 	top: -50%;
 	left: 0px;
 	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
 	height: 150px;
 	width: 450px;
-	z-index: 1;
-	display: block;
+	z-index: $zindex-dropdown;
 
-	a, a:hover, a:visited, a:active {
-		text-decoration: none;
-		color: white;
-	}
-
-	.usercard-picture {
-		width: 150px;
-		height: 150px;
-		float: left;
-		background-size: cover;
-		background-repeat: no-repeat;
-		font-size: 75px;
-		line-height: 140px;
-		text-align: center;
-	}
-
-	.usercard-body {
-		padding: 5px 15px;
-		float: left;
-
-		height: 150px;
-		width: 300px;
-		color: white;
-	}
-
-	.usercard-name {
-		font-size: 28px;
-	}
-
-	.usercard-username {
-		text-transform: uppercase;
-		font-size: 13px;
-	}
-
-	.usercard-info {
-		text-align: center;
-		font-size: 30px;
-		font-weight: 300;
-
-		small {
-			text-transform: uppercase;
-			font-size: 10px;
-			display: block;
-			margin-top: 15px;
-			font-weight: 400;
-		}
-	}
-
-	.persona-fab.btn-morph {
-		top: 75px;
-		right: 15px;
-		position: absolute;
+	.avatar {
+		margin: 0!important;
 	}
 }

package/templates/account/edit.tpl

@@ -3,15 +3,6 @@
 	<div class="row">
 		<div class="col-md-3 col-sm-4">
 			<div class="account-picture-block text-center">
-				<div class="row mb-3">
-					<div class="col-12 hidden-xs">
-						<!-- IF picture -->
-						<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
-						<!-- ELSE -->
-						<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
-						<!-- ENDIF picture -->
-					</div>
-				</div>
 				<ul class="list-group mb-3">
 					{{{ if allowProfilePicture }}}
 					<li class="list-group-item"><a component="profile/change/picture" href="#" class="text-decoration-none text-reset">[[user:change-picture]]</a></li>

package/templates/account/sessions.tpl

@@ -6,24 +6,7 @@
 		<p class="lead">[[user:sessions.description]]</p>
 		<hr />
 		<ul class="list-group" component="user/sessions">
-			{{{each sessions}}}
-			<li class="list-group-item" data-uuid="{../uuid}">
-				<div class="float-end">
-					<!-- IF isSelfOrAdminOrGlobalModerator -->
-					<!-- IF !../current -->
-					<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
-					<!-- ENDIF !../current -->
-					<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
-					{function.userAgentIcons}
-					<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
-				</div>
-				{../browser} {../version} on {../platform}<br />
-				<small class="timeago text-muted" title="{../datetimeISO}"></small>
-				<ul>
-					<li><strong>[[global:ip-address]]</strong>: {../ip}</li>
-				</ul>
-			</li>
-			{{{end}}}
+			<!-- IMPORT partials/account/session-list.tpl -->
 		</ul>
 	</div>
 </div>

package/templates/groups/details.tpl

@@ -1,6 +1,6 @@
 <div component="groups/container" class="groups details">
 
-	<div component="groups/cover" style="background-image: url({group.cover:url}??{config.cache-buster}); background-position: {group.cover:position};">
+	<div component="groups/cover" style="background-image: url({escape(group.cover:url)}?{config.cache-buster}); background-position: {group.cover:position};">
 		{{{ if group.isOwner }}}
 		<div class="controls">
 			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
@@ -31,7 +31,7 @@
 		</div>
 		<div class="d-flex gap-2 align-items-start">
 			{{{ if loggedIn }}}
-			{function.membershipBtn, group}
+			{membershipBtn(group)}
 			{{{ end }}}
 			{{{ if isAdmin }}}
 			<a href="{config.relative_path}/admin/manage/groups/{group.slug}" target="_blank" class="btn btn-light text-nowrap"><i class="fa fa-gear"></i> [[user:edit]]</a>

package/templates/header.tpl

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
+<html lang="{localeToHTML(userLang, defaultLang)}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
 	<title>{browserTitle}</title>
-	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
+	{{{each metaTags}}}{buildMetaTag(@value)}{{{end}}}
 	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
-	{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
+	{{{each linkTags}}}{buildLinkTag(@value)}{{{end}}}
 
 	<script>
 		var config = JSON.parse('{{configJSON}}');

package/templates/modules/usercard.tpl

@@ -1,31 +1,32 @@
-<div class="persona-usercard">
+<div class="persona-usercard d-flex text-bg-dark">
 	<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 -->
+		{buildAvatar(@value, "150px", false, "shadow-none")}
 	</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 -->
+	<div class="usercard-body w-100 d-flex flex-column justify-content-between gap-2 py-2 px-3 overflow-hidden position-relative">
+
+		<a href="{config.relative_path}/user/{userslug}" class="text-reset text-truncate d-block">
+			<span class="usercard-name fs-5">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</span>
 		</a>
 
-		<div class="row usercard-info">
-			<div class="col-4">
+		<div class="d-flex gap-2 align-items-center">
+			<a href="{config.relative_path}/user/{userslug}" class="text-reset text-truncate d-block">
+				<span class="usercard-username text-uppercase text-sm text-truncate">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
+			</a>
+			{{{ if !banned }}}
+			<span component="user/status" class="border border-white border-2 m-0 rounded-circle status {status}" title="[[global:{status}]]" style="transform: none;"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+			{{{ end }}}
+		</div>
+
+		<div class="d-flex justify-content-between usercard-info">
+			<div class="d-flex flex-column text-center">
 				<small>[[global:posts]]</small>
-				<span>{humanReadableNumber(postcount)}</span>
+				<span class="fs-5">{humanReadableNumber(postcount)}</span>
 			</div>
-			<div class="col-4">
+			<div class="d-flex flex-column text-center">
 				<small>[[global:reputation]]</small>
-				<span>{humanReadableNumber(reputation)}</span>
+				<span class="fs-5">{humanReadableNumber(reputation)}</span>
 			</div>
-
-			<button class="btn-morph persona-fab <!-- IF banned --> hide<!-- ENDIF banned -->">
+			<button class="btn-morph persona-fab fs-3  {{{ if banned }}} invisible{{{ end }}}">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>
@@ -34,4 +35,5 @@
 			</button>
 		</div>
 	</div>
+
 </div>

package/templates/partials/account/header.tpl

@@ -7,29 +7,24 @@
 		{{{end}}}
 	</div>
 
-	<div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+	<div class="cover" component="account/cover" style="background-image: url({escape(cover:url)}); background-position: {cover:position};">
 		<div class="avatar-wrapper" data-uid="{uid}">
-			<!-- IF picture -->
-			<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 128px;" />
-			<!-- ELSE -->
-			<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;" title="{username}">{icon:text}</div>
-			<!-- ENDIF picture -->
+			{buildAvatar(@value, "128px", true)}
 			<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 !isSelf -->
-			<button class="btn-morph persona-fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->" title="<!-- IF isFollowing -->[[global:unfollow]]<!-- ELSE -->[[global:follow]]<!-- ENDIF isFollowing -->">
+			{{{ if !isSelf }}}
+			<button class="btn-morph persona-fab {{{ if isFollowing }}}heart{{{ else }}}plus{{{ end }}}" title="{{{ if isFollowing }}}[[global:unfollow]]{{{ else }}}[[global:follow]]{{{ end }}}">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>
 					<span class="s3"></span>
 				</span>
 			</button>
-			<!-- ENDIF !isSelf -->
+			{{{ end }}}
 		</div>
 
 		<div class="container">
-			<!-- IF allowCoverPicture -->
-			<!-- IF canEdit -->
+			{{{ if (allowCoverPicture && canEdit) }}}
 			<div class="controls">
 				<a href="#" class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></a>
 				<a href="#" class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></a>
@@ -37,8 +32,7 @@
 			</div>
 			<a href="#" class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></a>
 			<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-			<!-- ENDIF canEdit -->
-			<!-- ENDIF allowCoverPicture -->
+			{{{ end }}}
 
 			<!-- IMPORT partials/account/menu.tpl -->
 		</div>

package/templates/partials/account/session-list.tpl

@@ -6,7 +6,7 @@
 		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
 		{{{ end }}}
 		{{{ end }}}
-		{function.userAgentIcons}
+		{userAgentIcons(@value)}
 		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
 	</div>
 	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />

package/templates/partials/menu.tpl

@@ -46,7 +46,7 @@
 			<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">
 					{{{each navigation}}}
-					<!-- IF function.displayMenuItem, @index -->
+					{{{ if displayMenuItem(@root, @index) }}}
 					<li class="nav-item {navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}" title="{navigation.title}">
 						<a class="nav-link navigation-link {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
 						{{{ if navigation.dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{navigation.route}"{{{ end }}} {{{ if navigation.id }}}id="{navigation.id}"{{{ end }}}{{{ if navigation.targetBlank }}} target="_blank"{{{ end }}}>
@@ -66,8 +66,8 @@
 						</ul>
 						{{{ end }}}
 					</li>
-					<!-- ENDIF function.displayMenuItem -->
-					{{{end}}}
+					{{{ end }}}
+					{{{ end }}}
 				</ul>
 				<ul class="navbar-nav mb-2 mb-lg-0 hidden-xs">
 					<li class="nav-item">

package/templates/partials/search-results.tpl

@@ -1,6 +1,6 @@
 <div id="results" class="search-results col-md-12" data-search-query="{search_query}">
 	{{{ if matchCount }}}
-	<div class="alert alert-info">[[search:results-matching, {matchCount}, {search_query}, {time}]] </div>
+	<div class="alert alert-info">[[search:results-matching, {matchCount}, {txEscape(search_query)}, {time}]] </div>
 	{{{ else }}}
 	{{{ if search_query }}}
 	<div class="alert alert-warning">[[search:no-matches]]</div>

package/templates/partials/topic/reply-button.tpl

@@ -3,8 +3,8 @@
 	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu">
-		<li><a class="dropdown-item" href="#" component="topic/reply-as-topic" role="menuitem">[[topic:reply-as-topic]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end p-1" role="menu">
+		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic" role="menuitem">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
 

package/templates/partials/topics_list.tpl

@@ -1,9 +1,9 @@
 <ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
 
 	{{{ each topics }}}
-	<li component="category/topic" class="category-item hover-parent py-2 mb-2 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+	<li component="category/topic" class="category-item hover-parent py-2 mb-2 d-flex flex-column flex-lg-row align-items-start {generateTopicClass(@value)}" <!-- IMPORT partials/data/category.tpl -->>
 		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
-		<meta itemprop="name" content="{function.stripTags, ./title}" />
+		<meta itemprop="name" content="{stripTags(./title)}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{increment(./index, "1")}" />
 		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
@@ -51,7 +51,7 @@
 					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 
 					{{{ if (!template.category || (cid != ./cid)) }}}
-					{function.buildCategoryLabel, ./category, "a", "border"}
+					{buildCategoryLabel(./category, "a", "border")}
 					{{{ end }}}
 
 					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">

package/templates/topic.tpl

@@ -40,7 +40,7 @@
 							</a>
 							{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 						</span>
-						{function.buildCategoryLabel, category, "a", "border"}
+						{buildCategoryLabel(category, "a", "border")}
 						<div data-tid="{./tid}" component="topic/tags" class="lh-1 tags tag-list d-flex flex-wrap hidden-xs hidden-empty gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
 						<div class="d-flex gap-2" component="topic/stats"><!-- IMPORT partials/topic/stats.tpl --></div>
 						{{{ if !feeds:disableRSS }}}