From 5a82ee04bc685e91997a16c5cd73346171ffb6ec Mon Sep 17 00:00:00 2001
From: rabuzarus <rabuzarus@t-online.de>
Date: Sun, 22 Apr 2018 20:23:24 +0200
Subject: [PATCH] frio - some work on the admin users template to be more
 consistant with other setting pages

---
 view/theme/frio/css/mod_admin.css             |   5 +-
 view/theme/frio/css/style.css                 |  19 +-
 view/theme/frio/js/mod_admin.js               |  28 +-
 .../frio/templates/admin/contactblock.tpl     |  32 +-
 view/theme/frio/templates/admin/users.tpl     | 538 ++++++++++--------
 5 files changed, 361 insertions(+), 261 deletions(-)

diff --git a/view/theme/frio/css/mod_admin.css b/view/theme/frio/css/mod_admin.css
index cbcd53453b..5199d5a55d 100644
--- a/view/theme/frio/css/mod_admin.css
+++ b/view/theme/frio/css/mod_admin.css
@@ -1,12 +1,13 @@
 
-#admin-users.adminpage { padding-left:0; padding-right: 0;}
 #admin-users.adminpage > h1 { padding: 0 15px; }
-
+#admin-users.adminpage .panel-collapse { margin-left: -15px; margin-right: -15px; }
 #admin-users td { word-break: break-all; }
 
 #admin-users #users th:first-of-type { width: 1em; }
 #admin-users #users th:nth-of-type(2) { width: 40px; }
 #admin-users #users th:last-of-type { width: 1em; }
+#admin-users td > .checkbox { margin: 0; }
+#admin-users .admin-settings-footer-elements { padding-left: 8px; padding-right: 8px; }
 
 #admin-users #deleted th:first-of-type { width: 40px; }
 
diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 35c577b5a8..1614547b85 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -2654,7 +2654,8 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     margin-left: -15px;
     margin-right: -15px;
 }
-.panel-group-settings > .panel {
+.panel-group-settings > .panel,
+.panel-group-settings > form > .panel {
     padding-left: 15px;
     padding-right: 15px;
 }
@@ -2939,6 +2940,22 @@ section.help-content-wrapper li {
 #adminpage .plugin .desc {
     padding-left: 10px;
 }
+.adminpage .admin-settings-action-link,
+.adminpage .admin-settings-action-link:hover {
+    color: #555;
+}
+.adminpage .admin-settings-action-link:hover {
+    opacity: 1;
+}
+.adminpage .admin-settings-action-link {
+    opacity: 0.8;
+}
+#admin-users tr.blocked {
+    background-color: #f8efc0;
+}
+.adminpage .table-hover > tbody > tr:hover + tr.details {
+    background-color: #f5f5f5;
+}
 
 /* Register Page*/
 #register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper {
diff --git a/view/theme/frio/js/mod_admin.js b/view/theme/frio/js/mod_admin.js
index dc8abe054b..188b480986 100644
--- a/view/theme/frio/js/mod_admin.js
+++ b/view/theme/frio/js/mod_admin.js
@@ -9,7 +9,9 @@ $(function() {
 		selectnone($(this).data('selectNone'));
 	});
 
-	$('body').on('change', 'input[type=checkbox].select', function() {
+	// Toggle checkbox status to all or none for all checkboxes of a specific
+	// css class.
+	$('body').on('change', 'input[type=checkbox].selecttoggle', function() {
 		$this = $(this);
 		if ($this.prop('checked')) {
 			selectall($this.data('selectClass'));
@@ -20,6 +22,26 @@ $(function() {
 		}
 	});
 
+	// Use AJAX calls to reorder the table (so we don't need to reload the page).
+	$('body').on('click', '.table-order', function(e) {
+		e.preventDefault();
+
+		// Get the parent table element.
+		var table = $(this).parents('table');
+		var orderUrl = this.getAttribute("data-order-url");
+		table.fadeTo("fast", 0.33);
+
+		$("body").css("cursor", "wait");
+
+		$.get(orderUrl, function(data) {
+			// Find the table element in the html we got.
+			var result = $(data).find('#' + table[0].id);
+			// And add the new table html to the parent.
+			$(table).parent().html(result);
+
+			$("body").css("cursor", "auto");
+		});
+	});
 
 	function selectall(cls) {
 		$('.' + cls).prop('checked', true);
@@ -39,7 +61,7 @@ function confirm_delete(msg, uname){
 }
 
 function details(uid) {
-	$("#user-"+uid+"-detail").toggleClass("hidden");
-	$("#user-"+uid).toggleClass("opened");
+	$("#user-" + uid + "-detail").toggleClass("hidden");
+	$("#user-" + uid).toggleClass("opened");
 	return false;
 }
diff --git a/view/theme/frio/templates/admin/contactblock.tpl b/view/theme/frio/templates/admin/contactblock.tpl
index f330854bc9..9c3f9165bc 100644
--- a/view/theme/frio/templates/admin/contactblock.tpl
+++ b/view/theme/frio/templates/admin/contactblock.tpl
@@ -3,35 +3,35 @@
 	<h1>{{$title}} - {{$page}}</h1>
 	<p>{{$description}}</p>
 	<form action="{{$baseurl}}/admin/contactblock" method="post">
-        <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
+		<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
 		<h3>{{$h_contacts}}</h3>
-	{{if $contacts}}
+		{{if $contacts}}
 		<table id="contactblock" class="table table-condensed table-striped">
 			<thead>
 				<tr>
-					<th><input type="checkbox" class="select contacts_ckbx" data-select-class="contacts_ckbx" data-select-all="{{$select_all}}"  data-select-none="{{$select_none}}" title="{{$select_all}}"/></th>
-						{{foreach $th_contacts as $th}}
-					<th>
-						{{$th}}
-					</th>
+					<th><input type="checkbox" class="selecttoggle contacts_ckbx" data-select-class="contacts_ckbx" data-select-all="{{$select_all}}"  data-select-none="{{$select_none}}" title="{{$select_all}}"/></th>
+					{{foreach $th_contacts as $th}}
+						<th>
+							{{$th}}
+						</th>
 					{{/foreach}}
 					<th></th>
 				</tr>
 			</thead>
 			<tbody>
 				{{foreach $contacts as $contact}}
-				<tr>
-					<td><input type="checkbox" class="contacts_ckbx" id="id_contact_{{$contact.id}}" name="contacts[]" value="{{$contact.id}}"/></td>
-					<td><img class="icon" src="{{$contact.micro}}" alt="{{$contact.nickname}}" title="{{$contact.addr}}"></td>
-					<td class="name">{{$contact.name}}</td>
-					<td class="addr" colspan="2"><a href="{{$contact.url}}" title="{{$contact.addr}}" >{{$contact.url}}</a></td>
-				</tr>
+					<tr>
+						<td><input type="checkbox" class="contacts_ckbx" id="id_contact_{{$contact.id}}" name="contacts[]" value="{{$contact.id}}"/></td>
+						<td><img class="icon" src="{{$contact.micro}}" alt="{{$contact.nickname}}" title="{{$contact.addr}}"></td>
+						<td class="name">{{$contact.name}}</td>
+						<td class="addr" colspan="2"><a href="{{$contact.url}}" title="{{$contact.addr}}" >{{$contact.url}}</a></td>
+					</tr>
 				{{/foreach}}
 			</tbody>
 			<tfoot>
 				<tr>
-					<td><input type="checkbox" class="select contacts_ckbx" data-select-class="contacts_ckbx" data-select-all="{{$select_all}}"  data-select-none="{{$select_none}}" title="{{$select_all}}"/></td>
+					<td><input type="checkbox" class="selecttoggle contacts_ckbx" data-select-class="contacts_ckbx" data-select-all="{{$select_all}}" data-select-none="{{$select_none}}" title="{{$select_all}}"/></td>
 					<td colspan="3">
 						{{$total_contacts}}
 					</td>
@@ -40,9 +40,9 @@
 		</table>
 		<div class="submit"><button type="submit" class="btn btn-small btn-default" name="page_contactblock_unblock" value="1">{{$unblock|escape:'html'}}</button></div>
 		{{$paginate}}
-	{{else}}
+		{{else}}
 		<p>{{$no_data|escape:'html'}}</p>
-	{{/if}}
+		{{/if}}
 	</form>
 
 	<h3>{{$h_newblock}}</h3>
diff --git a/view/theme/frio/templates/admin/users.tpl b/view/theme/frio/templates/admin/users.tpl
index 784d46b207..4d4d2a31ef 100644
--- a/view/theme/frio/templates/admin/users.tpl
+++ b/view/theme/frio/templates/admin/users.tpl
@@ -7,279 +7,339 @@
 	<form action="{{$baseurl}}/admin/users" method="post">
 		<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
+		{{* We organize the settings in collapsable panel-groups *}}
+		<div class="panel-group panel-group-settings" id="admin-settings" role="tablist" aria-multiselectable="true">
 
-		<!--
-			**
-			*
-			*		PENDING Users table
-			*
-			**
-		-->
-		<div class="panel panel-default">
-			<div class="panel-heading"><h3 class="panel-title">{{$h_pending}}</h3></div>
+			<!--
+				**
+				*
+				*		PENDING Users table
+				*
+				**
+			-->
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="admin-settings-pending">
+					<h4>
+						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-pending-collapse" aria-expanded="false" aria-controls="admin-settings-pending-collapse">
+							{{$h_pending}} ({{count($pending)}})
+						</a>
+					</h4>
+				</div>
 
-			{{if $pending}}
-				<table id="pending" class="table table-hover">
-					<thead>
-					<tr>
-						<th></th>
-						{{foreach $th_pending as $th}}<th>{{$th}}</th>{{/foreach}}
-						<th></th>
-					</tr>
-					</thead>
-					<tbody>
-				{{foreach $pending as $u}}
-					<tr>
-						<td><input type="checkbox" class="pending_ckbx" id="id_pending_{{$u.hash}}" name="pending[]" value="{{$u.hash}}" /></td>
-						<td>{{$u.created}}</td>
-						<td>{{$u.name}}</td>
-						<td>{{$u.email}}</td>
-						<td>
-							<a href="{{$baseurl}}/regmod/allow/{{$u.hash}}" title="{{$approve}}"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
-							<a href="{{$baseurl}}/regmod/deny/{{$u.hash}}" title="{{$deny}}"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
-						</td>
-					</tr>
-					<tr class="details">
-						<td></td>
-						<th>{{$pendingnotetext}}</th>
-						<td colspan="4">{{$u.note}}</td>
-					</tr>
-				{{/foreach}}
-					</tbody>
-				</table>
-				<div class="panel-footer">
-					<div class="row">
-						<div class="col-xs-3">
-							<div class="btn-group" role="group">
-								<button type="button" class="btn btn-default selectall" data-select-all="pending_ckbx"><i class="fa fa-check-square-o" aria-hidden="true"></i></button>
-								<button type="button" class="btn btn-default selectnone" data-select-none="pending_ckbx"><i class="fa fa-square-o" aria-hidden="true"></i></button>
+				<div id="admin-settings-pending-collapse" class="panel-collapse collapse {{if count($pending) > 0}}in{{/if}}" role="tabpanel" aria-labelledby="admin-settings-pending">
+					{{if $pending}}
+					<table id="pending" class="table table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								{{foreach $th_pending as $th}}<th>{{$th}}</th>{{/foreach}}
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+						{{foreach $pending as $u}}
+							<tr>
+								<td>
+									<div class="checkbox">
+										<input type="checkbox" class="pending_ckbx" id="id_pending_{{$u.hash}}" name="pending[]" value="{{$u.hash}}" />
+										<label for="id_pending_{{$u.hash}}"></label>
+									</div>
+								</td>
+								<td>{{$u.created}}</td>
+								<td>{{$u.name}}</td>
+								<td>{{$u.email}}</td>
+								<td>
+									<a href="{{$baseurl}}/regmod/allow/{{$u.hash}}" class="admin-settings-action-link" title="{{$approve}}"><i class="fa fa-check" aria-hidden="true"></i></a>
+									<a href="{{$baseurl}}/regmod/deny/{{$u.hash}}" class="admin-settings-action-link" title="{{$deny}}"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
+								</td>
+							</tr>
+							{{if $u.note}}
+							<tr class="details">
+								<td></td>
+								<th>{{$pendingnotetext}}</th>
+								<td colspan="4">{{$u.note}}</td>
+							</tr>
+							{{/if}}
+						{{/foreach}}
+						</tbody>
+					</table>
+					<div class="panel-footer">
+						<div class="row">
+							<div class="col-xs-3 admin-settings-footer-elements">
+								<div class="checkbox">
+									<input type="checkbox" id="admin-settings-pending-select" class="selecttoggle" data-select-class="pending_ckbx"/>
+									<label for="admin-settings-pending-select"></label>
+								</div>
+							</div>
+							<div class="col-xs-9 admin-settings-footer-elements text-right">
+								<button type="submit" name="page_users_deny" value="1" class="btn btn-primary">
+									<i class="fa fa-trash-o" aria-hidden="true"></i> {{$deny}}
+								</button>
+								<button type="submit" name="page_users_approve" value="1" class="btn btn-warinig">
+									<i class="fa fa-check" aria-hidden="true"></i> {{$approve}}
+								</button>
 							</div>
-						</div>
-						<div class="col-xs-9 text-right">
-							<button type="submit" name="page_users_deny" class="btn btn-primary"><i class="fa fa-thumbs-down" aria-hidden="true"></i> {{$deny}}</button>
-							<button type="submit" name="page_users_approve" class="btn btn-warinig"><i class="fa fa-thumbs-up" aria-hidden="true"></i> {{$approve}}</button>
 						</div>
 					</div>
+					{{else}}
+					<div class="panel-body text-center text-muted">{{$no_pending}}</div>
+					{{/if}}
+				</div>
+			</div>
+
+			<!--
+				**
+				*
+				*		USERS Table
+				*
+				**
+			-->
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="admin-settings-user">
+					<h4>
+						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-user-collapse" aria-expanded="false" aria-controls="admin-settings-user-collapse">
+							{{$h_users}} ({{count($th_users)}})
+						</a>
+					</h4>
 				</div>
-			{{else}}
-				<div class="panel-body text-center text-muted">{{$no_pending}}</div>
-			{{/if}}
-		</div>
 
-<!--
-	**
-	*
-	*		USERS Table
-	*
-	**
--->
-	<div class="panel panel-default">
-		<div class="panel-heading"><h3 class="panel-title">{{$h_users}}</h3></div>
-		{{if $users}}
+				<div id="admin-settings-user-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-user">
 
-			<table id="users" class="table table-hover">
-				<thead>
-				<tr>
-					<th></th>
-					<th></th>
-					{{foreach $th_users as $k=>$th}}
-					{{if $k < 2 || $order_users == $th.1 || ($k==5 && !in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1])) }}
-					<th class="th-{{$k}}">
-						<a href="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th.1}}">
-							{{if $order_users == $th.1}}
-								{{if $order_direction_users == "+"}}
-								&#8595;
+					{{if $users}}
+					<table id="users" class="table table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								<th></th>
+								{{foreach $th_users as $k=>$th}}
+									{{if $k < 2 || $order_users == $th.1 || ($k==5 && !in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1])) }}
+									<th class="th-{{$k}}">
+										<button type="button" data-order-url="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th.1}}" class="btn-link table-order">
+											{{if $order_users == $th.1}}
+												{{if $order_direction_users == "+"}}
+												&#8595;
+												{{else}}
+												&#8593;
+												{{/if}}
+											{{else}}
+											&#8597;
+											{{/if}}
+											{{$th.0}}
+										</button>
+									</th>
+									{{/if}}
+								{{/foreach}}
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+						{{foreach $users as $u}}
+							<tr id="user-{{$u.uid}}" class="{{if $u.blocked != 0}}blocked{{/if}}">
+								<td>
+								{{if $u.is_deletable}}
+								<div class="checkbox">
+									<input type="checkbox" class="users_ckbx" id="id_user_{{$u.uid}}" name="user[]" value="{{$u.uid}}"/>
+									<label for="id_user_{{$u.uid}}"></label>
+								</div>
 								{{else}}
-								&#8593;
+								&nbsp;
+								{{/if}}
+								</td>
+								<td><img class="avatar-nano" src="{{$u.micro}}" title="{{$u.nickname}}"></td>
+								<td><a href="{{$u.url}}" title="{{$u.nickname}}"> {{$u.name}}</a></td>
+								<td>{{$u.email}}</td>
+								{{if $order_users == $th_users.2.1}}
+								<td>{{$u.register_date}}</td>
 								{{/if}}
-							{{else}}
-								&#8597;
-							{{/if}}
-						{{$th.0}}</a>
-					</th>
-					{{/if}}
-					{{/foreach}}
-					<th></th>
-				</tr>
-				</thead>
-				<tbody>
-				{{foreach $users as $u}}
-					<tr id="user-{{$u.uid}}">
-						<td>
-						{{if $u.is_deletable}}
-							<input type="checkbox" class="users_ckbx" id="id_user_{{$u.uid}}" name="user[]" value="{{$u.uid}}"/>
-						{{else}}
-							&nbsp;
-						{{/if}}
-						</td>
-						<td><img class="avatar-nano" src="{{$u.micro}}" title="{{$u.nickname}}"></td>
-						<td><a href="{{$u.url}}" title="{{$u.nickname}}"> {{$u.name}}</a></td>
-						<td>{{$u.email}}</td>
-						{{if $order_users == $th_users.2.1}}
-						<td>{{$u.register_date}}</td>
-						{{/if}}
 
-						{{if $order_users == $th_users.3.1}}
-						<td>{{$u.login_date}}</td>
-						{{/if}}
+								{{if $order_users == $th_users.3.1}}
+								<td>{{$u.login_date}}</td>
+								{{/if}}
 
-						{{if $order_users == $th_users.4.1}}
-						<td>{{$u.lastitem_date}}</td>
-						{{/if}}
+								{{if $order_users == $th_users.4.1}}
+								<td>{{$u.lastitem_date}}</td>
+								{{/if}}
 
-						{{if !in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1]) }}
+								{{if !in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1]) }}
+								<td>
+									<i class="fa
+										{{if $u.page_flags_raw==0}}fa-user{{/if}}		{{* PAGE_NORMAL *}}
+										{{if $u.page_flags_raw==1}}fa-bullhorn{{/if}}		{{* PAGE_SOAPBOX *}}
+										{{if $u.page_flags_raw==2}}fa-users{{/if}}		{{* PAGE_COMMUNITY *}}
+										{{if $u.page_flags_raw==3}}fa-heart{{/if}}		{{* PAGE_FREELOVE *}}
+										{{if $u.page_flags_raw==4}}fa-rss{{/if}}		{{* PAGE_BLOG *}}
+										{{if $u.page_flags_raw==5}}fa-user-secret{{/if}}	{{* PAGE_PRVGROUP *}}
+										" title="{{$u.page_flags}}">
+									</i>
+									{{if $u.page_flags_raw==0 && $u.account_type_raw > 0}}
+									<i class="fa
+										{{if $u.account_type_raw==1}}fa-sitemap{{/if}}		{{* ACCOUNT_TYPE_ORGANISATION *}}
+										{{if $u.account_type_raw==2}}fa-newspaper-o{{/if}}	{{* ACCOUNT_TYPE_NEWS *}}
+										{{if $u.account_type_raw==3}}fa-comments{{/if}}		{{* ACCOUNT_TYPE_COMMUNITY *}}
+										" title="{{$u.account_type}}">
+									</i>
+									{{/if}}
+									{{if $u.is_admin}}<i class="fa fa-user-md text-primary" title="{{$siteadmin}}"></i>{{/if}}
+									{{if $u.account_expired}}<i class="fa fa-clock-o text-warning" title="{{$accountexpired}}"></i>{{/if}}
+								</td>
+								{{/if}}
 
-						<td>
-							<i class="fa
-								{{if $u.page_flags_raw==0}}fa-user{{/if}}					{{* PAGE_NORMAL *}}
-								{{if $u.page_flags_raw==1}}fa-bullhorn{{/if}}			{{* PAGE_SOAPBOX *}}
-								{{if $u.page_flags_raw==2}}fa-users{{/if}}				{{* PAGE_COMMUNITY *}}
-								{{if $u.page_flags_raw==3}}fa-heart{{/if}}				{{* PAGE_FREELOVE *}}
-								{{if $u.page_flags_raw==4}}fa-rss{{/if}}					{{* PAGE_BLOG *}}
-								{{if $u.page_flags_raw==5}}fa-user-secret{{/if}}	{{* PAGE_PRVGROUP *}}
-							" title="{{$u.page_flags}}"></i>
-							{{if $u.page_flags_raw==0 && $u.account_type_raw > 0}}
-							<i class="fa
-								{{if $u.account_type_raw==1}}fa-sitemap{{/if}}			{{* ACCOUNT_TYPE_ORGANISATION *}}
-								{{if $u.account_type_raw==2}}fa-newspaper-o{{/if}}	{{* ACCOUNT_TYPE_NEWS *}}
-								{{if $u.account_type_raw==3}}fa-comments{{/if}}			{{* ACCOUNT_TYPE_COMMUNITY *}}
-							" title="{{$u.account_type}}"></i>
-							{{/if}}
-							{{if $u.is_admin}}<i class="fa fa-user-md text-primary" title="{{$siteadmin}}"></i>{{/if}}
-							{{if $u.account_expired}}<i class="fa fa-clock-o text-warning" title="{{$accountexpired}}"></i>{{/if}}
-						</td>
-						{{/if}}
-						<td class="text-right">
-							<button type="button" class="btn-link" onclick="return details({{$u.uid}})"><span class="caret"></span></button>
-						</td>
-					</tr>
-					<tr id="user-{{$u.uid}}-detail" class="hidden details">
-						<td>&nbsp;</td>
-						<td colspan="4">
-							{{if $order_users != $th_users.2.1}}
-								<p><a href="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.2.1}}">
-									&#8597; {{$th_users.2.0}}</a> : {{$u.register_date}}</p>
-							{{/if}}
+								<td class="text-right">
+									<button type="button" class="btn-link admin-settings-action-link" onclick="return details({{$u.uid}})"><span class="caret"></span></button>
+								</td>
+							</tr>
+							<tr id="user-{{$u.uid}}-detail" class=" details hidden {{if $u.blocked != 0}}blocked{{/if}}">
+								<td>&nbsp;</td>
+								<td colspan="4">
+									{{if $order_users != $th_users.2.1}}
+									<p>
+										<button type="button" data-order-url="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.2.1}}" class="btn-link table-order">
+										&#8597; {{$th_users.2.0}}</button> : {{$u.register_date}}
+									</p>
+									{{/if}}
 
-							{{if $order_users != $th_users.3.1}}
-								<p><a href="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.3.1}}">
-										&#8597; {{$th_users.3.0}}</a> : {{$u.login_date}}</p>
-							{{/if}}
+									{{if $order_users != $th_users.3.1}}
+									<p>
+										<button type="button" data-order-url="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.3.1}}" class="btn-link table-order">
+											&#8597; {{$th_users.3.0}}</button> : {{$u.login_date}}
+									</p>
+									{{/if}}
 
-							{{if $order_users != $th_users.4.1}}
-								<p><a href="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.4.1}}">
-										&#8597; {{$th_users.4.0}}</a> : {{$u.lastitem_date}}</p>
-							{{/if}}
+									{{if $order_users != $th_users.4.1}}
+									<p>
+										<button type="button" data-order-url="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.4.1}}" class="btn-link table-order">
+											&#8597; {{$th_users.4.0}}</button> : {{$u.lastitem_date}}
+									</p>
+									{{/if}}
 
-							{{if in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1]) }}
-								<p><a href="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.5.1}}">
-										&#8597; {{$th_users.5.0}}</a> : {{$u.page_flags}}{{if $u.page_flags_raw==0 && $u.account_type_raw > 0}}, {{$u.account_type}}{{/if}} {{if $u.is_admin}}({{$siteadmin}}){{/if}} {{if $u.account_expired}}({{$accountexpired}}){{/if}}</p>
-							{{/if}}
+									{{if in_array($order_users,[$th_users.2.1, $th_users.3.1, $th_users.4.1]) }}
+									<p>
+										<button type="button" data-order-url="{{$baseurl}}/admin/users/?o={{if $order_direction_users == "+"}}-{{/if}}{{$th_users.5.1}}" class="btn-link table-order">
+											&#8597; {{$th_users.5.0}}</button> : {{$u.page_flags}}{{if $u.page_flags_raw==0 && $u.account_type_raw > 0}}, {{$u.account_type}}{{/if}} {{if $u.is_admin}}({{$siteadmin}}){{/if}} {{if $u.account_expired}}({{$accountexpired}}){{/if}}
+									</p>
+									{{/if}}
 
-						</td>
-						<td class="text-right">
-							{{if $u.is_deletable}}
-								<a href="{{$baseurl}}/admin/users/block/{{$u.uid}}?t={{$form_security_token}}" title="{{if $u.blocked}}{{$unblock}}{{else}}{{$block}}{{/if}}">
-									{{if $u.blocked==0}}
-									<i class="fa fa-ban" aria-hidden="true"></i>
+								</td>
+								<td class="text-right">
+									{{if $u.is_deletable}}
+									<a href="{{$baseurl}}/admin/users/block/{{$u.uid}}?t={{$form_security_token}}" class="admin-settings-action-link"title="{{if $u.blocked}}{{$unblock}}{{else}}{{$block}}{{/if}}">
+										{{if $u.blocked == 0}}
+										<i class="fa fa-ban" aria-hidden="true"></i>
+										{{else}}
+										<i class="fa fa-circle-o" aria-hidden="true"></i>
+										{{/if}}
+									</a>
+									<a href="{{$baseurl}}/admin/users/delete/{{$u.uid}}?t={{$form_security_token}}" class="admin-settings-action-link" title="{{$delete}}" onclick="return confirm_delete('{{$confirm_delete}}','{{$u.name}}')">
+										<i class="fa fa-trash" aria-hidden="true"></i>
+									</a>
 									{{else}}
-									<i class="fa fa-circle-o" aria-hidden="true"></i>
+									&nbsp;
 									{{/if}}
-								</a>
-								<a href="{{$baseurl}}/admin/users/delete/{{$u.uid}}?t={{$form_security_token}}" title="{{$delete}}" onclick="return confirm_delete('{{$confirm_delete}}','{{$u.name}}')"><i class="fa fa-trash" aria-hidden="true"></i></a>
-							{{else}}
-								&nbsp;
-							{{/if}}
-						</td>
-					</tr>
-				{{/foreach}}
-				</tbody>
-			</table>
-			<div class="panel-footer">
-				<div class="row">
-					<div class="col-xs-3">
-						<div class="btn-group" role="group">
-							<button type="button" class="btn btn-default selectall" data-select-all="users_ckbx"><i class="fa fa-check-square-o" aria-hidden="true"></i></button>
-							<button type="button" class="btn btn-default selectnone" data-select-none="users_ckbx"><i class="fa fa-square-o" aria-hidden="true"></i></button>
+								</td>
+							</tr>
+						{{/foreach}}
+						</tbody>
+					</table>
+					<div class="panel-footer">
+						<div class="row">
+							<div class="col-xs-3 admin-settings-footer-elements">
+								<div class="checkbox">
+									<input type="checkbox" id="admin-settings-users-select" class="selecttoggle" data-select-class="users_ckbx"/>
+									<label for="admin-settings-users-select"></label>
+								</div>
+							</div>
+							<div class="col-xs-9 admin-settings-footer-elements text-right">
+								<button type="submit" name="page_users_block" value="1" class="btn btn-warning">
+									<i class="fa fa-ban" aria-hidden="true"></i> {{$block}} / <i class="fa fa-circle-o" aria-hidden="true"></i> {{$unblock}}
+								</button>
+								<button type="submit" name="page_users_delete" value="1" class="btn btn-danger" onclick="return confirm_delete('{{$confirm_delete_multi}}')">
+									<i class="fa fa-trash" aria-hidden="true"></i> {{$delete}}
+								</button>
+							</div>
 						</div>
 					</div>
-					<div class="col-xs-9 text-right">
-							<button type="submit" name="page_users_block" class="btn btn-warning">	<i class="fa fa-ban" aria-hidden="true"></i> {{$block}} / <i class="fa fa-circle-o" aria-hidden="true"></i> {{$unblock}}</button>
-							<button type="submit" name="page_users_delete" class="btn btn-danger" onclick="return confirm_delete('{{$confirm_delete_multi}}')"><i class="fa fa-trash" aria-hidden="true"></i> {{$delete}}</button>
-					</div>
+					{{else}}
+					<div class="panel-body text-center bg-danger">NO USERS?!?</div>
+					{{/if}}
 				</div>
 			</div>
-		{{else}}
-			<div class="panel-body text-center bg-danger">NO USERS?!?</div>
-		{{/if}}
-		</div>
-
-
-
-	</form>
 
 
+			<!--
+				**
+				*
+				*		DELETED Users table
+				*
+				**
+			-->
+			{{if $deleted}}
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="admin-settings-deleted">
+					<h4>
+						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-deleted-collapse" aria-expanded="false" aria-controls="admin-settings-deleted-collapse">
+							{{$h_deleted}} ({{count($deleted)}})
+						</a>
+					</h4>
+				</div>
 
+				<div id="admin-settings-deleted-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-deleted">
+					<table id="deleted" class="table table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								{{foreach $th_deleted as $k=>$th}}
+									{{if in_array($k,[0,1,5])}}
+									<th>{{$th}}</th>
+									{{/if}}
+								{{/foreach}}
+							</tr>
+						</thead>
+						<tbody>
+						{{foreach $deleted as $u}}
+							<tr>
+								<td><img class="avatar-nano" src="{{$u.micro}}" title="{{$u.nickname}}"></td>
+								<td><a href="{{$u.url}}" title="{{$u.nickname}}" >{{$u.name}}</a></td>
+								<td>{{$u.email}}</td>
+								<td>{{$u.deleted}}</td>
+							</tr>
+						{{/foreach}}
+						</tbody>
+					</table>
+				</div>
+			</div>
+			{{/if}}
 
 
-<!--
-	**
-	*
-	*		DELETED Users table
-	*
-	**
--->
-	{{if $deleted}}
-	<div class="panel panel-default">
-		<div class="panel-heading"><h3 class="panel-title">{{$h_deleted}}</h3></div>
-		<table id="deleted" class="table table-hover">
-			<thead>
-			<tr>
-				<th></th>
-				{{foreach $th_deleted as $k=>$th}}
-					{{if in_array($k,[0,1,5])}}
-					<th>{{$th}}</th>
-					{{/if}}
-				{{/foreach}}
-			</tr>
-			</thead>
-			<tbody>
-			{{foreach $deleted as $u}}
-				<tr>
-					<td><img class="avatar-nano" src="{{$u.micro}}" title="{{$u.nickname}}"></td>
-					<td><a href="{{$u.url}}" title="{{$u.nickname}}" >{{$u.name}}</a></td>
-					<td>{{$u.email}}</td>
-					<td>{{$u.deleted}}</td>
-				</tr>
-			{{/foreach}}
-			</tbody>
-		</table>
-	</div>
-{{/if}}
 
+			<!--
+				**
+				*
+				*		NEW USER Form
+				*
+				**
+			-->
+			<div class="panel">
+				<div class="section-subtitle-wrapper" role="tab" id="admin-settings-new-user">
+					<h4>
+						<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-new-user-collapse" aria-expanded="false" aria-controls="admin-settings-new-user-collapse">
+							{{$h_newuser}}
+						</a>
+					</h4>
+				</div>
 
+				<div id="admin-settings-new-user-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-new-user">
+					<div class="panel-body">
+						{{include file="field_input.tpl" field=$newusername}}
+						{{include file="field_input.tpl" field=$newusernickname}}
+						{{include file="field_input.tpl" field=$newuseremail}}
+					</div>
+					<div class="panel-footer text-right">
+						<button type="submit" class="btn btn-primary">{{$submit}}</button>
+					</div>
 
-<!--
-	**
-	*
-	*		NEW USER Form
-	*
-	**
--->
-	<form action="{{$baseurl}}/admin/users" method="post">
-		<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
-		<div class="panel panel-default">
-			<div class="panel-heading"><h3 class="panel-title">{{$h_newuser}}</h3></div>
-			<div class="panel-body">
-				{{include file="field_input.tpl" field=$newusername}}
-				{{include file="field_input.tpl" field=$newusernickname}}
-				{{include file="field_input.tpl" field=$newuseremail}}
+				</div>
 			</div>
-			<div class="panel-footer text-right">
-				<button type="submit" class="btn btn-primary">{{$submit}}</button>
-			</form>
 		</div>
 	</form>
-
 </div>
-- 
2.39.5