Allow sorting of lower table on master keys page

Add some styling for sortable pretty2 tables to the CSS, and convert the
header row into a single row since that is all tablesorter seems to
support correctly when assigning styles.

Signed-off-by: Dan McGee <dan@archlinux.org>

2 files changed, 31 insertions, 9 deletions

diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css
index ac0dff52..a7fe6cac 100644
--- a/sitestatic/archweb.css
+++ b/sitestatic/archweb.css
@@ -258,6 +258,23 @@ table.pretty2 {
         border: 1px solid #bbb;
     }
 
+        /* additional styles for JS sorting */
+        table.pretty2 th.header {
+            padding-right: 20px;
+            background-image: url(nosort.gif);
+            background-repeat: no-repeat;
+            background-position: center right;
+            cursor: pointer;
+        }
+
+        table.pretty2 th.headerSortDown {
+            background-image: url(desc.gif);
+        }
+
+        table.pretty2 th.headerSortUp {
+            background-image: url(asc.gif);
+        }
+
     table.pretty2 td {
         padding: 0.35em;
         border: 1px dotted #bbb;
diff --git a/templates/public/keys.html b/templates/public/keys.html
index a7c91c43..05524c48 100644
--- a/templates/public/keys.html
+++ b/templates/public/keys.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% load static from staticfiles %}
 {% load pgp %}
 
 {% block title %}Arch Linux - Master Signing Keys{% endblock %}
@@ -66,17 +67,11 @@
     <table class="pretty2" id="key-status">
         <thead>
             <tr>
-                <th></th>
+                <th>Developer</th>
                 <th>PGP Key</th>
                 {% for key in keys %}
-                <th>{{ key.owner.get_full_name }}</th>
-                {% endfor %}
-            </tr>
-            <tr>
-                <th></th>
-                <th></th>
-                {% for key in keys %}
-                <th>{% pgp_key_link key.pgp_key %}</th>
+                <th>{{ key.owner.get_full_name }}<br/>
+                {% pgp_key_link key.pgp_key %}</th>
                 {% endfor %}
             </tr>
         </thead>
@@ -94,4 +89,14 @@
         </tbody>
     </table>
 </div>
+{% load cdn %}{% jquery %}
+<script type="text/javascript" src="{% static "jquery.tablesorter.min.js" %}"></script>
+<script type="text/javascript" src="{% static "archweb.js" %}"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+    $("#key-status").tablesorter({
+        headers: { 1: { sorter: false } }
+    });
+});
+</script>
 {% endblock %}