[extensions-web] Add a better, more contextual review list UI.

[Jasper St. Pierre <jstpierre src gnome org>]

commit 9cda0aaed11da04135505efe069336efcff08176
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Mon Sep 26 14:04:12 2011 -0400

    Add a better, more contextual review list UI.

 sweettooth/auth/templates/auth/profile.html        |   17 ++++++-
 sweettooth/extensions/models.py                    |    3 +
 .../extensions/templates/extensions/detail.html    |    3 +-
 sweettooth/review/templates/review/review.html     |   32 ++++++++++++-
 .../review/templates/review/review_table.html      |   33 --------------
 sweettooth/static/css/review-table.css             |   36 ---------------
 sweettooth/static/css/review.css                   |   23 ++++++++++
 sweettooth/static/css/sweettooth.css               |   47 ++++++++++++++++++++
 sweettooth/static/js/main.js                       |    4 +-
 9 files changed, 121 insertions(+), 77 deletions(-)
---
diff --git a/sweettooth/auth/templates/auth/profile.html b/sweettooth/auth/templates/auth/profile.html
index 5f9db93..0d9298d 100644
--- a/sweettooth/auth/templates/auth/profile.html
+++ b/sweettooth/auth/templates/auth/profile.html
@@ -26,9 +26,20 @@
   </ul>
 
   <h3> {{ display_name }} has reviewed </h3>
-  <ul>
-    {% include "review/review_table.html" with reviews=reviews %}
-  </ul>
+  <div class="reviews">
+    {% for review in reviews %}
+    <div class="review">
+      <a href="{% url extensions-version-detail ext_pk=review.version.extension.pk slug=review.version.extension pk=review.version.pk %}">
+        <span class="extension-name">{{ review.version.extension.name }}</span>
+        <span class="extension-version">(version {{ review.version.version }})</span>
+      </a>
+      <abbr class="timestamp" title="{{ review.date|date:"c" }}">{{ review.date|date:"F j, Y" }}</abbr>
+      <blockquote>{{ review.comments }}</blockquote>
+    </div>
+    {% empty %}
+      <p>>{{ empty|default:"No reviews." }}</p>
+    {% endfor %}
+  </div>
 </div>
 {% endblock %}
 
diff --git a/sweettooth/extensions/models.py b/sweettooth/extensions/models.py
index c7f210d..92a9002 100644
--- a/sweettooth/extensions/models.py
+++ b/sweettooth/extensions/models.py
@@ -249,6 +249,9 @@ class ExtensionVersion(models.Model):
 
         self.save()
 
+    def get_status_class(self):
+        return STATUSES[self.status].lower()
+
 submitted_for_review = Signal(providing_args=["version"])
 reviewed = Signal(providing_args=["version", "review"])
 status_changed = Signal(providing_args=["version", "log"])
diff --git a/sweettooth/extensions/templates/extensions/detail.html b/sweettooth/extensions/templates/extensions/detail.html
index 4ad419a..bca1dcd 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -72,8 +72,7 @@
 {% endwith %}
 {% endblock %}
 {% block document-ready %}{{ block.super }}
-    require(['jquery.timeago', 'jquery.rating', 'extensions'], function() {
-        $("abbr.timestamp").timeago();
+    require(['jquery.rating', 'extensions'], function() {
         {% if is_review or is_rejected %}
         $(".extension .switch").addClass("insensitive");
         {% endif %}
diff --git a/sweettooth/review/templates/review/review.html b/sweettooth/review/templates/review/review.html
index 6f08f01..993346f 100644
--- a/sweettooth/review/templates/review/review.html
+++ b/sweettooth/review/templates/review/review.html
@@ -38,13 +38,41 @@
 
 <h2 class="expanded"> Previous Versions </h2>
 <div id="previous_versions">
-  {% include "review/review_table.html" with reviews=previous_versions empty="There were no previous versions of this extension." %}
+  {% if previous_versions %}
+  <table>
+    <thead>
+      <th>Version</th>
+      <th>Status</th>
+    </thead>
+    <tbody>
+      {% for version in previous_versions %}
+      <tr>
+        <td>{{ version.version }}</td>
+        <td>
+          <span class="{{ version.get_status_class }}">{{ version.get_status_display }}</span>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% else %}
+  <p>There are no previous versions of <span>{{ version.extension.name }}</span></p>
+  {% endif %}
 </div>
 
 {% if previous_reviews %}
 <h2 class="expanded"> Previous Reviews on this Version </h2>
 <div id="previous_reviews">
-  {% include "review/review_table.html" with reviews=previous_reviews %}
+  {% for review in previous_reviews %}
+  <div class="review">
+    <a class="review-author" href="{% url auth-profile user=review.reviewer.username %}">{{ review.reviewer }}</a>
+    reviewed
+    <abbr class="timestamp" title="{{ review.date|date:"c" }}">{{ review.date|date:"F j, Y" }}</abbr>
+    <blockquote>{{ review.comments }}</blockquote>
+    {% empty %}
+    <p>{{ empty|default:"No reviews." }}</p>
+  </div>
+  {% endfor %}
 </div>
 {% endif %}
 
diff --git a/sweettooth/static/css/review.css b/sweettooth/static/css/review.css
index f263366..1417c7a 100644
--- a/sweettooth/static/css/review.css
+++ b/sweettooth/static/css/review.css
@@ -123,3 +123,26 @@ h2.expanded:before {
 #review_form input[type=submit] {
     float: right;
 }
+
+#previous_versions table {
+    width: 100%;
+}
+
+#previous_versions p span {
+    font-weight: bold;
+}
+
+#previous_versions p {
+    text-align: center;
+    font-size: larger;
+}
+
+.rejected {
+    color: #c00;
+    font-weight: bold;
+}
+
+.active {
+    color: #0a0;
+    font-weight: bold;
+}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 00581c5..9a23183 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -449,3 +449,50 @@ input[type=submit], button {
 #new-comment-form .submit-post {
     float: right;
 }
+
+/* Review List */
+/* ==================================================================== */
+
+.review {
+    background: #EEEEEC;
+    border: 1px solid #BABDB6;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    clear: both;
+    padding: 20px;
+
+    margin-top: 20px;
+}
+
+.review a {
+    text-decoration: none;
+}
+
+.review a .extension-name {
+    font-size: 1.4em;
+    color: #000;
+}
+
+.review a:hover .extension-name {
+    color: #445;
+}
+
+.review abbr, .review .extension-version {
+    color: #666;
+    font-size: smaller;
+}
+
+.review abbr {
+    float: right;
+}
+
+.review blockquote {
+    line-height: 1.8em;
+    text-indent: 2em;
+    font-size: larger;
+    font-style: italic;
+}
+
+.reivew blockquote.empty {
+    color: #888;
+}
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index f77910b..e391f33 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -1,6 +1,6 @@
 "use strict";
 
-require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($, messages) {
+require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable', 'jquery.timeago'], function($, messages) {
     if (!$.ajaxSettings.headers)
         $.ajaxSettings.headers = {};
 
@@ -31,6 +31,8 @@ require(['jquery', 'messages', 'jquery.cookie', 'jquery.jeditable'], function($,
             return false;
         });
 
+        $("abbr.timestamp").timeago();
+
         function closeUserSettings() {
             var needsClose = $('#global_domain_bar .user').hasClass('active');
             if (!needsClose)