# HG changeset patch
# User Steve Losh <steve@stevelosh.com>
# Date 1276402855 14400
# Node ID 17ad8036c6e21477301322b8f395e237d5f71588
# Parent  4a6d47faac1654b3fe52cb0a5cb756c62f7276d4
web: yep, more styles

diff -r 4a6d47faac16 -r 17ad8036c6e2 review/static/style.css
--- a/review/static/style.css	Sat Jun 12 23:53:18 2010 -0400
+++ b/review/static/style.css	Sun Jun 13 00:20:55 2010 -0400
@@ -381,26 +381,44 @@
   font-style: italic;
   color: #888888;
 }
-#changeset .content .review-level-comments {
+#changeset .content .item-listing {
   background-color: #faf9ef;
   border: 1px solid #ccc;
   margin-bottom: 14px;
 }
-#changeset .content .review-level-comments .comment {
+#changeset .content .item-listing .comment, #changeset .content .item-listing .signoff {
   padding: 10px 10px 12px;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #ddd;
 }
-#changeset .content .review-level-comments .comment:first-child {
+#changeset .content .item-listing .comment:first-child, #changeset .content .item-listing .signoff:first-child {
   border-top: none;
 }
-#changeset .content .review-level-comments .comment:last-child {
+#changeset .content .item-listing .comment:last-child, #changeset .content .item-listing .signoff:last-child {
   border-bottom: none;
 }
-#changeset .content .review-level-comments .comment img {
+#changeset .content .item-listing .comment img, #changeset .content .item-listing .signoff img {
   float: right;
 }
-#changeset .content .review-level-comments .comment .message {
+#changeset .content .item-listing .comment .signoff-opinion, #changeset .content .item-listing .signoff .signoff-opinion {
+  float: right;
+  font: bold 52px/1 "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+  text-transform: capitalize;
+  margin-right: 15px;
+}
+#changeset .content .item-listing .comment .signoff-opinion.yes, #changeset .content .item-listing .signoff .signoff-opinion.yes {
+  color: #568019;
+}
+#changeset .content .item-listing .comment .signoff-opinion.no, #changeset .content .item-listing .signoff .signoff-opinion.no {
+  color: #c00;
+}
+#changeset .content .item-listing .comment .signoff-opinion.neutral, #changeset .content .item-listing .signoff .signoff-opinion.neutral {
+  color: #bab994;
+}
+#changeset .content .item-listing .comment .author .opinion, #changeset .content .item-listing .signoff .author .opinion {
+  font-weight: bold;
+}
+#changeset .content .item-listing .comment .message, #changeset .content .item-listing .signoff .message {
   background-color: #fefefd;
   border: 1px solid #eee;
   font-family: Monaco, Consolas, "Courier New", monospace;
@@ -408,54 +426,12 @@
   padding: 10px;
   width: 650px;
 }
+#changeset .content .item-listing .signoff .message {
+  width: 500px;
+}
 #changeset .content .add-review-comment {
   margin-bottom: 40px;
 }
-#changeset .content .signoffs {
-  background-color: #faf9ef;
-  border: 1px solid #ccc;
-  margin-bottom: 14px;
-}
-#changeset .content .signoffs .signoff {
-  padding: 10px 10px 12px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #ddd;
-}
-#changeset .content .signoffs .signoff:first-child {
-  border-top: none;
-}
-#changeset .content .signoffs .signoff:last-child {
-  border-bottom: none;
-}
-#changeset .content .signoffs .signoff .avatar {
-  float: right;
-}
-#changeset .content .signoffs .signoff .signoff-opinion {
-  float: right;
-  font: bold 52px/1 "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
-  text-transform: capitalize;
-  margin-right: 15px;
-}
-#changeset .content .signoffs .signoff .signoff-opinion.yes {
-  color: #568019;
-}
-#changeset .content .signoffs .signoff .signoff-opinion.no {
-  color: #c00;
-}
-#changeset .content .signoffs .signoff .signoff-opinion.neutral {
-  color: #bab994;
-}
-#changeset .content .signoffs .signoff .author .opinion {
-  font-weight: bold;
-}
-#changeset .content .signoffs .signoff .message {
-  background-color: #fefefd;
-  border: 1px solid #eee;
-  font-family: Monaco, Consolas, "Courier New", monospace;
-  font-size: 12px;
-  padding: 10px;
-  width: 500px;
-}
 #changeset .content .add-signoff {
   margin-bottom: 40px;
 }
@@ -463,3 +439,9 @@
   font-weight: bold;
   margin-bottom: 0;
 }
+#changeset .content .file .filename h3 a {
+  color: #292620;
+}
+#changeset .content .file .add-file-comment {
+  margin-bottom: 24px;
+}
diff -r 4a6d47faac16 -r 17ad8036c6e2 review/static/style.less
--- a/review/static/style.less	Sat Jun 12 23:53:18 2010 -0400
+++ b/review/static/style.less	Sun Jun 13 00:20:55 2010 -0400
@@ -322,12 +322,12 @@
         color: @c-light;
     }
 
-    .review-level-comments {
+    .item-listing {
         background-color: @c-soft-cream;
         border: 1px solid #ccc;
         margin-bottom: 14px;
 
-        .comment {
+        .comment, .signoff {
             padding: 10px 10px 12px;
             border-top: 1px solid #fff;
             border-bottom: 1px solid #ddd;
@@ -341,39 +341,6 @@
             img {
                 float: right;
             }
-            .message {
-                background-color: lighten(@c-soft-cream, 4%);
-                border: 1px solid #eee;
-                font-family: @font-mono;
-                font-size: 12px;
-                padding: 10px;
-                width: 650px;
-            }
-        }
-    }
-    .add-review-comment {
-        margin-bottom: 40px;
-    }
-
-    .signoffs {
-        background-color: @c-soft-cream;
-        border: 1px solid #ccc;
-        margin-bottom: 14px;
-
-        .signoff {
-            padding: 10px 10px 12px;
-            border-top: 1px solid #fff;
-            border-bottom: 1px solid #ddd;
-
-            &:first-child {
-                border-top: none;
-            }
-            &:last-child {
-                border-bottom: none;
-            }
-            .avatar {
-                float: right;
-            }
             .signoff-opinion {
                 float: right;
                 font: bold 52px/1 @font-normal;
@@ -395,10 +362,17 @@
                 font-family: @font-mono;
                 font-size: 12px;
                 padding: 10px;
-                width: 500px;
+                width: 650px;
             }
         }
+        .signoff .message {
+            width: 500px;
+        }
     }
+    .add-review-comment {
+        margin-bottom: 40px;
+    }
+
     .add-signoff {
         margin-bottom: 40px;
 
@@ -409,4 +383,17 @@
             }
         }
     }
+
+    .file {
+        .filename {
+            h3 {
+                a {
+                    color: @c-dark;
+                }
+            }
+        }
+        .add-file-comment {
+            margin-bottom: 24px;
+        }
+    }
 }
diff -r 4a6d47faac16 -r 17ad8036c6e2 review/static/ui.js
--- a/review/static/ui.js	Sat Jun 12 23:53:18 2010 -0400
+++ b/review/static/ui.js	Sun Jun 13 00:20:55 2010 -0400
@@ -1,14 +1,18 @@
 $(function() {
     
-    $("a.fold-file").toggle(function(event) {
-        $(event.target).closest("div.file-review").find("div.file-review-contents").slideUp("fast");
-        $(event.target).html("&nbsp;&nbsp;&nbsp;&larr;").addClass("unfold-file").removeClass("fold-file");
+    $("a.fold").toggle(function(event) {
+        $(event.target).closest(".file")
+                        .find(".file-review-contents")
+                        .slideUp("fast", function () {
+            $(event.target).closest("h3").find(".status").html("&rarr;");
+        });
         return false;
     },
     function(event) {
-        $(event.target).closest("div.file-review").find("div.file-review-contents").slideDown("fast");
-        $(event.target).html("&nbsp;&nbsp;&nbsp;&darr;").addClass("fold-file").removeClass("unfold-file");
+        $(event.target).closest(".file").find(".file-review-contents").slideDown("fast", function() {
+            $(event.target).closest("h3").find(".status").html("&darr;");
+        });
         return false;
     });
 
-});
\ No newline at end of file
+});
diff -r 4a6d47faac16 -r 17ad8036c6e2 review/templates/changeset.html
--- a/review/templates/changeset.html	Sat Jun 12 23:53:18 2010 -0400
+++ b/review/templates/changeset.html	Sun Jun 13 00:20:55 2010 -0400
@@ -14,7 +14,7 @@
         {% set comments = rcset.review_level_comments() %}
 
         {% if comments %}
-            <div class="review-level-comments">
+            <div class="review-level-comments item-listing">
                 {% for comment in comments %}
                     <div class="comment group">
                         {{ macros.gravatar(comment, utils) }}
@@ -53,7 +53,7 @@
         {% set signoffs = rcset.signoffs %}
 
         {% if signoffs %}
-            <div class="signoffs">
+            <div class="signoffs item-listing">
                 {% for signoff in signoffs %}
                     <div class="signoff group {{ signoff.opinion or 'neutral' }}">
                         {{ macros.gravatar(signoff, utils) }}
@@ -92,12 +92,10 @@
                 </div>
                 <div class="field">
                     <label class="infield" for="id_signoff-form_body">Signoff message</label>
-                    <textarea id="id_signoff-form_body" cols="60" rows="6" name="new-signoff-body">{% if cu_signoff %}{{ cu_signoff.message }}{% endif %}</textarea>
+                    <textarea autocomplete="off" id="id_signoff-form_body" cols="60" rows="6" name="new-signoff-body">{% if cu_signoff %}{{ cu_signoff.message }}{% endif %}</textarea>
                 </div>
-                <div class="buttons">
-                    <a class="submit button" href="#"><span>Add Signoff</span></a>
-                    <a class="cancel button" href="#"><span>Cancel</span></a>
-                </div>
+                <a class="submit button" href="#"><span>Add Signoff</span></a>
+                <a class="cancel button" href="#"><span>Cancel</span></a>
             </form>
         </div>
     {% endif %}
@@ -105,40 +103,46 @@
     <h2>Files</h2>
 
     {% for filename in rcset.files() %}
-        <div class="file-review">
-            <div class="filename-header">
-                <a class="fold-file" href="">&nbsp;&nbsp;&nbsp;&darr;</a>
-                <h3>{{ filename }}</h3>
+        <div class="file">
+            <div class="filename group">
+                <h3><a class="fold" href="#">{{ filename }}</a> <span class="status">&darr;</span> </h3>
             </div>
 
             <div class="file-review-contents">
-                {% for comment in rcset.file_level_comments(filename) %}
-                    <div class="comment">
-                        {{ macros.gravatar(comment, utils) }}
-                        <div>
-                            <div class="author">
-                                <a href="mailto:{{ utils['email'](comment.author) }}">
-                                    {{ utils['templatefilters'].person(comment.author) }}</a>
-                                    said:
-                            </div>
-                            <div class="message">{{ comment.message }}</div>
-                        </div>
-                    </div>
-                {% endfor %}
+                {% with %}
+                    {% set comments = rcset.file_level_comments(filename) %}
 
+                    {% if comments %}
+                        <div class="comments item-listing">
+                            {% for comment in comments %}
+                                <div class="comment">
+                                    {{ macros.gravatar(comment, utils) }}
+                                    <div>
+                                        <div class="author">
+                                            <a href="mailto:{{ utils['email'](comment.author) }}">
+                                                {{ utils['templatefilters'].person(comment.author) }}</a>
+                                                said:
+                                        </div>
+                                        <div class="message">{{ comment.message }}</div>
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                {% endwith %}
                 {% if not read_only %}
-                    <div id="comment-file" class="input">
-                        <p class="activate"><a href="">Add a comment on this file</a></p>
+                    <div class="add-file-comment togglebox group">
+                        <span class="activate"><a class="button" href=""><span>Add a comment on this file</span></a></span>
 
-                        <form id="comment-file-form" method="post" action="">
+                        <form id="id_comment-file-form_{{ loop.index }}" class="disabled" method="POST" action="">
                             <div class="field">
-                                <label for="body">Add a comment on this file:</label>
-                                <textarea cols="60" rows="6" name="new-comment-body"></textarea>
+                                <label class="infield" for="id_comment-file-form_{{ loop.index }}_body">Comment</label>
+                                <textarea autocomplete="off" id="id_comment-file-form_{{ loop.index }}_body" cols="60" rows="6" name="new-comment-body"></textarea>
                             </div>
-                            <div class="buttons">
-                                <input type="submit" class="button" value="Submit" />
-                                <span class="cancel"><a href="#">Cancel</a></span>
-                            </div>
+
+                            <a class="submit button" href="#"><span>Post Comment</span></a>
+                            <a class="cancel button" href="#"><span>Cancel</span></a>
+
                             <input type="hidden" name="filename" value="{{ filename }}" />
                         </form>
                     </div>