nodebb-theme-persona 12.1.4 → 12.1.6

package/templates/partials/topics_list.tpl

@@ -7,71 +7,73 @@
 		<meta itemprop="position" content="{../index}" />
 		<a id="{../index}" data-index="{../index}" component="topic/anchor"></a>
 
-		<div class="col-md-6 col-sm-9 col-xs-10 content">
-			<div class="avatar pull-left">
+		<div class="col-md-6 col-sm-9 col-10 content">
+			<div class="avatar float-start me-2">
 				<!-- IF showSelect -->
 				<div class="select" component="topic/select">
 					{{{ if ./thumbs.length }}}
 					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
 					{{{ else }}}
-					{buildAvatar(../user, "46", true, "not-responsive")}
+					{buildAvatar(../user, "48px", true, "not-responsive")}
 					{{{ end }}}
 					<i class="fa fa-check"></i>
 				</div>
 				<!-- ENDIF showSelect -->
 
 				<!-- IF !showSelect -->
-				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="pull-left">
+				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="float-start">
 					{{{ if ./thumbs.length }}}
 					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
 					{{{ else }}}
-					{buildAvatar(../user, "46", true, "not-responsive")}
+					{buildAvatar(../user, "48px", true, "not-responsive")}
 					{{{ end }}}
 				</a>
 				<!-- ENDIF !showSelect -->
 			</div>
 
-			<h2 component="topic/header" class="title">
+			<h2 component="topic/header" class="title mb-1">
 				<i component="topic/scheduled" class="fa fa-clock-o <!-- IF !topics.scheduled -->hide<!-- ENDIF !topics.scheduled -->" title="[[topic:scheduled]]"></i>
 				<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF (topics.scheduled || !topics.pinned) -->hide<!-- ENDIF (topics.scheduled || !topics.pinned) -->" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
 				<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->" title="[[topic:locked]]"></i>
 				<i component="topic/moved" class="fa fa-arrow-circle-right <!-- IF !topics.oldCid -->hide<!-- ENDIF !topics.oldCid -->" title="[[topic:moved]]"></i>
 				{{{each topics.icons}}}{@value}{{{end}}}
 
-
 				<!-- IF !topics.noAnchor -->
-				<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->">{topics.title}</a><br />
+				<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->">{topics.title}</a>
 				<!-- ELSE -->
-				<span>{topics.title}</span><br />
+				<span>{topics.title}</span>
 				<!-- ENDIF !topics.noAnchor -->
-
+			</h2>
+			<div class="info">
 				<!-- IF !template.category -->
-				<small>
-					<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg" style="{function.generateCategoryBackground, topics.category}"><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
-				</small>
+				<div class="category-item d-inline-block">
+					{buildCategoryIcon(./category, "24px", "rounded-circle")}
+					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
+				</div>
+				&bull;
 				<!-- ENDIF !template.category -->
 
 				{{{ if topics.tags.length }}}
 				<span class="tag-list hidden-xs">
-					{{{each topics.tags}}}
-					<a href="{config.relative_path}/tags/{topics.tags.valueEncoded}"><span class="tag tag-item tag-class-{topics.tags.class}">{topics.tags.valueEscaped}</span></a>
-					{{{end}}}
-					<small>&bull;</small>
+					{{{ each ./tags }}}
+					<!-- IMPORT partials/topic/tag.tpl -->
+					{{{ end }}}
+					&bull;
 				</span>
 				{{{ end }}}
 
-				<small class="hidden-xs"><span class="timeago" title="{topics.timestampISO}"></span> &bull; <a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.displayname}</a></small>
-				<small class="visible-xs-inline">
+				<span class="hidden-xs"><span class="timeago text-muted" title="{topics.timestampISO}"></span> &bull; <a class="text-muted" href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.displayname}</a></span>
+				<span class="visible-xs-inline">
 					<!-- IF topics.teaser.timestamp -->
 					<span class="timeago" title="{topics.teaser.timestampISO}"></span>
 					<!-- ELSE -->
 					<span class="timeago" title="{topics.timestampISO}"></span>
 					<!-- ENDIF topics.teaser.timestamp -->
-				</small>
-			</h2>
+				</span>
+			</div>
 		</div>
 
-		<div class="mobile-stat col-xs-2 visible-xs text-right">
+		<div class="mobile-stat col-2 visible-xs text-end">
 			<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
 		</div>
 
@@ -93,7 +95,7 @@
 		</div>
 
 		<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
-			<div class="card background-link-container" style="border-color: {topics.category.bgColor}">
+			<div class="lastpost background-link-container" style="border-color: {topics.category.bgColor}">
 				<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
 				<!-- IF topics.unreplied -->
 				<p>
@@ -102,8 +104,8 @@
 				<!-- ELSE -->
 				<!-- IF topics.teaser.pid -->
 				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24", true, "not-responsive")}</a>
-					<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24px", true, "not-responsive")}</a>
+					<a class="permalink text-muted" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
 						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
 					</a>
 				</p>

package/templates/partials/users_list.tpl

@@ -1,14 +1,15 @@
+<ul id="users-container" class="users-container list-unstyled d-flex flex-wrap gap-2">
 {{{each users}}}
-<li class="users-box registered-user" data-uid="{users.uid}">
-	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "lg", true)}</a>
-	<br/>
-	<div class="user-info">
-		<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>
-		<br/>
+<li class="users-box registered-user text-center pb-3" data-uid="{users.uid}" style="width: 102px;">
+	<a href="{config.relative_path}/user/{users.userslug}">{buildAvatar(users, "64px", true)}</a>
 
+	<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>
+		</div>
 		<!-- IF section_online -->
 		<div class="lastonline">
 			<span class="timeago" title="{users.lastonlineISO}"></span>
@@ -43,4 +44,15 @@
 		<!-- ENDIF section_flagged -->
 	</div>
 </li>
-{{{end}}}
+{{{end}}}
+<!-- IF anonymousUserCount -->
+<li class="users-box anon-user text-center pb-3" style="width: 102px;">
+	<span class="avatar avatar-rounded text-bg-secondary" component="avatar/icon" style="--avatar-size: 64px;">G</span>
+	<br/>
+	<div class="user-info">
+		<span id="online_anon_count">{anonymousUserCount}</span>
+		<span>[[global:guests]]</span>
+	</div>
+</li>
+<!-- ENDIF anonymousUserCount -->
+</ul>

package/templates/partials/users_list_menu.tpl

@@ -1,11 +1,21 @@
 <ul class="nav nav-pills">
-	<li><a href="{config.relative_path}/users?section=online">[[global:online]]</a></li>
-	<li><a href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a></li>
-	<!-- IF !reputation:disabled -->
-	<li><a href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a></li>
-	<!-- ENDIF !reputation:disabled -->
-	<!-- IF isAdminOrGlobalMod -->
-	<li><a href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a></li>
-	<li><a href="{config.relative_path}/users?section=banned">[[user:banned]]</a></li>
-	<!-- ENDIF isAdminOrGlobalMod -->
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=online">[[global:online]]</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=sort-posts">[[users:top_posters]]</a>
+	</li>
+	{{{ if !reputation:disabled }}}
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=sort-reputation">[[users:most_reputation]]</a>
+	</li>
+	{{{ end }}}
+	{{{ if isAdminOrGlobalMod }}}
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=flagged">[[users:most_flags]]</a>
+	</li>
+	<li class="nav-item">
+		<a class="nav-link" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
+	</li>
+	{{{ end }}}
 </ul>

package/templates/popular.tpl

@@ -5,45 +5,19 @@
 	{{{end}}}
 </div>
 <div class="popular">
-	<div class="topic-list-header btn-toolbar">
-		<div class="pull-left">
-			<!-- IF canPost -->
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1 flex-nowrap">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if canPost }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			<!-- ELSE -->
+			{{{ else }}}
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			<!-- ENDIF canPost -->
+			{{{ end }}}
 		</div>
-
-		<div class="btn-group pull-right">
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/topic-terms.tpl -->
+		<!-- IMPORT partials/topic-filters.tpl -->
 		<!-- IMPORT partials/category-filter-right.tpl -->
-
-		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu" role="menu">
-				{{{each filters}}}
-				<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
-					<a role="menu-item" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw <!-- IF filters.selected -->fa-check<!-- ENDIF filters.selected -->"></i>{filters.name}</a>
-				</li>
-				{{{end}}}
-			</ul>
-		</div>
-
-		<div class="btn-group pull-right bottom-sheet <!-- IF !terms.length -->hidden<!-- ENDIF !terms.length -->">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-			{selectedTerm.name} <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu" role="menu">
-				{{{each terms}}}
-				<li role="presentation" class="category">
-					<a role="menu-item" href="{config.relative_path}/{terms.url}"><i class="fa fa-fw <!-- IF terms.selected -->fa-check<!-- ENDIF terms.selected -->"></i>{terms.name}</a>
-				</li>
-				{{{end}}}
-			</ul>
+		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 	</div>
 

package/templates/post-queue.tpl

@@ -1,65 +1,72 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
-<div class="btn-toolbar">
+<div class="btn-toolbar justify-content-end">
+	<div class="me-2">
 	<!-- IMPORT partials/category-filter-right.tpl -->
-
+	</div>
 	{{{ if !singlePost }}}
-	<div class="btn-group pull-right bottom-sheet" component="post-queue/bulk-actions">
-		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false">
+	<div class="btn-group bottom-sheet" component="post-queue/bulk-actions">
+		<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false">
 			<i class="fa fa-clone"></i> [[post-queue:bulk-actions]] <span class="caret"></span>
 		</button>
-		<ul class="dropdown-menu dropdown-menu-right">
-			<li><a href="#" data-action="accept-all">[[post-queue:accept-all]]</a></li>
-			<li><a href="#" data-action="accept-selected">[[post-queue:accept-selected]]</a></li>
-			<li class="divider"></li>
-			<li><a href="#" data-action="reject-all">[[post-queue:reject-all]]</a></li>
-			<li><a href="#" data-action="reject-selected">[[post-queue:reject-selected]]</a></li>
+		<ul class="dropdown-menu dropdown-menu-end">
+			<li><a class="dropdown-item" href="#" data-action="accept-all">[[post-queue:accept-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="accept-selected">[[post-queue:accept-selected]]</a></li>
+			<li class="dropdown-divider"></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-all">[[post-queue:reject-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-selected">[[post-queue:reject-selected]]</a></li>
 		</ul>
 	</div>
 	{{{ end }}}
 </div>
 <hr/>
 <div class="row">
-	<div class="col-xs-12">
+	<div class="col-12">
 		<div class="post-queue preventSlideout posts-list">
 			{{{ if !posts.length }}}
 			{{{ if isAdmin }}}
-			<p class="panel-body">
+			<div class="card card-body">
+				<p>
 				[[post-queue:description, {config.relative_path}/admin/settings/post#post-queue]]
-			</p>
+				</p>
+			</div>
 			{{{ end }}}
 			{{{ end }}}
 
 			{{{ each posts }}}
-			<div class="panel panel-default" data-id="{posts.id}">
-				<div class="panel-heading">
+			<div class="card mb-3" data-id="{posts.id}">
+				<div class="card-header">
 					{{{ if !singlePost }}}
-					<input type="checkbox" autocomplete="off" />
+					<input type="checkbox" class="form-check-input" autocomplete="off" />
 					{{{ end }}}
 					<strong>{{{ if posts.data.tid }}}[[post-queue:reply]]{{{ else }}}[[post-queue:topic]]{{{ end }}}</strong>
-					<span class="timeago pull-right" title={posts.data.timestampISO}></span>
+					<span class="timeago float-end" title={posts.data.timestampISO}></span>
 				</div>
-				<div class="panel-body">
-
+				<div class="card-body">
 					<div class="row">
-						<div class="col-lg-2 col-xs-12">
+						<div class="col-lg-2 col-12">
 							<strong>[[post-queue:user]]</strong>
 							<div>
 								{{{ if posts.user.userslug}}}
-								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24", true, "not-responsive")} {posts.user.username}</a>
+								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24px", true, "not-responsive")} {posts.user.username}</a>
 								{{{ else }}}
 								{posts.user.username}
 								{{{ end }}}
 							</div>
 						</div>
-						<div class="col-lg-3 col-xs-12">
-							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:category-editable]]"></i>{{{ end }}}</strong>
+						<div class="col-lg-3 col-12">
+							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:category-editable]]"></i>{{{ end }}}</strong>
 							<div class="topic-category" {{{if posts.data.cid}}}data-editable="editable"{{{end}}}">
-								<a href="{config.relative_path}/category/{posts.category.slug}"><!-- IF posts.category.icon --><span class="fa-stack"><i style="color: {posts.category.bgColor};" class="fa fa-circle fa-stack-2x"></i><i style="color: {posts.category.color};" class="fa fa-stack-1x fa-fw {posts.category.icon}"></i></span><!-- ENDIF posts.category.icon --> {posts.category.name}</a>
+								<a href="{config.relative_path}/category/{posts.category.slug}">
+									<div class="category-item d-inline-block">
+										{buildCategoryIcon(./category, "24px", "rounded-circle")}
+										{posts.category.name}
+									</div>
+								</a>
 							</div>
 						</div>
-						<div class="col-lg-7 col-xs-12">
-							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
-							<div class="topic-title">
+						<div class="col-lg-7 col-12">
+							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-title text-break">
 								{{{ if posts.data.tid }}}
 								<a href="{config.relative_path}/topic/{posts.data.tid}">{posts.topic.title}</a>
 								{{{ end }}}
@@ -74,21 +81,21 @@
 					</div>
 					<hr/>
 					<div>
-						<strong>[[post-queue:content]] <i class="fa fa-fw fa-edit" data-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
-						<div class="post-content">{posts.data.content}</div>
+						<strong>[[post-queue:content]] <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
+						<div class="post-content text-break">{posts.data.content}</div>
 						<div class="post-content-editable hidden">
-							<textarea class="form-control">{posts.data.rawContent}</textarea>
+							<textarea class="form-control w-100" style="height:300px;">{posts.data.rawContent}</textarea>
 						</div>
 					</div>
 				</div>
-				<div class="panel-footer text-right">
+				<div class="card-footer text-end">
 					<div>
 						{{{ if canAccept }}}
-						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
-						<button class="btn btn-info btn-xs" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
-						<button class="btn btn-success btn-xs" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
+						<button class="btn btn-danger btn-sm" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
+						<button class="btn btn-info btn-sm" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
+						<button class="btn btn-success btn-sm" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
 						{{{ else }}}
-						<button class="btn btn-danger btn-xs" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:remove]]</button>
+						<button class="btn btn-danger btn-sm" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:remove]]</button>
 						{{{ end }}}
 					</div>
 				</div>

package/templates/recent.tpl

@@ -5,35 +5,21 @@
 	{{{end}}}
 </div>
 <div class="recent">
-	<div class="topic-list-header btn-toolbar">
-		<div class="pull-left">
-			<!-- IF canPost -->
+	<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 gap-1 flex-nowrap">
+		<div class="d-flex gap-1 align-items-stretch">
+			{{{ if canPost }}}
 			<!-- IMPORT partials/buttons/newTopic.tpl -->
-			<!-- ELSE -->
+			{{{ else }}}
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
-			<!-- ENDIF canPost -->
-			<a href="{config.relative_path}/{selectedFilter.url}" class="inline-block">
-				<div class="alert alert-warning hide" id="new-topics-alert"></div>
+			{{{ end }}}
+			<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="btn-group pull-right">
-		<!-- IMPORT partials/category/tools.tpl -->
-		</div>
-
+		<div class="d-flex gap-1 align-items-stretch">
+		<!-- IMPORT partials/topic-filters.tpl -->
 		<!-- IMPORT partials/category-filter-right.tpl -->
-
-		<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu" role="menu">
-				{{{each filters}}}
-				<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
-					<a role="menu-item" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw <!-- IF filters.selected -->fa-check<!-- ENDIF filters.selected -->"></i>{filters.name}</a>
-				</li>
-				{{{end}}}
-			</ul>
+		<!-- IMPORT partials/category/tools.tpl -->
 		</div>
 	</div>
 

package/templates/register.tpl

@@ -13,45 +13,45 @@
 					<p>{error}</p>
 				</div>
 				<form component="register/local" class="form-horizontal" role="form" action="{config.relative_path}/register" method="post">
-					<div class="form-group">
-						<label for="username" class="col-lg-4 control-label">[[register:username]]</label>
-						<div class="col-lg-8">
+					<div class="row mb-3">
+						<label for="username" class="col-lg-2 col-form-label">[[register:username]]</label>
+						<div class="col-lg-10">
 							<input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" />
 							<span class="register-feedback" id="username-notify"></span>
-							<span class="help-block">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
+							<span class="form-text">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
 						</div>
 					</div>
-					<div class="form-group">
-						<label for="password" class="col-lg-4 control-label">[[register:password]]</label>
-						<div class="col-lg-8">
+					<div class="row mb-2">
+						<label for="password" class="col-lg-2 col-form-label">[[register:password]]</label>
+						<div class="col-lg-10">
 							<input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" />
 							<span class="register-feedback" id="password-notify"></span>
-							<span class="help-block">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
+							<span class="form-text">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
 							<p id="caps-lock-warning" class="text-danger hidden">
 								<i class="fa fa-exclamation-triangle"></i> [[login:caps-lock-enabled]]
 							</p>
 						</div>
 					</div>
-					<div class="form-group">
-						<label for="password-confirm" class="col-lg-4 control-label">[[register:confirm_password]]</label>
-						<div class="col-lg-8">
+					<div class="row mb-2">
+						<label for="password-confirm" class="col-lg-2 col-form-label">[[register:confirm_password]]</label>
+						<div class="col-lg-10">
 							<input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" />
 							<span class="register-feedback" id="password-confirm-notify"></span>
 						</div>
 					</div>
 
 					{{{each regFormEntry}}}
-					<div class="form-group">
-						<label for="register-{regFormEntry.styleName}" class="col-lg-4 control-label">{regFormEntry.label}</label>
-						<div id="register-{regFormEntry.styleName}" class="col-lg-8">
+					<div class="row mb-2">
+						<label for="register-{regFormEntry.styleName}" class="col-lg-2 col-form-label">{regFormEntry.label}</label>
+						<div id="register-{regFormEntry.styleName}" class="col-lg-10">
 							{{regFormEntry.html}}
 						</div>
 					</div>
 					{{{end}}}
 
-					<div class="form-group">
-						<div class="col-lg-offset-4 col-lg-8">
-							<button class="btn btn-primary btn-lg btn-block" id="register" type="submit">[[register:register_now_button]]</button>
+					<div class="row">
+						<div class="offset-lg-2 col-lg-10">
+							<button class="btn btn-primary btn-lg" id="register" type="submit">[[register:register_now_button]]</button>
 						</div>
 					</div>
 					<input id="token" type="hidden" name="token" value="" />

package/templates/registerComplete.tpl

@@ -1,7 +1,7 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="row">
-	<div class="col-xs-12 col-sm-8 col-sm-offset-2">
+	<div class="col-12 col-sm-8 offset-sm-2">
 		<p class="lead text-center">
 			{{{ if register }}}[[register:interstitial.intro-new]]{{{ else }}}[[register:interstitial.intro]]{{{ end }}}
 		</p>
@@ -24,9 +24,9 @@
 <form role="form" method="post" action="{config.relative_path}/register/complete/?_csrf={config.csrf_token}" enctype="multipart/form-data">
 	{{{each sections}}}
 	<div class="row">
-		<div class="col-xs-12 col-sm-8 col-sm-offset-2">
-			<div class="panel panel-default">
-				<div class="panel-body">
+		<div class="col-12 col-sm-8 offset-sm-2">
+			<div class="card">
+				<div class="card-body">
 					{@value}
 				</div>
 			</div>
@@ -34,14 +34,18 @@
 	</div>
 	{{{end}}}
 
-	<div class="row">
-		<div class="col-xs-12 col-sm-8 col-sm-offset-2">
-			<button class="btn btn-primary btn-block">[[topic:composer.submit]]</button>
+	<div class="row mt-3">
+		<div class="col-12 col-sm-8 offset-sm-2 d-grid">
+			<button class="btn btn-primary">[[topic:composer.submit]]</button>
 		</div>
 	</div>
 </form>
 <form role="form" method="post" action="{config.relative_path}/register/abort">
-	<p class="text-center">
-		<button class="btn btn-link">{{{ if register }}}[[register:cancel_registration]]{{{ else }}}[[modules:bootbox.cancel]]{{{ end }}}</button>
-	</p>
+	<div class="row mt-2">
+		<div class="col-12 col-sm-8 offset-sm-2 d-grid">
+			<p class="d-grid text-center">
+				<button class="btn btn-link">{{{ if register }}}[[register:cancel_registration]]{{{ else }}}[[modules:bootbox.cancel]]{{{ end }}}</button>
+			</p>
+		</div>
+	</div>
 </form>

package/templates/reset.tpl

@@ -5,7 +5,7 @@
 	[[reset_password:enter_email]]
 </div>
 
-<div class="well">
+<div class="card card-body bg-light">
 	<div class="alert alert-success hide" id="success">
 		<button type="button" class="close" data-dismiss="alert">&times;</button>
 		[[reset_password:password_reset_sent]]
@@ -15,9 +15,11 @@
 		[[reset_password:invalid_email]]
 	</div>
 	<form onsubmit="return false;">
-		<input type="text" class="form-control input-block input-lg" placeholder="[[reset_password:enter_email_address]]" id="email" />
-
-		<br />
-		<button class="btn btn-primary btn-block btn-lg" id="reset" type="submit">[[reset_password:reset_password]]</button>
+		<div class="mb-3">
+			<input type="email" class="form-control form-control-lg" id="email" placeholder="[[reset_password:enter_email_address]]" autocomplete="off">
+		</div>
+		<div class="d-grid">
+			<button class="btn btn-primary btn-lg" id="reset" type="submit">[[reset_password:reset_password]]</button>
+		</div>
 	</form>
 </div>

package/templates/reset_code.tpl

@@ -1,7 +1,7 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <!-- IF valid -->
-<div class="well">
+<div class="card card-body bg-light">
 	<!-- IF displayExpiryNotice -->
 	<div class="alert alert-warning">
 		[[reset_password:password_expired]]
@@ -18,24 +18,24 @@
 	</div>
 	<form onsubmit="return false;" id="reset-form" class="row">
 		<div class="col-sm-6">
-			<label for="password">[[reset_password:new_password]]</label>
+			<label class="form-label" for="password">[[reset_password:new_password]]</label>
 			<input class="form-control" type="password" placeholder="[[reset_password:new_password]]" id="password" /><br />
 		</div>
 		<div class="col-sm-6">
-			<label for="repeat">[[reset_password:repeat_password]]</label>
+			<label class="form-label" for="repeat">[[reset_password:repeat_password]]</label>
 			<input class="form-control" type="password" placeholder="[[reset_password:repeat_password]]" id="repeat" /><br />
 		</div>
-		<div class="col-xs-12">
+		<div class="col-12">
 			<button class="btn btn-primary btn-block" id="reset" type="submit">[[reset_password:reset_password]]</button>
 		</div>
 	</form>
 </div>
 <!-- ELSE -->
-<div class="panel panel-default panel-danger">
-	<div class="panel-heading">
-		<h3 class="panel-title">[[reset_password:wrong_reset_code.title]]</h3>
-	</div>
-	<div class="panel-body">
+<div class="card bg-danger">
+	<h5 class="card-header">
+		[[reset_password:wrong_reset_code.title]]
+	</h5>
+	<div class="card-body">
 		<p>[[reset_password:wrong_reset_code.message]]</p>
 	</div>
 </div>