nodebb-theme-persona 12.1.4 → 13.0.0

package/templates/flags/detail.tpl

@@ -1,20 +1,20 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="row">
-	<div class="col-sm-12">
+	<div class="col-12">
 		<h2 class="h4">
 			{target_readable}
-			<small><span class="timeago" title="{datetimeISO}"></span></small>
+			<small><span class="text-muted timeago" title="{datetimeISO}"></span></small>
 		</h2>
 
 		<hr />
 
 		<!-- IF type_bool.post -->
-		<div class="media">
-			<div class="media-left">
-				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "lg", false, "media-object")}</a>
+		<div class="d-flex">
+			<div class="flex-shrink-0">
+				<a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "64px", true, "media-object")}</a>
 			</div>
-			<div class="media-body">
+			<div class="flex-grow-1 ms-3">
 				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
 				{target.content}
 			</div>
@@ -22,11 +22,11 @@
 		<!-- ENDIF type_bool.post -->
 
 		<!-- IF type_bool.user -->
-		<div class="media">
-			<div class="media-left">
-				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "lg", false, "media-object")}</a>
+		<div class="d-flex">
+			<div class="flex-shrink-0">
+				<a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "64px", true, "media-object")}</a>
 			</div>
-			<div class="media-body">
+			<div class="flex-grow-1 ms-3">
 				<h4 class="media-heading"><a href="{config.relative_path}/user/{target.userslug}">{target.username}</a></h4>
 				<p class="lead">
 					<a href="{config.relative_path}/uid/{target.uid}">[[flags:user-view]]</a> |
@@ -37,7 +37,7 @@
 		<!-- ENDIF type_bool.user -->
 
 		<!-- IF type_bool.empty -->
-		<div class="alert alert-warning">[[flags:target-purged]]</div>
+		<div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
 		<!-- ENDIF type_bool.empty -->
 
 		<hr />
@@ -45,28 +45,28 @@
 		<div class="row">
 			<div class="col-sm-6">
 				<form role="form" id="attributes">
-					<div class="form-group">
+					<div class="mb-3">
 						<h2 class="h4">[[flags:reports]]</h2>
 						<ul class="list-group" component="flag/reports">
 							{{{ each reports }}}
 							<li class="list-group-item">
-								<a href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "sm", false)}</a>
+								<a href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
 								&ndash; <span class="timeago" title="{./timestampISO}"></span>
 								<blockquote><em>{./value}</em></blockquote>
 							</li>
 							{{{ end }}}
 						</ul>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<h2 class="h4" for="state">[[flags:state]]</h2>
-						<select class="form-control" id="state" name="state" disabled>
+						<select class="form-select" id="state" name="state" disabled>
 							<option value="open">[[flags:state-open]]</option>
 							<option value="wip">[[flags:state-wip]]</option>
 							<option value="resolved">[[flags:state-resolved]]</option>
 							<option value="rejected">[[flags:state-rejected]]</option>
 						</select>
 					</div>
-					<div class="form-group">
+					<div class="mb-3">
 						<h2 class="h4" for="assignee">[[flags:assignee]]</h2>
 						<select class="form-control" id="assignee" name="assignee" disabled>
 							<option value="">[[flags:no-assignee]]</option>
@@ -75,16 +75,20 @@
 							{{{end}}}
 						</select>
 					</div>
-					<button type="button" class="btn btn-block btn-primary" data-action="update">[[flags:update]]</button>
+					<div class="d-grid">
+						<button type="button" class="btn btn-primary" data-action="update">[[flags:update]]</button>
+					</div>
 				</form>
 
 				<hr />
 
 				<form role="form">
-					<div class="form-group">
+					<div class="mb-3">
 						<h2 class="h4" for="note">[[flags:notes]]</h2>
 						<textarea id="note" class="form-control"></textarea>
-						<button type="button" class="btn btn-block btn-primary" data-action="appendNote">[[flags:add-note]]</button>
+						<div class="d-grid">
+							<button type="button" class="btn btn-block btn-primary" data-action="appendNote">[[flags:add-note]]</button>
+						</div>
 					</div>
 				</form>
 
@@ -93,20 +97,20 @@
 					<div class="alert alert-success text-center">[[flags:no-notes]]</div>
 					<!-- ENDIF !notes.length -->
 					{{{each notes}}}
-					<div class="media" data-datetime="{../datetime}" data-index="{@index}">
-						<div class="media-left">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "md", false, "media-object")}</a>
+					<div class="d-flex mb-3">
+						<div class="flex-shrink-0">
+							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(notes.user, "32px", true, "media-object")}</a>
 						</div>
-						<div class="media-body">
-							<h4 class="media-heading">
+						<div class="flex-grow-1 mx-3">
+							<h2 class="h5">
 								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
 								<small><span class="timeago" title="{../datetimeISO}"></span></small>
 							</h4>
 							{../content}
 						</div>
-						<div class="media-right">
-							<a href="#" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
-							<a href="#" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
+						<div class="flex-shrink-0">
+							<a href="#" class="btn btn-sm btn-link" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
+							<a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
 						</div>
 					</div>
 					{{{end}}}
@@ -115,54 +119,56 @@
 			<div class="col-sm-6">
 				<h2 class="h4">[[flags:quick-actions]]</h2>
 
-				<a class="btn btn-default btn-block" href="{config.relative_path}/{type_path}/{targetId}">
-					<i class="fa fa-external-link"></i>
-					[[flags:go-to-target]]
-				</a>
-
-				<a class="btn btn-default btn-block" href="#" data-action="assign">
-					<i class="fa fa-id-card-o"></i>
-					[[flags:assign-to-me]]
-				</a>
-
-				{{{ if type_bool.post }}}
-				{{{ if !target.deleted}}}
-				<a class="btn btn-danger btn-block" href="#" data-action="delete-post"><i class="fa fa-trash"></i> [[flags:delete-post]]</a>
-				{{{ else }}}
-				<a class="btn btn-danger btn-block" href="#" data-action="purge-post"><i class="fa fa-trash"></i> [[flags:purge-post]]</a>
-				<a class="btn btn-success btn-block" href="#" data-action="restore-post"><i class="fa fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
-				{{{ end }}}
-				{{{ end }}}
-
-				{{{ if target.uid }}}
-				<div class="btn-group btn-block" data-uid="{target.uid}">
-					<button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						<i class="fa fa-street-view"></i>
-						[[flags:flagged-user]]
-						<span class="caret"></span>
-					</button>
-					<ul class="dropdown-menu">
-						<li><a href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
-						{{{ if !config.disableChat }}}
-							<li><a href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
-						{{{ end }}}
-						<li role="separator" class="divider"></li>
-						{{{ if privileges.ban }}}
-						<li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a href="#" data-action="ban">[[user:ban_account]]</a></li>
-						<li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a href="#" data-action="unban">[[user:unban_account]]</a></li>
-						{{{ end }}}
-						{{{ if privileges.mute}}}
-						<li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a href="#" data-action="mute">[[user:mute_account]]</a></li>
-						<li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a href="#" data-action="unmute">[[user:unmute_account]]</a></li>
-						{{{ end }}}
-						{{{ if privileges.admin:users }}}
-						<li><a href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
-						<li><a href="#" data-action="delete-content">[[user:delete_content]]</a></li>
-						<li><a href="#" data-action="delete-all">[[user:delete_all]]</a></li>
-						{{{ end }}}
-					</ul>
+				<div class="d-grid gap-1">
+					<a class="btn btn-light" href="{config.relative_path}/{type_path}/{targetId}">
+						<i class="fa fa-external-link"></i>
+						[[flags:go-to-target]]
+					</a>
+
+					<a class="btn btn-light" href="#" data-action="assign">
+						<i class="fa fa-id-card-o"></i>
+						[[flags:assign-to-me]]
+					</a>
+
+					{{{ if type_bool.post }}}
+					{{{ if !target.deleted}}}
+					<a class="btn btn-outline-danger" href="#" data-action="delete-post"><i class="fa fa-trash"></i> [[flags:delete-post]]</a>
+					{{{ else }}}
+					<a class="btn btn-danger" href="#" data-action="purge-post"><i class="fa fa-trash"></i> [[flags:purge-post]]</a>
+					<a class="btn btn-outline-success" href="#" data-action="restore-post"><i class="fa fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
+					{{{ end }}}
+					{{{ end }}}
+
+					{{{ if target.uid }}}
+					<div class="btn-group" data-uid="{target.uid}">
+						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="fa fa-street-view"></i>
+							[[flags:flagged-user]]
+							<span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu">
+							<li class="dropdown-item"><a href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
+							{{{ if !config.disableChat }}}
+								<li class="dropdown-item"><a href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
+							{{{ end }}}
+							<li><hr class="dropdown-divider"></li>
+							{{{ if privileges.ban }}}
+							<li class="dropdown-item" class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a href="#" data-action="ban">[[user:ban_account]]</a></li>
+							<li class="dropdown-item" class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a href="#" data-action="unban">[[user:unban_account]]</a></li>
+							{{{ end }}}
+							{{{ if privileges.mute}}}
+							<li class="dropdown-item" class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a href="#" data-action="mute">[[user:mute_account]]</a></li>
+							<li class="dropdown-item" class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a href="#" data-action="unmute">[[user:unmute_account]]</a></li>
+							{{{ end }}}
+							{{{ if privileges.admin:users }}}
+							<li class="dropdown-item"><a href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
+							<li class="dropdown-item"><a href="#" data-action="delete-content">[[user:delete_content]]</a></li>
+							<li class="dropdown-item"><a href="#" data-action="delete-all">[[user:delete_all]]</a></li>
+							{{{ end }}}
+						</ul>
+					</div>
+					{{{ end }}}
 				</div>
-				{{{ end }}}
 
 				<hr />
 
@@ -172,11 +178,11 @@
 					<div class="alert alert-success text-center">[[flags:no-history]]</div>
 					<!-- ENDIF !history.length -->
 					{{{each history}}}
-					<div class="media">
-						<div class="media-left">
-							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "md", false, "media-object")}</a>
+					<div class="d-flex">
+						<div class="flex-shrink-0">
+							<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(history.user, "32px", true, "media-object")}</a>
 						</div>
-						<div class="media-body">
+						<div class="flex-grow-1 ms-3">
 							<h4 class="media-heading">
 								<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
 								<small><span class="timeago" title="{../datetimeISO}"></span></small>
@@ -184,12 +190,12 @@
 							<ul>
 								{{{each ./fields}}}
 								<li>
-									<span class="label label-primary">[[flags:{@key}]]</span><!-- IF @value --> &rarr; <span class="label label-default">{@value}</span><!-- ENDIF @value -->
+									<span class="badge bg-primary">[[flags:{@key}]]</span><!-- IF @value --> &rarr; <span class="badge bg-light text-dark">{@value}</span><!-- ENDIF @value -->
 								</li>
 								{{{end}}}
 								{{{ each ./meta }}}
 								<li>
-									<span class="label label-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="label label-default">{{ ./value }}</span>{{{ end }}}
+									<span class="badge bg-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="badge bg-light text-dark">{{ ./value }}</span>{{{ end }}}
 								</li>
 								{{{ end }}}
 							</ul>

package/templates/flags/list.tpl

@@ -7,15 +7,15 @@
 	<div class="col-sm-8 col-md-9">
 		<!-- IF hasFilter -->
 		<div class="alert alert-warning">
-			<p class="pull-right">
+			<p class="float-end">
 				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
 			</p>
 			[[flags:filter-active]]
 		</div>
 		<!-- ENDIF hasFilter -->
 
-		<div class="btn-group pull-right" component="flags/bulk-actions">
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
+		<div class="btn-group float-end" component="flags/bulk-actions">
+			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
 				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
 			</button>
 			<ul class="dropdown-menu">
@@ -60,7 +60,7 @@
 						{./heat}
 					</td>
 					<td><span class="timeago" title="{../datetimeISO}"></span></td>
-					<td><span class="label label-{../labelClass}">[[flags:state-{../state}]]</span></td>
+					<td><span class="badge bg-{../labelClass}">[[flags:state-{../state}]]</span></td>
 				</tr>
 				{{{end}}}
 			</tbody>

package/templates/footer.tpl

@@ -3,7 +3,7 @@
 	<!-- IF !isSpider -->
 	<div component="toaster/tray" class="alert-window">
 		<div id="reconnect-alert" class="alert alert-dismissable alert-warning clearfix hide" component="toaster/toast">
-			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+			<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
 			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
 		</div>
 	</div>

package/templates/groups/details.tpl

@@ -11,252 +11,57 @@
 		<!-- ENDIF group.isOwner -->
 	</div>
 
-	<div class="col-xs-12">
+	<div class="col-12">
 		<!-- IMPORT partials/breadcrumbs.tpl -->
 	</div>
 
-	<div class="col-lg-4 col-xs-12">
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h3 class="panel-title">
+	<div class="col-lg-4 col-12">
+		<div class="card mb-3">
+			<div class="card-header">
+				<span class="fs-5">
 					<i class="fa fa-list-ul"></i> [[groups:details.title]]
-					<!-- IF group.private --><span class="label label-info">[[groups:details.private]]</span><!-- ENDIF group.private -->
-					<!-- IF group.hidden --><span class="label label-info">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
-				</h3>
+					<!-- IF group.private --><span class="badge bg-info text-dark">[[groups:details.private]]</span><!-- ENDIF group.private -->
+					<!-- IF group.hidden --><span class="badge bg-info text-dark">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
+				</span>
 			</div>
-			<div class="panel-body">
-				<h1>{group.displayName}</h1>
+			<div class="card-body">
+				<h2>{group.displayName}</h2>
 				<p>{group.descriptionParsed}</p>
 				<!-- IF isAdmin -->
-				<div class="pull-right">
+				<div class="float-end">
 					<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-info"><i class="fa fa-gear"></i> [[user:edit]]</a>
 				</div>
 				<!-- ENDIF isAdmin -->
 				<!-- IF loggedIn -->
-				<div class="pull-right">
+				<div class="float-end">
 					{function.membershipBtn, group}&nbsp;
 				</div>
 				<!-- ENDIF loggedIn -->
 			</div>
 		</div>
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h3 class="panel-title"><i class="fa fa-users"></i> [[groups:details.members]]</h3>
+
+		<div class="card mb-3">
+			<div class="card-header">
+				<span class="fs-5">
+					<i class="fa fa-users"></i> [[groups:details.members]]
+				</span>
 			</div>
-			<div class="panel-body">
+			<div class="card-body">
 				<!-- IMPORT partials/groups/memberlist.tpl -->
 			</div>
 		</div>
-		<!-- IF group.isOwner -->
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h3 class="panel-title clearfix">
-					<i class="fa fa-clock-o"></i> [[groups:details.pending]]
-					<!-- IF group.pending.length -->
-					<div class="btn-group pull-right">
-						<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-							[[global:more]] <span class="caret"></span>
-						</button>
-						<ul class="dropdown-menu" role="menu">
-							<li><a href="#" data-ajaxify="false" data-action="acceptAll">[[groups:pending.accept_all]]</a></li>
-							<li><a href="#" data-ajaxify="false" data-action="rejectAll">[[groups:pending.reject_all]]</a></li>
-						</ul>
-					</div>
-					<!-- ENDIF group.pending.length -->
-				</h3>
-			</div>
-			<div class="panel-body">
-				<table component="groups/pending" class="table table-striped table-hover">
-					<!-- IF !group.pending.length -->
-					<div class="alert alert-info">[[groups:pending.none]]</div>
-					<!-- ENDIF !group.pending.length -->
-					{{{each group.pending}}}
-					<tr data-uid="{group.pending.uid}">
-						<td>
-							<a href="{config.relative_path}/user/{group.pending.userslug}">{buildAvatar(group.pending, "sm", true)}</a>
-						</td>
-						<td class="member-name">
-							<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
-						</td>
-						<td>
-							<div class="btn-group pull-right">
-								<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-									[[global:more]] <span class="caret"></span>
-								</button>
-								<ul class="dropdown-menu" role="menu">
-									<li><a href="#" data-ajaxify="false" data-action="accept">[[groups:pending.accept]]</a></li>
-									<li><a href="#" data-ajaxify="false" data-action="reject">[[groups:pending.reject]]</a></li>
-								</ul>
-							</div>
-						</td>
-					</tr>
-					{{{end}}}
-				</table>
-			</div>
-		</div>
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<h3 class="panel-title clearfix">
-					<i class="fa fa-gift"></i> [[groups:details.invited]]
-				</h3>
-			</div>
-			<div class="panel-body">
-				<div class="input-group">
-					<input class="form-control" type="text" component="groups/members/invite" placeholder="[[groups:invited.search]]"/>
-					<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
-				</div>
-
-				<div class="form-group">
-					<textarea class="form-control" component="groups/members/bulk-invite" placeholder="[[groups:bulk-invite-instructions]]"></textarea>
-				</div>
-
-				<div class="form-group clearfix">
-					<button class="btn btn-default btn-sm pull-right" component="groups/members/bulk-invite-button">[[groups:bulk-invite]]</button>
-				</div>
-
-				<table component="groups/invited" class="table table-striped table-hover">
-					<!-- IF !group.invited.length -->
-					<div class="alert alert-info">[[groups:invited.none]]</div>
-					<!-- ENDIF !group.invited.length -->
-					{{{each group.invited}}}
-					<tr data-uid="{group.invited.uid}">
-						<td>
-							<a href="{config.relative_path}/user/{group.invited.userslug}">{buildAvatar(group.invited, "sm", true)}</a>
-						</td>
-						<td class="member-name">
-							<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
-						</td>
-						<td>
-							<div class="btn-group pull-right">
-								<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-									[[global:more]] <span class="caret"></span>
-								</button>
-								<ul class="dropdown-menu" role="menu">
-									<li><a href="#" data-ajaxify="false" data-action="rescindInvite">[[groups:invited.uninvite]]</a></li>
-								</ul>
-							</div>
-						</td>
-					</tr>
-					{{{end}}}
-				</table>
-			</div>
-		</div>
 
-		<div class="panel panel-default">
-			<div class="panel-heading pointer" data-toggle="collapse" data-target=".options">
-				<h3 class="panel-title">
-					<i class="fa fa-caret-down pull-right"></i>
-					<i class="fa fa-cogs"></i> [[groups:details.owner_options]]
-				</h3>
-			</div>
-
-			<div class="panel-body options collapse">
-				<form component="groups/settings" role="form">
-					<div class="form-group">
-						<label for="name">[[groups:details.group_name]]</label>
-						<input <!-- IF group.system -->readonly<!-- ENDIF group.system --> class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
-					</div>
-					<div class="form-group">
-						<label for="name">[[groups:details.description]]</label>
-						<textarea class="form-control" name="description" id="description" type="text" maxlength="255">{group.description}</textarea>
-					</div>
-
-					<hr />
-					<div class="form-group">
-						<label for="memberPostCids">[[groups:details.member-post-cids]]</label>
-						<div class="row">
-							<div class="col-md-6">
-								<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
-							</div>
-							<div class="col-md-6 member-post-cids-selector">
-								<!-- IMPORT partials/category-selector.tpl -->
-							</div>
-						</div>
-					</div>
-
-					<hr />
-
-					<div class="form-group user-title-option">
-						<label for="userTitle">[[groups:details.badge_text]]</label>
-						<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitleEscaped}"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled --> />
-					</div>
-
-					<div class="form-group user-title-option">
-						<label>[[groups:details.badge_preview]]</label><br />
-						<span class="label<!-- IF !group.userTitleEnabled --> hide<!-- ENDIF !group.userTitleEnabled -->" style="color: {group.textColor}; background-color: {group.labelColor}"><i class="fa<!-- IF group.icon --> {group.icon}<!-- ENDIF group.icon -->"></i> <span class="label-text"><!-- IF group.userTitle -->{group.userTitle}<!-- ELSE -->{group.displayName}<!-- ENDIF group.userTitle --></span></span>
-
-						<hr/>
-						<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="icon-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_icon]]</button>
-						<div>
-							<label for="labelColor" class="badge-color-label">[[groups:details.change_label_colour]]</label>
-							<input component="groups/userTitleOption" type="color" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
-						</div>
-						<div>
-							<label for="color" class="badge-color-label">[[groups:details.change_text_colour]]</label>
-							<input component="groups/userTitleOption" type="color" name="textColor" value="<!-- IF group.textColor -->{group.textColor}<!-- ENDIF group.textColor -->" />
-						</div>
-						<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
-
-						<div id="icons" class="hidden">
-							<div class="icon-container">
-								<div class="row fa-icons">
-									<i class="fa fa-doesnt-exist"></i>
-									<!-- IMPORT partials/fontawesome.tpl -->
-								</div>
-							</div>
-						</div>
-					</div>
-					<hr />
-					<div class="checkbox">
-						<label>
-							<input name="userTitleEnabled" type="checkbox"<!-- IF group.userTitleEnabled --> checked<!-- ENDIF group.userTitleEnabled -->> <strong>[[groups:details.userTitleEnabled]]</strong>
-						</label>
-					</div>
-					<div class="checkbox">
-						<label>
-							<input name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->> <strong>[[groups:details.private]]</strong>
-							<!-- IF !allowPrivateGroups -->
-							<p class="help-block">
-								[[groups:details.private_system_help]]
-							</p>
-							<!-- ENDIF !allowPrivateGroups -->
-							<p class="help-block">
-								[[groups:details.private_help]]
-							</p>
-						</label>
-					</div>
-					<div class="checkbox">
-						<label>
-							<input name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->> <strong>[[groups:details.disableJoinRequests]]</strong>
-						</label>
-					</div>
-					<div class="checkbox">
-						<label>
-							<input name="disableLeave" type="checkbox"{{{if group.disableLeave}}} checked{{{end}}}> <strong>[[groups:details.disableLeave]]</strong>
-						</label>
-					</div>
-					<div class="checkbox">
-						<label>
-							<input name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->> <strong>[[groups:details.hidden]]</strong>
-							<p class="help-block">
-								[[groups:details.hidden_help]]
-							</p>
-						</label>
-					</div>
-
-					<button class="btn btn-link btn-xs pull-right" type="button" data-action="delete">[[groups:details.delete_group]]</button>
-					<button class="btn btn-primary" type="button" data-action="update">[[global:save_changes]]</button>
-				</form>
-			</div>
-		</div>
+		<!-- IF group.isOwner -->
+		<!-- IMPORT partials/groups/admin.tpl -->
 		<!-- ENDIF group.isOwner -->
+
 		<div data-widget-area="left">
 			{{{each widgets.left}}}
 			{{widgets.left.html}}
 			{{{end}}}
 		</div>
 	</div>
-	<div class="col-lg-8 col-xs-12">
+	<div class="col-lg-8 col-12">
 		<div class="col-lg-11">
 			<!-- IF !posts.length -->
 			<div class="alert alert-info">[[groups:details.has_no_posts]]</div>

package/templates/groups/list.tpl

@@ -5,25 +5,27 @@
 	{{{end}}}
 </div>
 <div class="groups list">
-	<div class="row">
-		<div class="col-lg-4">
+	<div class="row justify-content-between">
+		<div class="col-lg-6">
 			<!-- IF allowGroupCreation -->
 			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
 			<!-- ENDIF allowGroupCreation -->
 		</div>
-		<div class="col-lg-8">
-			<div class="row">
-				<div class="col-xs-5 col-md-3 text-left pull-right">
-					<select class="form-control" id="search-sort">
+		<div class="col-lg-6">
+			<div class="row justify-content-end">
+				<div class="col-5 col-md-6">
+					<select class="form-select" id="search-sort">
 						<option value="alpha">[[groups:details.group_name]]</option>
 						<option value="count">[[groups:details.member_count]]</option>
 						<option value="date">[[groups:details.creation_date]]</option>
 					</select>
 				</div>
-				<div class="col-xs-7 col-md-5 text-left pull-right">
+				<div class="col-7 col-md-6">
 					<div class="input-group">
 						<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
-						<span id="search-button" class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+						<button id="search-button" class="btn btn-primary">
+							<i class="fa fa-search"></i>
+						</button>
 					</div>
 				</div>
 			</div>
@@ -36,7 +38,7 @@
 		<!-- IF groups.length -->
 		<!-- IMPORT partials/groups/list.tpl -->
 		<!-- ELSE -->
-		<div class="col-xs-12">
+		<div class="col-12">
 			<div class="alert alert-warning">
 			[[groups:no_groups_found]]
 			</div>