Redesigned todo list pages

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

4 files changed, 112 insertions, 103 deletions

diff --git a/templates/todolists/addedtotodolist b/templates/todolists/addedtotodolist
index c325c470..24fded59 100644
--- a/templates/todolists/addedtotodolist
+++ b/templates/todolists/addedtotodolist
@@ -8,7 +8,7 @@ The following package:
     Repository:   {{ pkg.repo.name }}
     ({{ weburl }})
 
-has been added to this to-do list:
+has been added to this todo list:
 
 Creator: {{todolist.creator.get_full_name}}
 Name: {{todolist.name}}
diff --git a/templates/todolists/list.html b/templates/todolists/list.html
index ffbab2af..e4b426bb 100644
--- a/templates/todolists/list.html
+++ b/templates/todolists/list.html
@@ -2,34 +2,40 @@
 {% block title %}Arch Linux - Todo Lists{% endblock %}
 
 {% block content %}
-	<div class="greybox">
-        {% if perms.main.add_todolist %}
-            <div style="float:right">
-                <a href="/todo/add/">Add Todo List</a>
-            </div>
-        {% endif %}
-		<h2 class="title">Package ToDo lists</h2>
-		<table class="results" width="100%">
-            <thead>
-		    	<tr>
-                    <th>Name</th>
-                    <th>Creation Date</th>
-                    <th>Creator</th>
-                    <th>Description</th>
-                    <th>Status</th>
-                </tr>
-            </thead>
-            <tbody>
+<div id="dev-todo" class="box">
+
+    <h2>Package Todo Lists</h2>
+
+    {% if perms.main.add_todolist %}
+    <ul class="admin-actions">
+        <li><a href="/todo/add/" title="Add new todo list">Add Todo List</a></li>
+    </ul>
+    {% endif %}
+
+    <table id="dev-todo-lists" class="results">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Creation Date</th>
+                <th>Creator</th>
+                <th>Description</th>
+                <th>Status</th>
+            </tr>
+        </thead>
+        <tbody>
             {% for list in lists %}
-                <tr class="{% cycle pkgr2,pkgr1 %}">
-                    <td style="white-space:nowrap"><a href="/todo/{{ list.id }}/">{{ list.name }}</a></td>
-                    <td>{{ list.date_added }}</td>
-                    <td>{{ list.creator.get_full_name }}</td>
-                    <td>{{ list.description }}</td>
-                    <td>{% if list.complete %}<span style="color:blue">Complete</span>{% else %}<span style="color:red">Incomplete</span>{% endif %}</td>
-                </tr>
+            <tr class="{% cycle 'odd' 'even' %}">
+                <td><a href="/todo/{{ list.id }}/"
+                        title="View todo list: {{ list.name }}">{{ list.name }}</a></td>
+                <td>{{ list.date_added }}</td>
+                <td>{{ list.creator.get_full_name }}</td>
+                <td class="wrap">{{ list.description }}</td>
+                <td>{% if list.complete %}<span class="complete">Complete</span>
+                    {% else %}<span class="incomplete">Incomplete</span>{% endif %}</td>
+            </tr>
             {% endfor %}
-            </tbody>
-		</table>
-	</div>
+        </tbody>
+    </table>
+
+</div><!-- #dev-todo -->
 {% endblock %}
diff --git a/templates/todolists/todolist_confirm_delete.html b/templates/todolists/todolist_confirm_delete.html
index c0742d2b..c1e87834 100644
--- a/templates/todolists/todolist_confirm_delete.html
+++ b/templates/todolists/todolist_confirm_delete.html
@@ -1,25 +1,22 @@
 {% extends "base.html" %}
-{% block title %}Arch Linux - Delete Todo List{% endblock %}
+{% block title %}Arch Linux - Delete Todo List: {{object.name}}{% endblock %}
 
 {% block content %}
-	<div class="greybox">
-		<h2 class="title">Confirm Delete</h2>
-        <p>
-        Are you sure you want to delete this todo list?
-        </p>
-        <div class="box">
-            <h3>{{object.name}}</h3>
-            <p>
-            {{object.description}}
-            </p>
-        </div>
-        <br />
-        <form method="POST">
-            <input type="submit" value="Yes" />
-            <button type="reset" value="No"
-                onclick="document.location='/todos/{{object.id}}/';">No</button>
-        </form>
+<div id="dev-todo-delete" class="box">
 
-        
-	</div>
+    <h2>Delete Todo List: {{object.name}}</h2>
+
+    <p>You are about to delete the following todo list:</p>
+
+    <blockquote>
+        <p><strong>{{object.name}}:</strong> {{object.description}}</p>
+    </blockquote>
+
+    <p>Are you sure?</p>
+
+    <form id="delete-todo-form" method="post" action=".">
+        <p><input type="submit" value="Delete" /></p>
+    </form>
+
+</div>
 {% endblock %}
diff --git a/templates/todolists/view.html b/templates/todolists/view.html
index ae8a6563..6b6e9845 100644
--- a/templates/todolists/view.html
+++ b/templates/todolists/view.html
@@ -1,68 +1,74 @@
 {% extends "base.html" %}
-{% block title %}Arch Linux - Todo - {{ list.name }}{% endblock %}
+{% block title %}Arch Linux - Todo: {{ list.name }}{% endblock %}
 
 {% block content %}
-	<div class="greybox">
-            <div style="float:right">
-                {% if perms.main.delete_todolist %}
-                    <a href="/todo/delete/{{list.id}}/">Delete Todo List</a> |
-                {% endif %}
-                {% if perms.main.change_todolist %}
-                    <a href="/todo/edit/{{list.id}}/">Edit Todo List</a>
-                {% endif %}
-            </div>
-		<h2 class="title">Todo List: {{ list.name }}</h2>
-		<table id="todotable" class="results" width="100%">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Arch</th>
-                    <th>Repo</th>
-                    <th>Maintainer</th>
-                    <th>Status</th>
-                </tr>
-            </thead>
-            <tbody>
+<div id="dev-todo-details" class="box">
+
+    <h2>Todo List: {{ list.name }}</h2>
+
+    <ul class="admin-actions">
+        {% if perms.main.delete_todolist %}
+        <li><a href="/todo/delete/{{list.id}}/"
+            title="Delete this todo list">Delete Todo List</a></li>
+        {% endif %}
+        {% if perms.main.change_todolist %}
+        <li><a href="/todo/edit/{{list.id}}/"
+            title="Edit this todo list">Edit Todo List</a></li>
+        {% endif %}
+    </ul>
+
+    <p>{{list.description|linebreaks}}</p>
+
+    <table id="dev-todo-pkglist" class="results">
+        <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 pkgr2,pkgr1 %}">
-                    <td><a href="{{ pkg.pkg.get_absolute_url }}">{{ 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>
+            <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 %}
-                        <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:blue">Complete</span></a>
+                    <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"
+                        class="complete" title="Toggle completion status">Complete</a>
                     {% else %}
-                        <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"><span style="color:red">Incomplete</span></a>
+                    <a href="/todo/flag/{{ list.id }}/{{ pkg.id }}/"
+                        class="incomplete" title="Toggle completion status">Incomplete</a>
                     {% endif %}
-                    </td>
-                </tr>
+                </td>
+            </tr>
             {% endfor %}
-            </tbody>
-		</table>
-        <br />
-        <div class="box">
-            <h3>List Description</h3>
-            {{list.description|linebreaks}}
-        </div>
-	</div>
+        </tbody>
+    </table>
 
-    {% load cdn %}{% jquery %}
-    <script type="text/javascript">
-        $(function() {
-            $('a[href*=todo/flag]').click(function() {
-                var link = this;
+</div><!-- #dev-todo-details -->
 
-                $.getJSON(link.href, function(data) {
-                    if (data.complete) {
-                        $(link).text('Complete').css('color', 'blue');
-                    } else {
-                        $(link).text('Incomplete').css('color', 'red');
-                    }
-                });
+{% load cdn %}{% jquery %}
+<script type="text/javascript">
+    $(function() {
+        $('a[href*=todo/flag]').click(function() {
+            var link = this;
 
-                return false;
+            $.getJSON(link.href, function(data) {
+                if (data.complete) {
+                    $(link).text('Complete').addClass('complete').removeClass('incomplete');
+                } else {
+                    $(link).text('Incomplete').addClass('incomplete').removeClass('complete');
+                }
             });
+
+            return false;
         });
-    </script>
+    });
+</script>
 {% endblock %}