Make public todolist view more usefulrelease_2010-08-27

Show all the details the developer page does, make the lists always visible,
and add JS table sorting to each table on the page. This commit also adds
table sorting to the developer list view as well.

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

4 files changed, 44 insertions, 23 deletions

diff --git a/media/archweb.css b/media/archweb.css
index e5753110..247bb00d 100644
--- a/media/archweb.css
+++ b/media/archweb.css
@@ -241,21 +241,16 @@ div.dash-stats h3 { color: #07b; }
 
 /* read only (public) todo lists */
 #public_todo_lists .todo_list {
-    display: none;
     margin-left: 2em;
 }
-#public_todo_lists h4 {
-    color: #07b;
-    cursor: pointer;
-}
 
 /* dev dashboard: admin actions (add news items, todo list, etc) */
 ul.admin-actions { float: right; list-style: none; margin-top: -2.5em; }
 ul.admin-actions li { display: inline; padding-left: 1.5em; }
 
 /* dev: todo list */
-#dev-todo .complete, #dev-todo-details .complete { color: green; }
-#dev-todo .incomplete, #dev-todo-details .incomplete { color: red; }
+.todo-table .complete { color: green; }
+.todo-table .incomplete { color: red; }
 
 /* dev: signoff page */
 #dev-signoffs ul { list-style: none; margin: 0; padding: 0; }
diff --git a/templates/todolists/list.html b/templates/todolists/list.html
index 3b2f75c2..29829caa 100644
--- a/templates/todolists/list.html
+++ b/templates/todolists/list.html
@@ -13,7 +13,7 @@
     </ul>
     {% endif %}
 
-    <table id="dev-todo-lists" class="results">
+    <table id="dev-todo-lists" class="results todo-table">
         <thead>
             <tr>
                 <th>Name</th>
diff --git a/templates/todolists/public_list.html b/templates/todolists/public_list.html
index 72841200..fe5ffb5d 100644
--- a/templates/todolists/public_list.html
+++ b/templates/todolists/public_list.html
@@ -9,22 +9,46 @@
         {% for list in todo_lists %}
             <h4>{{list.name}}</h4>
             <div class="todo_list">
-                <p>{{list.description|safe}}</p>
-                <ul>
-                    {% for pkg in list.packages %}
-                        <li>{{pkg.pkg.pkgname}}</li>
-                    {% endfor %}
-                </ul>
+                <p>{{list.description|safe|linebreaks}}</p>
+                <table "todo-pkglist-{{ list.id }}" class="results todo-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Arch</th>
+                            <th>Repo</th>
+                            <th>Maintainer</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for pkg in list.packages %}
+                        <tr class="{% cycle 'odd' 'even' %}">
+                            <td><a href="{{ pkg.pkg.get_absolute_url }}"
+                                    title="View package details for {{ pkg.pkg.pkgname }}">{{ pkg.pkg.pkgname }}</a></td>
+                            <td>{{ pkg.pkg.arch.name }}</td>
+                            <td>{{ pkg.pkg.repo.name|capfirst }}</td>
+                            <td>{{ pkg.pkg.maintainers|join:', ' }}</td>
+                            <td>
+                                {% if pkg.complete %}
+                                <span class="complete">Complete</a>
+                                {% else %}
+                                <span class="incomplete">Incomplete</a>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
             </div>
         {% endfor %}
     </div>
 </div>
 {% load cdn %}{% jquery %}
+<script type="text/javascript" src="/media/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">
-    $("#public_todo_lists h4").click(
-            function(e) {
-                $(this).next().toggle();
-            }
-    );
+$(document).ready(function() {
+    $(".results").tablesorter({widgets: ['zebra'], sortList: [[0,0], [1,0]]});
+});
+
 </script>
 {% endblock %}
diff --git a/templates/todolists/view.html b/templates/todolists/view.html
index 1c253921..b5f9a320 100644
--- a/templates/todolists/view.html
+++ b/templates/todolists/view.html
@@ -19,7 +19,7 @@
 
     <p>{{list.description|safe|linebreaks}}</p>
 
-    <table id="dev-todo-pkglist" class="results">
+    <table id="dev-todo-pkglist" class="results todo-table">
         <thead>
             <tr>
                 <th>Name</th>
@@ -50,10 +50,9 @@
             {% endfor %}
         </tbody>
     </table>
-
-</div><!-- #dev-todo-details -->
-
+</div>
 {% load cdn %}{% jquery %}
+<script type="text/javascript" src="/media/jquery.tablesorter.min.js"></script>
 <script type="text/javascript">
     $(function() {
         $('a[href*=todo/flag]').click(function() {
@@ -70,5 +69,8 @@
             return false;
         });
     });
+$(document).ready(function() {
+    $(".results").tablesorter({widgets: ['zebra'], sortList: [[0,0], [1,0]]});
+});
 </script>
 {% endblock %}