fcbf8d764330

web: much more styling
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Sat, 12 Jun 2010 23:12:15 -0400
parents c4db1e4882dd
children a150f425c074
branches/tags (none)
files review/static/aal.css review/static/comments.js review/static/extra.css review/static/jquery.infieldlabel.min.js review/static/style.css review/static/style.less review/templates/base.html review/templates/changeset.html review/templates/index.html

Changes

--- a/review/static/aal.css	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/static/aal.css	Sat Jun 12 23:12:15 2010 -0400
@@ -96,4 +96,4 @@
 
 /* Useful classes */
 img.left {display: inline; float: left; margin: 0 1.5em .75em 0;}
-img.right {display: inline; float: right; margin: 0 0 .75em .75em;}
\ No newline at end of file
+img.right {display: inline; float: right; margin: 0 0 .75em .75em;}
--- a/review/static/comments.js	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/static/comments.js	Sat Jun 12 23:12:15 2010 -0400
@@ -1,14 +1,16 @@
-//$(function() {
-    
-    //$("div > form").hide();
-    //$("tr:has(form)").hide();
-    
+$(function() {
     
-    //$("span.cancel a").click(function(event) {
-        //$(event.target).closest("div.input").children(".activate").children("a").show();
-        //$(event.target).parents("form").hide();
-        //return false;
-    //});
+    $(".activate a").click(function(event) {
+        $(event.target).closest(".activate").hide();
+        $(event.target).closest("div").children("form").fadeIn("fast");
+        return false;
+    });
+
+    $("a.cancel").click(function(event) {
+        $(event.target).closest(".togglebox").children(".activate").show();
+        $(event.target).parents("form").hide();
+        return false;
+    });
     
     //$("span.cancel-line a").live("click", function(event) {
         //$(event.target).closest("tr").prev().removeClass("comment-line-selected").addClass("commentable");
@@ -16,12 +18,6 @@
         //return false;
     //});
     
-    //$(".input .activate a").click(function(event) {
-        //$(event.target).hide();
-        //$(event.target).closest("div").children("form").fadeIn("fast");
-        //return false;
-    //});
-    
     //$("tr.rem.commentable,tr.add.commentable,tr.con.commentable").live("click", function(event) {
         //$(event.target).closest("tr").addClass("comment-line-selected").removeClass("commentable");
         //var filename = $(event.target).closest("tr").find(".line-data").children(".filename").first().text();
@@ -49,5 +45,6 @@
         //$(event.target).closest("tr").after(comment_form);
         //return false;
     //});
-
-//});
+    
+    $("label.infield").inFieldLabels();
+});
--- a/review/static/extra.css	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/static/extra.css	Sat Jun 12 23:12:15 2010 -0400
@@ -44,3 +44,14 @@
     );
 }
 
+#changeset .content .togglebox form {
+    background: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(0.0, rgb(234, 233, 223)),
+        color-stop(0.3, rgb(250, 249, 239)),
+        color-stop(0.95, rgb(250, 249, 239)),
+        color-stop(1, rgb(255, 254, 243))
+    );
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/review/static/jquery.infieldlabel.min.js	Sat Jun 12 23:12:15 2010 -0400
@@ -0,0 +1,12 @@
+/*
+ * In-Field Label jQuery Plugin
+ * http://fuelyourcoding.com/scripts/infield.html
+ *
+ * Copyright (c) 2009 Doug Neiner
+ * Dual licensed under the MIT and GPL licenses.
+ * Uses the same license as jQuery, see:
+ * http://docs.jquery.com/License
+ *
+ * @version 0.1
+ */
+(function($){$.InFieldLabels=function(b,c,d){var f=this;f.$label=$(b);f.label=b;f.$field=$(c);f.field=c;f.$label.data("InFieldLabels",f);f.showing=true;f.init=function(){f.options=$.extend({},$.InFieldLabels.defaultOptions,d);if(f.$field.val()!=""){f.$label.hide();f.showing=false};f.$field.focus(function(){f.fadeOnFocus()}).blur(function(){f.checkForEmpty(true)}).bind('keydown.infieldlabel',function(e){f.hideOnChange(e)}).change(function(e){f.checkForEmpty()}).bind('onPropertyChange',function(){f.checkForEmpty()})};f.fadeOnFocus=function(){if(f.showing){f.setOpacity(f.options.fadeOpacity)}};f.setOpacity=function(a){f.$label.stop().animate({opacity:a},f.options.fadeDuration);f.showing=(a>0.0)};f.checkForEmpty=function(a){if(f.$field.val()==""){f.prepForShow();f.setOpacity(a?1.0:f.options.fadeOpacity)}else{f.setOpacity(0.0)}};f.prepForShow=function(e){if(!f.showing){f.$label.css({opacity:0.0}).show();f.$field.bind('keydown.infieldlabel',function(e){f.hideOnChange(e)})}};f.hideOnChange=function(e){if((e.keyCode==16)||(e.keyCode==9))return;if(f.showing){f.$label.hide();f.showing=false};f.$field.unbind('keydown.infieldlabel')};f.init()};$.InFieldLabels.defaultOptions={fadeOpacity:0.5,fadeDuration:300};$.fn.inFieldLabels=function(c){return this.each(function(){var a=$(this).attr('for');if(!a)return;var b=$("input#"+a+"[type='text'],"+"input#"+a+"[type='password'],"+"textarea#"+a);if(b.length==0)return;(new $.InFieldLabels(this,b[0],c))})}})(jQuery);
\ No newline at end of file
--- a/review/static/style.css	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/static/style.css	Sat Jun 12 23:12:15 2010 -0400
@@ -64,16 +64,17 @@
   margin-bottom: 0;
 }
 body .header .remotes form a {
+  margin-right: 3px;
   font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
   color: #212000;
   line-height: 1.45;
   display: inline-block;
   text-decoration: none;
   padding: 1px;
-  background-color: #f9f8d3;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
-  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+  background-color: #edecc7;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -81,10 +82,12 @@
   border-right: 1px solid #a9a883;
   border-left: 1px solid #a9a883;
   border-bottom: 1px solid #989772;
-  margin-right: 3px;
+}
+body .header .remotes form a:active {
+  margin-top: 1px;
+  margin-bottom: -1px;
 }
 body .header .remotes form a span {
-  background-color: #edecc7;
   display: inline-block;
   padding: 0 6px;
   text-shadow: 0px 1px 1px #fffffa;
@@ -102,10 +105,6 @@
 body .header .remotes form a:hover span {
   background-color: #fefdd8;
 }
-body .header .remotes form a:active {
-  margin-top: 1px;
-  margin-bottom: -1px;
-}
 body .content {
   border-top: 1px solid #f8f7e8;
 }
@@ -145,6 +144,33 @@
 body a:active {
   color: #bf1900;
 }
+body .disabled {
+  display: none;
+}
+form .field {
+  position: relative;
+}
+form .field label {
+  display: inline;
+}
+form .field label.radio {
+  margin-right: 15px;
+}
+form .field label.infield {
+  display: block;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+form .field textarea {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  padding: 5px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  border: 1px solid #444;
+}
 #index .content table {
   width: 100%;
 }
@@ -199,5 +225,161 @@
   background-color: #666;
 }
 #index .content table tr td.stats .badge.comments {
-  background-color: #ff6f24;
+  background-color: #ff5700;
+}
+#changeset .content .fulldesc {
+  font-size: 18px;
+  line-height: 1.25;
+  margin-bottom: 14px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 4px;
+  white-space: pre;
+  width: 100%;
+}
+#changeset .content .activate a {
+  font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+  color: #1e1e1e;
+  line-height: 1.45;
+  display: inline-block;
+  text-decoration: none;
+  padding: 1px;
+  background-color: #eaeaea;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-top: 1px solid #b7b7b7;
+  border-right: 1px solid #a6a6a6;
+  border-left: 1px solid #a6a6a6;
+  border-bottom: 1px solid #959595;
+}
+#changeset .content .activate a:active {
+  margin-top: 1px;
+  margin-bottom: -1px;
+}
+#changeset .content .activate a span {
+  display: inline-block;
+  padding: 0 6px;
+  text-shadow: 0px 1px 1px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#changeset .content .activate a:hover {
+  border-top: 1px solid #d3d3d3;
+  border-right: 1px solid #bbbbbb;
+  border-left: 1px solid #bbbbbb;
+  border-bottom: 1px solid #a4a4a4;
+  background-color: #fbfbfb;
+}
+#changeset .content .activate a:hover span {
+  background-color: #fbfbfb;
+}
+#changeset .content a.submit {
+  margin-right: 4px;
+  font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+  color: #1e1e1e;
+  line-height: 1.45;
+  display: inline-block;
+  text-decoration: none;
+  padding: 1px;
+  background-color: #eaeaea;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-top: 1px solid #b7b7b7;
+  border-right: 1px solid #a6a6a6;
+  border-left: 1px solid #a6a6a6;
+  border-bottom: 1px solid #959595;
+}
+#changeset .content a.submit:active {
+  margin-top: 1px;
+  margin-bottom: -1px;
 }
+#changeset .content a.submit span {
+  display: inline-block;
+  padding: 0 6px;
+  text-shadow: 0px 1px 1px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#changeset .content a.submit:hover {
+  border-top: 1px solid #d3d3d3;
+  border-right: 1px solid #bbbbbb;
+  border-left: 1px solid #bbbbbb;
+  border-bottom: 1px solid #a4a4a4;
+  background-color: #fbfbfb;
+}
+#changeset .content a.submit:hover span {
+  background-color: #fbfbfb;
+}
+#changeset .content a.cancel {
+  font: bold 12px "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
+  color: #1e1e1e;
+  line-height: 1.45;
+  display: inline-block;
+  text-decoration: none;
+  padding: 1px;
+  background-color: #eaeaea;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-top: 1px solid #b7b7b7;
+  border-right: 1px solid #a6a6a6;
+  border-left: 1px solid #a6a6a6;
+  border-bottom: 1px solid #959595;
+}
+#changeset .content a.cancel:active {
+  margin-top: 1px;
+  margin-bottom: -1px;
+}
+#changeset .content a.cancel span {
+  display: inline-block;
+  padding: 0 6px;
+  text-shadow: 0px 1px 1px #ffffff;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#changeset .content a.cancel:hover {
+  border-top: 1px solid #d3d3d3;
+  border-right: 1px solid #bbbbbb;
+  border-left: 1px solid #bbbbbb;
+  border-bottom: 1px solid #a4a4a4;
+  background-color: #fbfbfb;
+}
+#changeset .content a.cancel:hover span {
+  background-color: #fbfbfb;
+}
+#changeset .content .togglebox form {
+  float: left;
+  border: 1px solid #ccc;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  padding: 15px 10px;
+  background-color: #faf9ef;
+  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02);
+  -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02);
+  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.02);
+}
+#changeset .content .add-review-comment {
+  margin-bottom: 40px;
+}
+#changeset .content .add-signoff {
+  margin-bottom: 40px;
+}
+#changeset .content .add-signoff form .sign-off-as {
+  font-weight: bold;
+  margin-bottom: 0;
+}
--- a/review/static/style.less	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/static/style.less	Sat Jun 12 23:12:15 2010 -0400
@@ -5,11 +5,13 @@
 @c-green: #648239;
 @c-orange: #bf4c18;
 @c-green-light: #9AF040;
-@c-orange-light: #FF6F24;
+@c-orange-light: #FF5700;
 
 @c-dark: #292620;
 @c-light: #888888;
 
+@c-metal: #eaeaea;
+
 @content-width: 800px;
 @content-background: rgb(250, 250, 250);
 
@@ -29,37 +31,35 @@
     border-left: 1px solid @sides;
     border-bottom: 1px solid @bottom;
 }
-.button(@color: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
+.button(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
     font: bold @fsize @font-normal;
-    color: @color - #ccc;
+    color: @bgcolor - #ccc;
     line-height: @lheight;
     display: inline-block;
     text-decoration: none;
     padding: 1px;
-    background-color: @color + #0c0c0c;
-    .box-shadow(0px, 1px, 2px, rgba(0,0,0,0.5));
+    background-color: @bgcolor;
+    .box-shadow(0px, 1px, 3px, rgba(0,0,0,0.1));
     .border-radius(4px);
-    .multi-border((@color - #333), (@color - #444), (@color - #555));
-
-    span {
-        background-color: @color;
-        display: inline-block;
-        padding: 0 @fsize/2;
-        text-shadow: 0px 1px 1px (@color + #333);
-        .border-radius(3px);
-    }
-    &:hover {
-        .multi-border(desaturate(darken(@color, 10%), 10%), desaturate(darken(@color, 20%), 20%), desaturate(darken(@color, 30%), 30%));
-        background-color: @color + #111;
-        span {
-            background-color: @color + #111;
-        }
-    }
+    .multi-border((@bgcolor - #333), (@bgcolor - #444), (@bgcolor - #555));
     &:active {
         margin-top: 1px;
         margin-bottom: -1px;
     }
 }
+.button-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
+    display: inline-block;
+    padding: 0 @fsize/2;
+    text-shadow: 0px 1px 1px (@bgcolor + #333);
+    .border-radius(3px);
+}
+.button-hover(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
+    .multi-border(desaturate(darken(@bgcolor, 10%), 10%), desaturate(darken(@bgcolor, 20%), 20%), desaturate(darken(@bgcolor, 30%), 30%));
+    background-color: @bgcolor + #111;
+}
+.button-hover-span(@bgcolor: #ddd, @fcolor: #000000, @fsize: 14px, @lheight: 1.75) {
+    background-color: @bgcolor + #111;
+}
 
 .group:after {
     clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0;
@@ -124,8 +124,12 @@
                 margin-bottom: 0;
 
                 a {
+                    margin-right: 3px;
+
                     .button(@c-cream, #000, 12px, 1.45);
-                    margin-right: 3px;
+                    span { .button-span(@c-cream, #000, 12px, 1.45); }
+                    &:hover { .button-hover(@c-cream, #000, 12px, 1.45); }
+                    &:hover span { .button-hover-span(@c-cream, #000, 12px, 1.45); }
                 }
             }
         }
@@ -171,70 +175,96 @@
             color: @c-orange - #033;
         }
     }
+    .disabled {
+        display: none;
+    }
 }
 
-#index {
-    .content {
-        table {
-            width: 100%;
+form {
+    .field {
+        position: relative;
+
+        label {
+            display: inline;
 
-            tr {
+            &.radio {
+                margin-right: 15px;
+            }
+            &.infield { 
+                display: block;
+                font-family: @font-mono;
+                position: absolute;
+                top: 5px;
+                left: 5px;
+            }
+        }
+        textarea {
+            font-family: @font-mono;
+            padding: 5px;
+            .border-radius(2px);
+            border: 1px solid #444;
+        }
+    }
+}
+
+#index .content {
+    table {
+        width: 100%;
+
+        tr {
+            border: none;
+
+            &:nth-child(even) {
+                background-color: lighten(@c-cream, 8%);
+            }
+
+            td {
                 border: none;
 
-                &:nth-child(even) {
-                    background-color: lighten(@c-cream, 8%);
+                a {
+                    width: 100%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
-
-                td {
-                    border: none;
-
-                    a {
-                        width: 100%;
-                        white-space: nowrap;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
+                &.node {
+                    .rev {
+                        font-weight: bold;
                     }
-                    &.node {
-                        .rev {
-                            font-weight: bold;
-                        }
-                        .sep {
-                            font-weight: normal;
-                            padding: 0px 2px 0px 1px;
-                            color: lighten(@c-light, 40%);
-                        }
-                        .hash {
-                            color: @c-light;
-                            font: normal 11px @font-mono;
-                        }
+                    .sep {
+                        font-weight: normal;
+                        padding: 0px 2px 0px 1px;
+                        color: lighten(@c-light, 40%);
+                    }
+                    .hash {
+                        color: @c-light;
+                        font: normal 11px @font-mono;
                     }
-                    &.stats {
-                        text-align: right;
+                }
+                &.stats {
+                    text-align: right;
 
-                        .badge {
-                            color: white;
-                            font-weight: bold;
-                            display: inline-block;
-                            line-height: 1;
-                            padding: 4px 5px;
-                            margin-left: 4px;
-
-                            .border-radius(3px);
+                    .badge {
+                        color: white;
+                        font-weight: bold;
+                        display: inline-block;
+                        line-height: 1;
+                        padding: 4px 5px;
+                        margin-left: 4px;
 
-                            &.yes {
-                                background-color: green;
-                            }
-                            &.no {
-                                background-color: red;
-                            }
-                            &.neutral {
-                                background-color: #666;
-                            }
-                            &.comments {
-                                background-color: @c-orange-light;
-                            }
+                        .border-radius(3px);
 
-
+                        &.yes {
+                            background-color: green;
+                        }
+                        &.no {
+                            background-color: red;
+                        }
+                        &.neutral {
+                            background-color: #666;
+                        }
+                        &.comments {
+                            background-color: @c-orange-light;
                         }
                     }
                 }
@@ -242,3 +272,61 @@
         }
     }
 }
+#changeset .content {
+    .fulldesc {
+        font-size: 18px;
+        line-height: 1.25;
+        margin-bottom: 14px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 4px;
+        white-space: pre;
+        width: 100%;
+    }
+    .activate a {
+        .button(@c-metal, #000, 12px, 1.45);
+        span { .button-span(@c-metal, #000, 12px, 1.45); }
+        &:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
+        &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
+    }
+    a.submit {
+        margin-right: 4px;
+        .button(@c-metal, #000, 12px, 1.45);
+        span { .button-span(@c-metal, #000, 12px, 1.45); }
+        &:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
+        &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
+    }
+    a.cancel {
+        .button(@c-metal, #000, 12px, 1.45);
+        span { .button-span(@c-metal, #000, 12px, 1.45); }
+        &:hover { .button-hover(@c-metal, #000, 12px, 1.45); }
+        &:hover span { .button-hover-span(@c-metal, #000, 12px, 1.45); }
+    }
+    .togglebox {
+        form {
+            float: left;
+            border: 1px solid #ccc;
+            .border-radius(3px);
+            padding: 15px 10px;
+            background-color: lighten(@c-cream, 12%);
+            .box-shadow(0px, 5px, 5px, rgba(0, 0, 0, 0.02);
+        }
+    }
+
+
+    .add-review-comment {
+        margin-bottom: 40px;
+
+    }
+
+    .add-signoff {
+        margin-bottom: 40px;
+
+        form {
+            .sign-off-as {
+                font-weight: bold;
+                margin-bottom: 0;
+            }
+        }
+    }
+}
--- a/review/templates/base.html	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/templates/base.html	Sat Jun 12 23:12:15 2010 -0400
@@ -5,12 +5,13 @@
 
 <html>
     <head>
-        <title>{{ utils["basename"](datastore.target.root) }}/ - hg-review</title>
+        <title>{% block title %}{% endblock %}{{ utils["basename"](datastore.target.root) }}/ - hg-review</title>
         <link rel="stylesheet" href="/static/aal.css" type="text/css" media="screen" />
         <link rel="stylesheet" href="/static/style.css" type="text/css" media="screen" />
         <link rel="stylesheet" href="/static/extra.css" type="text/css" media="screen" />
 
         <script type="text/javascript" src="/static/jquery-1.4.2.min.js"></script>
+        <script type="text/javascript" src="/static/jquery.infieldlabel.min.js"></script>
         <script type="text/javascript" src="/static/ui.js"></script>
         <script type="text/javascript" src="/static/comments.js"></script>
     </head>
--- a/review/templates/changeset.html	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/templates/changeset.html	Sat Jun 12 23:12:15 2010 -0400
@@ -1,11 +1,15 @@
 {% extends "base.html" %}
 
-{% block title %} at {{ title }}{% endblock %}
-{% block header %} at {{ title }}{% endblock %}
+{% block id %}changeset{% endblock %}
+{% block title %}Changeset {{ rev.rev() }} of {% endblock %}
 
 {% block content %}
     <h2>Changeset {{ rev.rev() }}: {{ rev.description().splitlines()[0] }}</h2>
-    
+
+    {% if utils['len'](rev.description().splitlines()) > 1 %}
+        <div class="fulldesc">{{ "\n".join(rev.description().splitlines()[1:]).strip() }}</div>
+    {% endif %}
+
     {% for comment in rcset.review_level_comments() %}
         <div class="comment">
             {{ macros.gravatar(comment, utils) }}
@@ -18,25 +22,23 @@
             </div>
         </div>
     {% endfor %}
-    
+
     {% if not read_only %}
-        <div id="comment-review" class="input">
-            <p class="activate"><a href="">Add a comment on this changeset</a></p>
-            <form id="comment-review-form" method="post" action="">
+        <div class="add-review-comment togglebox group">
+            <span class="activate"><a class="button" href="#"><span>Add a comment on this changeset</span></a></span>
+            <form class="disabled" id="comment-review-form" method="POST" action="">
                 <div class="field">
-                    <label for="body">Add a comment on this changeset:</label>
-                    <textarea cols="60" rows="6" name="new-comment-body"></textarea>
+                    <label class="infield" for="id_comment-review-form_body">Comment</label>
+                    <textarea autocomplete="off" id="id_comment-review-form_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>
             </form>
         </div>
     {% endif %}
-    
+
     <h2>Signoffs</h2>
-    
+
     {% for signoff in rcset.signoffs %}
         <div class="signoff {{ signoff.opinion or 'neutral' }}">
             {{ macros.gravatar(signoff, utils) }}
@@ -49,43 +51,44 @@
             </div>
         </div>
     {% endfor %}
-    
+
     {% if not read_only %}
-        <div id="signoff-review" class="input">
-            <p class="activate">
+        <div class="add-signoff togglebox group">
+            <span class="activate">
                 {% if cu_signoff %}
-                    <a href="#">Change your signoff</a>
+                    <a class="button" href="#"><span>Change your signoff</span></a>
                 {% else %}
-                    <a href="#">Sign off on this changeset</a>
+                    <a class="button" href="#"><span>Sign off on this changeset</span></a>
                 {% endif %}
-            </p>
-            <form id="signoff-review-form" method="post" action="">
+            </span>
+            <form id="signoff-form" class="disabled" method="POST" action="">
+                <p class="sign-off-as">Sign off as:</p>
                 <div class="field">
-                    <input type="radio" name="signoff" value="yes" {% if cu_signoff and cu_signoff.opinion == 'yes' %}checked{% endif %}/><span>Yes</span>
-                    <input type="radio" name="signoff" value="no" {% if cu_signoff and cu_signoff.opinion == 'no' %}checked{% endif %}/><span>No</span>
-                    <input type="radio" name="signoff" value="neutral" {% if cu_signoff and cu_signoff.opinion == '' %}checked{% endif %}/><span>Neutral</span>
+                    <input id="id_signoff-form_yes" type="radio" name="signoff" value="yes" {% if cu_signoff and cu_signoff.opinion == 'yes' %}checked{% endif %}/><label class="radio" for="id_signoff-form_yes">Yes</label>
+                    <input id="id_signoff-form_no"type="radio" name="signoff" value="no" {% if cu_signoff and cu_signoff.opinion == 'no' %}checked{% endif %}/><label class="radio" for="id_signoff-form_no">No</label>
+                    <input id="id_signoff-form_neutral"type="radio" name="signoff" value="neutral" {% if cu_signoff and cu_signoff.opinion == '' %}checked{% endif %}/><label class="radio" for="id_signoff-form_neutral">Neutral</label>
                 </div>
                 <div class="field">
-                    <label for="body">Signoff message:</label>
-                    <textarea cols="60" rows="6" name="new-signoff-body">{% if cu_signoff %}{{ cu_signoff.message }}{% endif %}</textarea>
+                    <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>
                 </div>
                 <div class="buttons">
-                    <input type="submit" class="button" value="Submit" />
-                    <span class="cancel"><a href="#">Cancel</a></span>
+                    <a class="submit button" href="#"><span>Add Signoff</span></a>
+                    <a class="cancel button" href="#"><span>Cancel</span></a>
                 </div>
             </form>
         </div>
     {% endif %}
 
     <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>
-            
+
             <div class="file-review-contents">
                 {% for comment in rcset.file_level_comments(filename) %}
                     <div class="comment">
@@ -100,11 +103,11 @@
                         </div>
                     </div>
                 {% endfor %}
-                
+
                 {% if not read_only %}
                     <div id="comment-file" class="input">
                         <p class="activate"><a href="">Add a comment on this file</a></p>
-                        
+
                         <form id="comment-file-form" method="post" action="">
                             <div class="field">
                                 <label for="body">Add a comment on this file:</label>
@@ -118,7 +121,7 @@
                         </form>
                     </div>
                 {% endif %}
-                
+
                 <div class="diff">
                     <table>
                         <tbody>
@@ -126,7 +129,7 @@
                             {# We need to ignore the first item from this generator, because
                                we don't care about providing a line-number prefix (for now!). #}
                             {% set ignore_this_variable = annotated_diff.next() %}
-                            
+
                             {% for line in annotated_diff %}
                                 {% if line['skipped'] %}
                                     <tr class="skipped">
@@ -150,7 +153,7 @@
                                     <tr class="{{ utils['line_type'](line['content']) }}{% if not read_only %} commentable {% endif %}">
                                         <td class="diff-line"><div class="line-data"><span class="linenumber">{{ line['number'] }}</span><span class="filename">{{ filename }}</span></div><code>{{ line['number'] }}: {{ line['content'][1:]|escape }}</code></td>
                                     </tr>
-                                        
+
                                     {% for comment in line['comments'] %}
                                         <tr><td class="comment">
                                             {{ macros.gravatar(comment, utils) }}
@@ -173,4 +176,4 @@
             </div>
         </div>
     {% endfor %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
--- a/review/templates/index.html	Sat Jun 12 20:51:20 2010 -0400
+++ b/review/templates/index.html	Sat Jun 12 23:12:15 2010 -0400
@@ -2,7 +2,6 @@
 
 {% block id %}index{% endblock %}
 {% block title %}{% endblock %}
-{% block header %}{% endblock %}
 
 {% block content %}
     <h2>Changesets</h2>
@@ -10,7 +9,7 @@
         {% for rcset in rcsets %}
             {% set rev = rcset.target[rcset.node] %}
             {% set node_short = utils['node_short'](rev.node()) %}
-            <tr class="${ loop.parity }">
+            <tr>
                 <td class="node"><span class="rev">{{ rev.rev() }}</span><span class="sep">:</span><span class="hash">{{ node_short }}</span></td>
                 <td class="desc">
                     <a href="/changeset/{{ node_short }}/">{{  rev.description().splitlines()[0] }}</a>