nodebb-theme-persona 12.1.4 → 13.0.0

package/templates/account/settings.tpl

@@ -2,11 +2,11 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="row">
-		<div class="col-xs-12 col-md-6">
+		<div class="col-12 col-md-6">
 			<!-- IF !disableCustomUserSkins -->
 			<h4>[[user:select-skin]]</h4>
-			<div class="well">
-				<select class="form-control" id="bootswatchSkin" data-property="bootswatchSkin">
+			<div class="card card-body mb-3">
+				<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
 					{{{each bootswatchSkinOptions}}}
 					<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
 					{{{end}}}
@@ -16,120 +16,130 @@
 
 			<!-- IF allowUserHomePage -->
 			<h4>[[user:select-homepage]]</h4>
-			<div class="well">
-				<div class="form-group">
+			<div class="card card-body mb-3">
+				<div class="mb-2">
 					<label for="homePageRoute">[[user:homepage]]</label>
-					<select class="form-control" id="homePageRoute" data-property="homePageRoute">
+					<select class="form-select" id="homePageRoute" data-property="homePageRoute">
 						<option value="none">None</option>
 						{{{each homePageRoutes}}}
 						<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
 						{{{end}}}
 					</select>
-					<p class="help-block">[[user:homepage_description]]</p>
+					<p class="form-text">[[user:homepage_description]]</p>
 				</div>
-				<div id="homePageCustom" class="form-group" style="display: none;">
+				<div id="homePageCustom" class="mb-2" style="display: none;">
 					<label for="homePageCustom">[[user:custom_route]]</label>
 					<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
-					<p class="help-block">[[user:custom_route_help]]</p>
+					<p class="form-text">[[user:custom_route_help]]</p>
 				</div>
 			</div>
 			<!-- ENDIF allowUserHomePage -->
 
 			<h4>[[global:privacy]]</h4>
-			<div class="well">
+			<div class="card card-body mb-3">
 				<!-- IF !hideEmail -->
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/> <strong>[[user:show_email]]</strong>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/>
+					<strong>
+						<label class="form-check-label">[[user:show_email]]</label>
+					</strong>
 				</div>
 				<!-- ENDIF !hideEmail -->
 
 				<!-- IF !hideFullname -->
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/> <strong>[[user:show_fullname]]</strong>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/>
+					<strong>
+						<label class="form-check-label">[[user:show_fullname]]</label>
+					</strong>
 				</div>
 				<!-- ENDIF !hideFullname -->
 				<!-- IF !config.disableChat -->
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/> <strong>[[user:restrict_chats]]</strong>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/>
+					<strong>
+						<label class="form-check-label">[[user:restrict_chats]]</label>
+					</strong>
 				</div>
 				<!-- ENDIF !config.disableChat -->
 			</div>
 
 			<h4>[[user:browsing]]</h4>
-			<div class="well">
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/> <strong>[[user:open_links_in_new_tab]]</strong>
-					</label>
+			<div class="card card-body mb-3">
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/>
+					<strong>
+						<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
+					</strong>
 				</div>
 				<!-- IF inTopicSearchAvailable -->
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/> <strong>[[user:enable_topic_searching]]</strong>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/>
+					<strong>
+						<label class="form-check-label">[[user:enable_topic_searching]]</label>
+					</strong>
 				</div>
-				<p class="help-block">[[user:topic_search_help]]</p>
+				<p class="form-text">[[user:topic_search_help]]</p>
 				<!-- ENDIF inTopicSearchAvailable -->
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/> <strong>[[user:update_url_with_post_index]]</strong>
-					</label>
-				</div>
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/> <strong>[[user:scroll_to_my_post]]</strong>
-					</label>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
+					<strong>
+						<label class="form-check-label">[[user:update_url_with_post_index]]</label>
+					</strong>
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/>
+					<strong>
+						<label class="form-check-label">[[user:scroll_to_my_post]]</label>
+					</strong>
 				</div>
 			</div>
 
 			<h4>[[global:pagination]]</h4>
-			<div class="well">
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong>[[user:paginate_description]]</strong>
-					</label>
+			<div class="card card-body mb-3">
+				<div class="mb-2 form-check">
+					<input type="checkbox" class="form-check-input" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong><label class="form-check-label">[[user:paginate_description]]</label></strong>
+				</div>
+				<div class="mb-3">
+					<strong><label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label></strong>
+					<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
+				</div>
+				<div class="">
+					<strong><label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label></strong>
+					<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
 				</div>
-
-				<strong>[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</strong><br /> <input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}"><br />
-				<strong>[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</strong><br /> <input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}"><br />
 			</div>
 
 			<!-- IF !disableEmailSubscriptions -->
 			<h4>[[global:email]]</h4>
-			<div class="well">
-				<div class="form-group">
+			<div class="card card-body mb-3">
+				<div class="mb-2">
 					<label for="dailyDigestFreq">[[user:digest_label]]</label>
-					<select class="form-control" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+					<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 						{{{each dailyDigestFreqOptions}}}
 						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
 						{{{end}}}
 					</select>
-					<p class="help-block">[[user:digest_description]]</p>
+					<p class="form-text">[[user:digest_description]]</p>
 				</div>
 			</div>
 			<!-- ENDIF !disableEmailSubscriptions -->
 
 			{{{each customSettings}}}
 			<h4>{customSettings.title}</h4>
-			<div class="well">
+			<div class="card card-body mb-3">
 				{customSettings.content}
 			</div>
 			{{{end}}}
 
 		</div>
 
-		<div class="col-xs-12 col-md-6">
+		<div class="col-12 col-md-6">
 			<h4>[[global:language]]</h4>
-			<div class="well">
+			<div class="card card-body mb-3">
 				<div class="row">
-					<div class="form-group col-lg-12">
-						<select data-property="userLang" class="form-control">
+					<div class="mb-2 col-lg-12">
+						<select data-property="userLang" class="form-select">
 							{{{each languages}}}
 							<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
 							{{{end}}}
@@ -140,8 +150,8 @@
 				<!-- IF isSelf -->
 				<label>[[user:acp_language]]</label>
 				<div class="row">
-					<div class="form-group col-lg-12">
-						<select data-property="acpLang" class="form-control">
+					<div class="mb-2 col-lg-12">
+						<select data-property="acpLang" class="form-select">
 							{{{each acpLanguages}}}
 							<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
 							{{{end}}}
@@ -153,20 +163,22 @@
 			</div>
 
 			<h4>[[topic:watch]]</h4>
-			<div class="well">
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/> <strong>[[user:follow_topics_you_create]]</strong>
-					</label>
-				</div>
-				<div class="checkbox">
-					<label>
-						<input type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/> <strong>[[user:follow_topics_you_reply_to]]</strong>
-					</label>
-				</div>
-				<div class="form-group">
+			<div class="card card-body mb-3">
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/>
+					<strong>
+						<label class="form-check-label">[[user:follow_topics_you_create]]</label>
+					</strong>
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/>
+					<strong>
+						 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
+					</strong>
+				</div>
+				<div class="mb-2">
 					<label>[[user:default-category-watch-state]]</label>
-					<select class="form-control" data-property="categoryWatchState">
+					<select class="form-select" data-property="categoryWatchState">
 						<option value="watching" <!-- IF categoryWatchState.watching -->selected<!-- ENDIF categoryWatchState.watching -->>[[category:watching]]</option>
 						<option value="notwatching" <!-- IF categoryWatchState.notwatching -->selected<!-- ENDIF categoryWatchState.notwatching -->>[[category:not-watching]]</option>
 						<option value="ignoring" <!-- IF categoryWatchState.ignoring -->selected<!-- ENDIF categoryWatchState.ignoring -->>[[category:ignoring]]</option>
@@ -176,14 +188,14 @@
 
 
 			<h4>[[user:notifications]]</h4>
-			<div class="well">
+			<div class="card card-body mb-3">
 				{{{each notificationSettings}}}
-				<div class="row">
-					<div class="col-xs-7">
+				<div class="row mb-3">
+					<div class="col-7">
 						<label>{notificationSettings.label}</label>
 					</div>
-					<div class="form-group col-xs-5">
-						<select class="form-control" data-property="{notificationSettings.name}">
+					<div class="mb-2 col-5">
+						<select class="form-select" data-property="{notificationSettings.name}">
 							<option value="none" <!-- IF notificationSettings.none -->selected<!-- ENDIF notificationSettings.none -->>[[notifications:none]]</option>
 							<option value="notification" <!-- IF notificationSettings.notification -->selected<!-- ENDIF notificationSettings.notification -->>[[notifications:notification_only]]</option>
 							<option value="email" <!-- IF notificationSettings.email -->selected<!-- ENDIF notificationSettings.email -->>[[notifications:email_only]]</option>
@@ -194,11 +206,11 @@
 				{{{end}}}
 
 				<div class="row">
-					<div class="col-xs-7">
+					<div class="col-7">
 						<label for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
 					</div>
-					<div class="form-group col-xs-5">
-						<select class="form-control" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
+					<div class="mb-2 col-5">
+						<select class="form-select" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
 							{{{each upvoteNotifFreq}}}
 							<option value="{upvoteNotifFreq.name}" <!-- IF upvoteNotifFreq.selected -->selected<!-- ENDIF upvoteNotifFreq.selected -->>
 								[[user:upvote-notif-freq.{upvoteNotifFreq.name}]]

package/templates/account/topics.tpl

@@ -4,12 +4,12 @@
 	<div class="row">
 		<h1>{title}</h1>
 		<!-- IF showSort -->
-		<div class="row clearfix">
-			<div class="pull-right btn-group bottom-sheet" component="thread/sort">
-				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
-				<ul class="dropdown-menu dropdown-menu-right">
+		<div class="btn-toolbar justify-content-end mb-2">
+			<div class="btn-group bottom-sheet" component="thread/sort">
+				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
+				<ul class="dropdown-menu dropdown-menu-end">
 					{{{each sortOptions }}}
-					<li><a href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
+					<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
 					{{{end}}}
 				</ul>
 			</div>

package/templates/account/uploads.tpl

@@ -13,7 +13,7 @@
 			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
 		<!-- ENDIF !uploads.length -->
 
-		<div class="col-xs-12">
+		<div class="col-12">
             <table class="table table-striped">
                 <thead>
                     <tr>
@@ -29,7 +29,7 @@
                         </td>
                         <td>
                             <div class="btn-group ">
-                                <button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-trash"></i></button>
+                                <button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
                             </div>
                         </td>
                     </tr>

package/templates/admin/plugins/persona.tpl

@@ -1,6 +1,6 @@
 <div class="row">
-	<div class="col-sm-2 col-xs-12 settings-header">Theme Settings</div>
-	<div class="col-sm-10 col-xs-12">	
+	<div class="col-sm-2 col-12 settings-header">Theme Settings</div>
+	<div class="col-sm-10 col-12">
 		<form role="form" class="persona-settings">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -23,7 +23,7 @@
 		</form>
 	</div>
 </div>
-	
+
 <button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
     <i class="material-icons">save</i>
 </button>

package/templates/category.tpl

@@ -8,24 +8,25 @@
 	<div class="category <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
 		<!-- IMPORT partials/category/subcategory.tpl -->
 
-		<div class="topic-list-header clearfix">
-			<!-- IF privileges.topics:create -->
-			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
-			<!-- ELSE -->
-				<!-- IF !loggedIn -->
-				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-				<!-- ENDIF !loggedIn -->
-			<!-- ENDIF privileges.topics:create -->
+		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 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>
+				<!-- ELSE -->
+					<!-- IF !loggedIn -->
+					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+					<!-- ENDIF !loggedIn -->
+				<!-- ENDIF privileges.topics:create -->
 
-			<a href="{url}" class="inline-block">
-				<div class="alert alert-warning hide" id="new-topics-alert"></div>
-			</a>
-
-			<span class="pull-right" component="category/controls">
+				<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
+					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+				</a>
+			</div>
+			<div class="d-flex gap-1 align-items-stretch">
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/category/sort.tpl -->
 				<!-- IMPORT partials/category/tools.tpl -->
-			</span>
+			</div>
 		</div>
 
 		<!-- IF !topics.length -->

package/templates/chat.tpl

@@ -1,18 +1,25 @@
-
-<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+<div id="chat-modal" class="chat-modal modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
 	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-				<button type="button" class="close hidden-xs hidden-sm" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
-				<button type="button" class="close hidden-xs hidden-sm" data-action="minimize"><span aria-hidden="true"><i class="fa fa-minus"></i></span><span class="sr-only">[[modules:chat.minimize]]</span></button>
+		<div class="modal-content" style="width: 600px;">
+			<div class="modal-header d-flex">
+				<div class="fs-5 flex-grow-1" component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></div>
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
+					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
+					<span class="sr-only">[[modules:chat.maximize]]</span>
+				</button>
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize">
+					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
+					<span class="sr-only">[[modules:chat.minimize]]</span>
+				</button>
 				<!-- IMPORT partials/chats/options.tpl -->
 
-				<h4 component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></h4>
+				<button id="chat-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 
 			<div class="modal-body">
-				<div component="chat/messages/scroll-up-alert" class="scroll-up-alert alert alert-info" role="button">[[modules:chat.scroll-up-alert]]</div>
+				<div class="position-relative">
+					<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button">[[modules:chat.scroll-up-alert]]</div>
+				</div>
 				<ul class="chat-content" component="chat/messages">
 					<!-- IMPORT partials/chats/messages.tpl -->
 				</ul>

package/templates/chats.tpl

@@ -1,10 +1,12 @@
 <div class="chats-full">
 	<div component="chat/nav-wrapper" data-loaded="<!-- IF roomId -->1<!-- ELSE -->0<!-- END -->">
 		<div class="chat-search dropdown">
-			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-toggle="dropdown" />
-			<ul component="chat/search/list" class="dropdown-menu"></ul>
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
+			<ul component="chat/search/list" class="dropdown-menu">
+				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+			</ul>
 		</div>
-		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
+		<ul component="chat/recent" class="chats-list list-unstyled" data-nextstart="{nextStart}">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}