nodebb-theme-persona 12.1.5 → 13.0.0

package/templates/account/edit.tpl

@@ -2,18 +2,18 @@
 	<!-- IMPORT partials/account/header.tpl -->
 	<!-- IF sso.length --><div><!-- ENDIF sso.length -->
 		<div class="row">
-			<div class="col-md-2 col-sm-4">
+			<div class="col-md-3 col-sm-4">
 				<div class="account-picture-block text-center">
-					<div class="row">
-						<div class="col-xs-12 hidden-xs">
+					<div class="row mb-3">
+						<div class="col-12 hidden-xs">
 							<!-- IF picture -->
-							<img id="user-current-picture" class="avatar avatar-xl avatar-rounded" src="{picture}" />
+							<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
 							<!-- ELSE -->
-							<div class="avatar avatar-xl avatar-rounded" style="background-color: {icon:bgColor};">{icon:text}</div>
+							<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
 							<!-- ENDIF picture -->
 						</div>
 					</div>
-					<ul class="list-group">
+					<ul class="list-group mb-3">
 						<!-- IF allowProfilePicture -->
 						<a id="changePictureBtn" href="#" class="list-group-item">[[user:change_picture]]</a>
 						<!-- ENDIF allowProfilePicture -->
@@ -50,31 +50,31 @@
 
 			<div class="<!-- IF !sso.length -->col-md-9 col-sm-8<!-- ELSE -->col-md-5 col-sm-4<!-- ENDIF !sso.length -->">
 				<form role="form" component="profile/edit/form">
-					<div class="form-group">
-						<label for="fullname">[[user:fullname]]</label>
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
 						<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
 					</div>
 					<!-- IF allowWebsite -->
-					<div class="form-group">
-						<label for="website">[[user:website]]</label>
+					<div class="mb-2">
+						<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}">
 					</div>
 					<!-- ENDIF allowWebsite -->
 
-					<div class="form-group">
-						<label for="location">[[user:location]]</label>
+					<div class="mb-2">
+						<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>
 
-					<div class="form-group">
-						<label for="birthday">[[user:birthday]]</label>
+					<div class="mb-2">
+						<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>
 
-					<div class="form-group">
-						<label for="groupTitle">[[user:grouptitle]]</label>
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
-						<select class="form-control" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
+						<select class="form-select" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
 							<option value="">[[user:no-group-title]]</option>
 							{{{each groups}}}
 							<!-- IF groups.userTitleEnabled -->
@@ -89,16 +89,16 @@
 					</div>
 
 					<!-- IF allowAboutMe -->
-					<div class="form-group">
-						<label for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
 						<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
 					</div>
 					<!-- ENDIF allowAboutMe -->
 
 					<!-- IF allowSignature -->
 					<!-- IF !disableSignatures -->
-					<div class="form-group">
-						<label for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
+					<div class="mb-2">
+						<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
 						<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
 					</div>
 					<!-- ENDIF !disableSignatures -->
@@ -111,13 +111,13 @@
 			</div>
 
 			<!-- IF sso.length -->
-			<div class="col-md-5 col-sm-4">
+			<div class="col-md-4 col-sm-4">
 				<label>[[user:sso.title]]</label>
 				<div class="list-group">
 					{{{each sso}}}
 					<div class="list-group-item">
 						<!-- IF ../deauthUrl -->
-						<a data-component="{../component}" class="btn btn-default btn-xs pull-right" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
+						<a data-component="{../component}" class="btn btn-outline-secondary btn-sm float-end" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
 						<!-- END -->
 						<a data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
 							<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->

package/templates/account/followers.tpl

@@ -2,16 +2,16 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="users row">
+		<div class="col-12">
 		<h1>[[pages:{template.name}, {username}]]</h1>
 
-		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
-			<!-- IMPORT partials/users_list.tpl -->
-		</ul>
+		<!-- IMPORT partials/users_list.tpl -->
 
 		<!-- IF !users.length -->
 		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
 		<!-- ENDIF !users.length -->
 
 		<!-- IMPORT partials/paginator.tpl -->
+		</div>
 	</div>
 </div>

package/templates/account/following.tpl

@@ -2,16 +2,16 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="users row">
+		<div class="col-12">
 		<h1>[[pages:{template.name}, {username}]]</h1>
 
-		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
-			<!-- IMPORT partials/users_list.tpl -->
-		</ul>
+		<!-- IMPORT partials/users_list.tpl -->
 
 		<!-- IF !users.length -->
 		<div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
 		<!-- ENDIF !users.length -->
 
 		<!-- IMPORT partials/paginator.tpl -->
+		</div>
 	</div>
 </div>

package/templates/account/groups.tpl

@@ -3,8 +3,8 @@
 
 	<div class="row">
 		<h1>[[pages:{template.name}, {username}]]</h1>
-		
-		<div class="groups list">
+
+		<div class="col-12 groups list">
 			<div component="groups/container" id="groups-list" class="row">
 				<!-- IF !groups.length -->
 				<div class="alert alert-warning text-center">[[groups:no_groups_found]]</div>

package/templates/account/info.tpl

@@ -2,16 +2,16 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<!-- IF sessions.length -->
-	<div class="row">
-		<div class="col-xs-12 col-md-12">
+	<div class="row mb-3">
+		<div class="col-12 col-md-12">
 			<h4>[[global:sessions]]</h4>
 			<ul class="list-group" component="user/sessions">
 				{{{each sessions}}}
 				<li class="list-group-item" data-uuid="{../uuid}">
-					<div class="pull-right">
+					<div class="float-end">
 						<!-- IF isSelfOrAdminOrGlobalModerator -->
 						<!-- IF !../current -->
-						<button class="btn btn-xs btn-default" type="button" data-action="revokeSession">Revoke Session</button>
+						<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
 						<!-- ENDIF !../current -->
 						<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
 						{function.userAgentIcons}
@@ -31,11 +31,11 @@
 
 	<div class="row">
 		<div class="col-sm-6">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">[[global:recentips]]</h3>
-				</div>
-				<div class="panel-body">
+			<div class="card mb-3">
+				<h5 class="card-header">
+					[[global:recentips]]
+				</h5>
+				<div class="card-body">
 					<ul>
 						{{{each ips}}}
 						<li>{@value}</li>
@@ -44,32 +44,32 @@
 				</div>
 			</div>
 
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">[[user:info.username-history]]</h3>
-				</div>
-				<div class="panel-body">
+			<div class="card mb-3">
+				<h5 class="card-header">
+					[[user:info.username-history]]
+				</h5>
+				<div class="card-body">
 					<ul class="list-group">
 						{{{each usernames}}}
 						<li class="list-group-item">
 							{../value}
-							<small class="pull-right"><span class="timeago" title="{../timestampISO}"></span></small>
+							<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
 						</li>
 						{{{end}}}
 					</ul>
 				</div>
 			</div>
 
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">[[user:info.email-history]]</h3>
-				</div>
-				<div class="panel-body">
+			<div class="card">
+				<h5 class="card-header">
+					[[user:info.email-history]]
+				</h5>
+				<div class="card-body">
 					<ul class="list-group">
 						{{{each emails}}}
 						<li class="list-group-item">
 							{../value}
-							<small class="pull-right"><span class="timeago" title="{../timestampISO}"></span></small>
+							<small class="float-end"><span class="timeago" title="{../timestampISO}"></span></small>
 						</li>
 						{{{end}}}
 					</ul>
@@ -77,13 +77,13 @@
 			</div>
 		</div>
 		<div class="col-sm-6">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">[[user:info.latest-flags]]</h3>
-				</div>
-				<div class="panel-body">
+			<div class="card mb-3">
+				<h5 class="card-header">
+					[[user:info.latest-flags]]
+				</h5>
+				<div class="card-body">
 					<!-- IF history.flags.length -->
-					<ul class="recent-flags">
+					<ul class="recent-flags list-unstyled">
 						{{{each history.flags}}}
 						<li>
 							<p>
@@ -103,30 +103,27 @@
 				</div>
 			</div>
 
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">
-
-						[[user:info.ban-history]]
+			<div class="card mb-3">
+				<h5 class="card-header">
+					[[user:info.ban-history]]
 
-						<!-- IF !banned -->
-						<!-- IF !isSelf -->
-						<button class="btn btn-xs pull-right btn-danger" component="account/ban">[[user:ban_account]]</button>
-						<!-- ENDIF !isSelf -->
-						<!-- ELSE -->
-						<!-- IF !isSelf -->
-						<button class="btn btn-xs pull-right btn-success" component="account/unban">[[user:unban_account]]</button>
-						<!-- ENDIF !isSelf -->
-						<!-- ENDIF !banned -->
-					</h3>
-				</div>
-				<div class="panel-body">
+					<!-- IF !banned -->
+					<!-- IF !isSelf -->
+					<button class="btn btn-sm float-end btn-danger" component="account/ban">[[user:ban_account]]</button>
+					<!-- ENDIF !isSelf -->
+					<!-- ELSE -->
+					<!-- IF !isSelf -->
+					<button class="btn btn-sm float-end btn-success" component="account/unban">[[user:unban_account]]</button>
+					<!-- ENDIF !isSelf -->
+					<!-- ENDIF !banned -->
+				</h5>
+				<div class="card-body">
 					<!-- IF history.bans.length -->
-					<ul class="ban-history">
+					<ul class="ban-history list-unstyled">
 						{{{each history.bans}}}
 						<li>
 							<p>
-								<a href="{config.relative_path}/user/{history.bans.user.userslug}">{buildAvatar(history.bans.user, "sm", true)}</a>
+								<a href="{config.relative_path}/user/{history.bans.user.userslug}">{buildAvatar(history.bans.user, "24px", true)}</a>
 								<strong>
 									<a href="<!-- IF history.bans.user.userslug -->{config.relative_path}/user/{history.bans.user.userslug}<!-- ELSE -->#<!-- ENDIF history.bans.user.userslug -->" itemprop="author" data-username="{history.bans.user.username}" data-uid="{history.bans.user.uid}">{history.bans.user.username}</a>
 								</strong>
@@ -147,29 +144,27 @@
 				</div>
 			</div>
 
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">
-						[[user:info.mute-history]]
+			<div class="card mb-3">
+				<h5 class="card-header">
+					[[user:info.mute-history]]
 
-						{{{ if !muted }}}
-						{{{ if !isSelf }}}
-						<button class="btn btn-xs pull-right btn-danger" component="account/mute">[[user:mute_account]]</button>
-						{{{ end }}}
-						{{{ else }}}
-						{{{ if !isSelf }}}
-						<button class="btn btn-xs pull-right btn-success" component="account/unmute">[[user:unmute_account]]</button>
-						{{{ end }}}
-						{{{ end }}}
-					</h3>
-				</div>
-				<div class="panel-body">
+					{{{ if !muted }}}
+					{{{ if !isSelf }}}
+					<button class="btn btn-sm float-end btn-danger" component="account/mute">[[user:mute_account]]</button>
+					{{{ end }}}
+					{{{ else }}}
+					{{{ if !isSelf }}}
+					<button class="btn btn-sm float-end btn-success" component="account/unmute">[[user:unmute_account]]</button>
+					{{{ end }}}
+					{{{ end }}}
+				</h5>
+				<div class="card-body">
 					{{{ if history.mutes.length }}}
-					<ul class="ban-history">
+					<ul class="ban-history list-unstyled">
 						{{{ each history.mutes }}}
 						<li>
 							<p>
-								<a href="{config.relative_path}/user/{history.mutes.user.userslug}">{buildAvatar(history.mutes.user, "sm", true)}</a>
+								<a href="{config.relative_path}/user/{history.mutes.user.userslug}">{buildAvatar(history.mutes.user, "24px", true)}</a>
 								<strong>
 									<a href="<!-- IF history.mutes.user.userslug -->{config.relative_path}/user/{history.mutes.user.userslug}<!-- ELSE -->#<!-- ENDIF history.mutes.user.userslug -->" itemprop="author" data-username="{history.mutes.user.username}" data-uid="{history.mutes.user.uid}">{history.mutes.user.username}</a>
 								</strong>
@@ -190,22 +185,22 @@
 			</div>
 
 			<!-- IF isAdminOrGlobalModerator -->
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<h3 class="panel-title">[[user:info.moderation-note]]</h3>
-				</div>
-				<div class="panel-body">
+			<div class="card">
+				<h5 class="card-header">
+					[[user:info.moderation-note]]
+				</h5>
+				<div class="card-body">
 					<textarea component="account/moderation-note" class="form-control"></textarea>
 					<br/>
-					<button class="btn btn-sm pull-right btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
+					<button class="btn btn-sm float-end btn-success" component="account/save-moderation-note">[[user:info.moderation-note.add]]</button>
 					<br/>
 					<div component="account/moderation-note/list">
 						{{{each moderationNotes}}}
 						<hr/>
 
 						<div class="clearfix">
-							<div class="pull-left">
-								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">{buildAvatar(moderationNotes.user, "sm", true)}</a>
+							<div class="float-start">
+								<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->">{buildAvatar(moderationNotes.user, "24px", true)}</a>
 								<strong>
 									<a href="<!-- IF moderationNotes.user.userslug -->{config.relative_path}/user/{moderationNotes.user.userslug}<!-- ELSE -->#<!-- ENDIF moderationNotes.user.userslug -->" itemprop="author" data-username="{moderationNotes.user.username}" data-uid="{moderationNotes.user.uid}">{moderationNotes.user.username}</a>
 								</strong>

package/templates/account/posts.tpl

@@ -8,7 +8,7 @@
 			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
 		<!-- ENDIF !posts.length -->
 
-		<div class="col-xs-12">
+		<div class="col-12">
 			<!-- IMPORT partials/posts_list.tpl -->
 
 			<!-- IF config.usePagination -->

package/templates/account/profile.tpl

@@ -20,7 +20,7 @@
 		<div class="text-center">
 		{{{each selectedGroup}}}
 		<!-- IF selectedGroup.slug -->
-			<a href="{config.relative_path}/groups/{selectedGroup.slug}"><small class="label group-label inline-block" style="color:{selectedGroup.textColor};background-color: {selectedGroup.labelColor};"><!-- IF selectedGroup.icon --><i class="fa {selectedGroup.icon}"></i> <!-- ENDIF selectedGroup.icon -->{selectedGroup.userTitle}</small></a>
+		<!-- IMPORT partials/groups/badge.tpl -->
 		<!-- ENDIF selectedGroup.slug -->
 		{{{end}}}
 		</div>
@@ -93,14 +93,14 @@
 	<hr />
 
 	<div class="row">
-		<div class="col-xs-12 account-block hidden">
+		<div class="col-12 account-block hidden">
 			<div class="account-picture-block text-center">
 				<span>
 					<span class="account-username"> {username}</span>
 				</span>
 
 				<!-- IF !isSelf -->
-				<a component="account/unfollow" href="#" class="btn btn-default{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
+				<a component="account/unfollow" href="#" class="btn btn-outline-secondary{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
 				<a component="account/follow" href="#" class="btn btn-primary{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
 				<!-- ENDIF !isSelf -->
 			</div>
@@ -109,7 +109,7 @@
 
 	<!-- IF groups.length -->
 	<div class="row">
-		<div class="col-xs-12 hidden">
+		<div class="col-12 hidden">
 			{{{each groups}}}
 			<a href="{config.relative_path}/groups/{groups.slug}"><span class="label group-label inline-block" style="background-color: {groups.labelColor};"><!-- IF groups.icon --><i class="fa {groups.icon}"></i> <!-- ENDIF groups.icon -->{groups.userTitle}</span></a>
 			{{{end}}}
@@ -119,14 +119,16 @@
 
 	<!-- IF ips.length -->
 	<div class="row">
-		<div class="col-xs-12 hidden">
-			<div class="panel-heading">
-				<h3 class="panel-title">[[global:recentips]]</h3>
-			</div>
-			<div class="panel-body">
-			{{{each ips}}}
-				<div>{ips}</div>
-			{{{end}}}
+		<div class="col-12 hidden">
+			<div class="card">
+				<h5 class="card-header">
+					[[global:recentips]]
+				</h5>
+				<div class="card-body">
+				{{{each ips}}}
+					<div>{ips}</div>
+				{{{end}}}
+				</div>
 			</div>
 		</div>
 	</div>
@@ -134,11 +136,11 @@
 
 	<div class="row">
 		{{{ if bestPosts.length }}}
-		<div class="col-lg-12 col-xs-12">
+		<div class="col-lg-12 col-12">
 			<h1>[[pages:account/best, {username}]]</h1>
 
-			<div class="col-xs-12">
-				<ul component="posts" class="posts-list">
+			<div class="col-12">
+				<ul component="posts" class="posts-list list-unstyled">
 				{{{each bestPosts}}}
 				<!-- IMPORT partials/posts_list_item.tpl -->
 				{{{end}}}
@@ -147,10 +149,10 @@
 		</div>
 		{{{ end }}}
 		{{{ if latestPosts.length}}}
-		<div class="col-lg-12 col-xs-12">
+		<div class="col-lg-12 col-12">
 			<h1>[[pages:account/latest-posts, {username}]]</h1>
-			<div class="col-xs-12">
-				<ul component="posts" class="posts-list">
+			<div class="col-12">
+				<ul component="posts" class="posts-list list-unstyled">
 				{{{each latestPosts}}}
 				<!-- IMPORT partials/posts_list_item.tpl -->
 				{{{end}}}

package/templates/account/sessions.tpl

@@ -3,16 +3,16 @@
 
 	<!-- IF sessions.length -->
 	<div class="row">
-		<div class="col-xs-12 col-md-12">
+		<div class="col-12 col-md-12">
 			<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="pull-right">
+					<div class="float-end">
 						<!-- IF isSelfOrAdminOrGlobalModerator -->
 						<!-- IF !../current -->
-						<button class="btn btn-xs btn-default" type="button" data-action="revokeSession">Revoke Session</button>
+						<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
 						<!-- ENDIF !../current -->
 						<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
 						{function.userAgentIcons}