admin panel

static/buckler.css

@@ -3,6 +3,7 @@ body {
 	margin-right: 10%;
 	background-color: lightgray;
 	font-family: Helvetica,sans-serif;
+	font-size: 14px;
 }
 
 header {
@@ -29,12 +30,21 @@ main section {
 				0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-h2 {
+.sub_section {
+	box-shadow: none;
+	border: 1px solid lightgray;
+}
+
+h2, h3 {
 	font-size: 16px;
 	margin: 0;
 	cursor: pointer;
 }
 
+h3 {
+	font-size: 14px;
+}
+
 #avail_sites {
 	margin: 0;
 	padding-left: 1em;

static/buckler.js

@@ -1,5 +1,10 @@
 function load() {
 	let headers = document.querySelectorAll('h2');
+	headers = Array.prototype.slice.call(headers);
+	let headers3 = document.querySelectorAll('h3');
+	headers3 = Array.prototype.slice.call(headers3);
+	headers = headers.concat(headers3);
+
 	headers.forEach(function(header) {
 		header.addEventListener('click', function() {
 			let article = this.nextElementSibling;

templates/index.html

@@ -30,31 +30,36 @@
 			</section>
 			{% if request['session']['admin'] %}
 			<section>
-				<h2>User Permissions</h2>
+				<h2>Admin Panel</h2>
 				<article style="display: none;">
-					<hr>
-					<table id="users">
-						<thead>
-							<tr>
-								<th>User</th>
-								{% for app in apps %}
-								<th>{{ app['name'] }}</th>
-								{% endfor %}
-								<th></th>
-							</tr>
-						</thead>
-						<tbody>
-							{% for username, values in users.items() %}
-							<tr>
-								<td>{{ username }}</td>
-								{% for name, value in values.items() %}
-								<td><input aria-label="{{ username }}-{{ name }}" data-app-name={{ name }} type="checkbox" onchange="perm_change(this.parentElement.parentElement)"{% if value %} checked{% endif %}></td>
-								{% endfor %}
-								<td><input type="submit"></td>
-							</tr>
-							{% endfor %}
-						</tbody>
-					</table>
+					<section class="sub_section">
+						<h3>User Permissions</h3>
+						<article style="display: none;">
+							<hr>
+							<table id="users">
+								<thead>
+									<tr>
+										<th>User</th>
+										{% for app in apps %}
+										<th>{{ app['name'] }}</th>
+										{% endfor %}
+										<th></th>
+									</tr>
+								</thead>
+								<tbody>
+									{% for username, values in users.items() %}
+									<tr>
+										<td>{{ username }}</td>
+										{% for name, value in values.items() %}
+										<td><input aria-label="{{ username }}-{{ name }}" data-app-name={{ name }} type="checkbox" onchange="perm_change(this.parentElement.parentElement)"{% if value %} checked{% endif %}></td>
+										{% endfor %}
+										<td><input type="submit"></td>
+									</tr>
+									{% endfor %}
+								</tbody>
+							</table>
+						</article>
+					</section>
 				</article>
 			</section>
 			{% endif %}