# HG changeset patch
# User Steve Losh <steve@stevelosh.com>
# Date 1276458019 14400
# Node ID 13b6260aed9982718503da2b9b6cf5e182eb35ee
# Parent  bcdc35f68d5d021b0f4d4ee52bafadd21c4b0e96
web: changeset page improvements

diff -r bcdc35f68d5d -r 13b6260aed99 review/static/extra.css
--- a/review/static/extra.css	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/static/extra.css	Sun Jun 13 15:40:19 2010 -0400
@@ -55,3 +55,4 @@
         color-stop(1, rgb(255, 254, 243))
     );
 }
+
diff -r bcdc35f68d5d -r 13b6260aed99 review/static/style.css
--- a/review/static/style.css	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/static/style.css	Sun Jun 13 15:40:19 2010 -0400
@@ -251,15 +251,49 @@
 #index .content .pagination a.older {
   float: right;
 }
-#changeset .content .fulldesc {
-  font-size: 18px;
+#changeset .content .head {
+  position: relative;
+}
+#changeset .content .head h2 {
+  width: 660px;
+  color: #888888;
+}
+#changeset .content .head h2 .desc {
+  color: #292620;
+}
+#changeset .content .head .committer-avatar {
+  position: absolute;
+  top: -22px;
+  right: -21px;
+  width: 60px;
+  height: 60px;
+  border: 1px solid #cdca64;
+  border-top: 1px solid #cdca64;
+  border-right: 1px solid #cdca64;
+  border: 1px solid #999;
+  box-shadow: inset 1px -1px 10px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: inset 1px -1px 10px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: inset 1px -1px 10px rgba(0, 0, 0, 0.25);
+  -webkit-border-top-right-radius: 7px;
+  -moz-border-radius-topright: 7px;
+  border-top-right-radius: 7px;
+  -webkit-border-bottom-left-radius: 3px;
+  -moz-border-radius-bottomleft: 3px;
+  border-bottom-left-radius: 3px;
+}
+#changeset .content .head .fulldesc {
+  width: 660px;
+  font-size: 12px;
   line-height: 1.25;
   margin-bottom: 14px;
   overflow-x: auto;
   overflow-y: hidden;
   padding-bottom: 4px;
   white-space: pre;
-  width: 100%;
+  font-family: Monaco, Consolas, "Courier New", monospace;
+}
+#changeset .content .review-level-comments {
+  margin-top: 30px;
 }
 #changeset .content .activate a {
   cursor: pointer;
@@ -533,7 +567,7 @@
 #changeset .content .diff table td {
   border: none;
   line-height: 1;
-  padding: 3px 5px;
+  padding: 1px 5px;
 }
 #changeset .content .diff table td.addrem-add, #changeset .content .diff table td.addrem-rem {
   font-weight: bold;
diff -r bcdc35f68d5d -r 13b6260aed99 review/static/style.less
--- a/review/static/style.less	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/static/style.less	Sun Jun 13 15:40:19 2010 -0400
@@ -26,6 +26,11 @@
   -moz-box-shadow: @horiz @vert @blur @color;
   -webkit-box-shadow: @horiz @vert @blur @color;
 }
+.box-inner-shadow(@horiz, @vert, @blur, @color) {
+  box-shadow: inset @horiz @vert @blur @color;
+  -moz-box-shadow: inset @horiz @vert @blur @color;
+  -webkit-box-shadow: inset @horiz @vert @blur @color;
+}
 .multi-border(@top, @sides, @bottom) {
     border-top: 1px solid @top;
     border-right: 1px solid @sides;
@@ -297,15 +302,50 @@
     }
 }
 #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%;
+    .head {
+        position: relative;
+
+        h2 {
+            width: 660px;
+            color: @c-light;
+
+            .desc {
+                color: @c-dark;
+            }
+        }
+        .committer-avatar {
+            position: absolute;
+            top: -22px;
+            right: -21px;
+            width: 60px;
+            height: 60px;
+            border: 1px solid darken(@c-cream, 30%);
+            border-top: 1px solid darken(@c-cream, 30%);
+            border-right: 1px solid darken(@c-cream, 30%);
+            border: 1px solid #999;
+            .box-inner-shadow(1px, -1px, 10px, rgba(0,0,0,0.25));
+
+            -webkit-border-top-right-radius: 7px;
+            -moz-border-radius-topright: 7px;
+            border-top-right-radius: 7px;
+            -webkit-border-bottom-left-radius: 3px;
+            -moz-border-radius-bottomleft: 3px;
+            border-bottom-left-radius: 3px;
+        }
+        .fulldesc {
+            width: 660px;
+            font-size: 12px;
+            line-height: 1.25;
+            margin-bottom: 14px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            padding-bottom: 4px;
+            white-space: pre;
+            font-family: @font-mono;
+        }
+    }
+    .review-level-comments {
+        margin-top: 30px;
     }
     .activate a {
         .button(@c-metal, #000, 12px, 1.45);
@@ -471,7 +511,7 @@
             td {
                 border: none;
                 line-height: 1;
-                padding: 3px 5px;
+                padding: 1px 5px;
 
                 &.addrem-add, &.addrem-rem {
                     font-weight: bold;
diff -r bcdc35f68d5d -r 13b6260aed99 review/templates/changeset.html
--- a/review/templates/changeset.html	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/templates/changeset.html	Sun Jun 13 15:40:19 2010 -0400
@@ -4,11 +4,20 @@
 {% block title %}Changeset {{ rev.rev() }} - {% 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 %}
+    <div class="group head">
+        <div class="committer-avatar" style="background: transparent url('{{ utils['cset_gravatar'](rev, 60) }}') top left no-repeat">&nbsp;</div>
+    
+        <h2>
+            {{ rev.rev() }}:
+            <span class="desc">{{ rev.description().splitlines()[0] }}</span>
+            <span class="by">by</span>
+            <a href="mailto:{{ utils['email'](rev.user()) }}">{{ utils['templatefilters'].person(rev.user()) }}</a>
+        </h2>
+    
+        {% if utils['len'](rev.description().splitlines()) > 1 %}
+            <div class="fulldesc">{{ "\n".join(rev.description().splitlines()[1:]).strip() }}</div>
+        {% endif %}
+    </div>
 
     {% with %}
         {% set comments = rcset.review_level_comments() %}
diff -r bcdc35f68d5d -r 13b6260aed99 review/templates/macros.html
--- a/review/templates/macros.html	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/templates/macros.html	Sun Jun 13 15:40:19 2010 -0400
@@ -1,7 +1,5 @@
-{% macro gravatar(item, utils) -%}
+{% macro gravatar(item, utils, size=30) -%}
     <div class="avatar">
-        <img height="52" width="52"
-             src="{{ utils['item_gravatar'](item) }}?s=52"
-        />
+        <img src="{{ utils['item_gravatar'](item, size) }}" />
     </div>
-{%- endmacro %}
\ No newline at end of file
+{%- endmacro %}
diff -r bcdc35f68d5d -r 13b6260aed99 review/web_ui.py
--- a/review/web_ui.py	Sun Jun 13 14:37:52 2010 -0400
+++ b/review/web_ui.py	Sun Jun 13 15:40:19 2010 -0400
@@ -35,8 +35,11 @@
 
 LOG_PAGE_LEN = 15
 
-def _item_gravatar(item):
-    return 'http://www.gravatar.com/avatar/%s?s=30' % md5(email(item.author)).hexdigest()
+def _item_gravatar(item, size=30):
+    return 'http://www.gravatar.com/avatar/%s?s=%d' % (md5(email(item.author)).hexdigest(), size)
+
+def _cset_gravatar(cset, size=30):
+    return 'http://www.gravatar.com/avatar/%s?s=%d' % (md5(email(cset.user())).hexdigest(), size)
 
 def _line_type(line):
     return 'rem' if line[0] == '-' else 'add' if line[0] == '+' else 'con'
@@ -52,6 +55,7 @@
     'templatefilters': templatefilters,
     'len': len,
     'item_gravatar': _item_gravatar,
+    'cset_gravatar': _cset_gravatar,
     'line_type': _line_type,
     'categorize_signoffs': _categorize_signoffs,
     'map': map,