# HG changeset patch
# User Steve Losh <steve@stevelosh.com>
# Date 1276390280 14400
# Node ID c4db1e4882dd472f2e9f190a9974aad8325c98b0
# Parent  cd17a814bf17985fec4bbf6066cd6559f469835e
web: yet more styling. index is done for now.

diff -r cd17a814bf17 -r c4db1e4882dd review/static/bg.png
Binary file review/static/bg.png has changed
diff -r cd17a814bf17 -r c4db1e4882dd review/static/extra.css
--- a/review/static/extra.css	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/static/extra.css	Sat Jun 12 20:51:20 2010 -0400
@@ -12,3 +12,35 @@
         rgba(255, 255, 255, 0.0) 100%
     );
 }
+
+#index .content table tr:nth-child(even) td.node {
+    background: -webkit-gradient(
+        linear,
+        left 50%,
+        right 50%,
+        color-stop(0.0, rgba(250, 250, 250, 1)),
+        color-stop(0.35, rgba(250, 250, 250, 0.0))
+    );
+    background: -moz-linear-gradient(
+        center left,
+        rgba(250, 250, 250, 1) 0%,
+        rgba(250, 250, 250, 0) 35%
+    );
+}
+
+
+#index .content table tr:nth-child(even) td.stats {
+    background: -webkit-gradient(
+        linear,
+        right 50%,
+        left 50%,
+        color-stop(0.0, rgba(250, 250, 250, 1)),
+        color-stop(0.9, rgba(250, 250, 250, 0.0))
+    );
+    background: -moz-linear-gradient(
+        center right,
+        rgba(250, 250, 250, 1) 0%,
+        rgba(250, 250, 250, 0) 35%
+    );
+}
+
diff -r cd17a814bf17 -r c4db1e4882dd review/static/style.css
--- a/review/static/style.css	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/static/style.css	Sat Jun 12 20:51:20 2010 -0400
@@ -13,6 +13,7 @@
 }
 html, body {
   background-color: #edecc7;
+  background: #edecc7 url('bg.png') top left repeat;
 }
 body {
   color: #292620;
@@ -80,6 +81,7 @@
   border-right: 1px solid #a9a883;
   border-left: 1px solid #a9a883;
   border-bottom: 1px solid #989772;
+  margin-right: 3px;
 }
 body .header .remotes form a span {
   background-color: #edecc7;
@@ -112,10 +114,13 @@
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
   margin-top: 20px;
   padding: 21px 20px;
   width: 760px;
-  background-color: #fdfdfd;
+  background-color: #fafafa;
 }
 body .footer {
   text-align: center;
@@ -129,3 +134,70 @@
 body .footer a:hover {
   color: #bf4c18;
 }
+body a {
+  color: #b6410c;
+  text-decoration: none;
+  font-weight: bold;
+}
+body a:hover {
+  text-decoration: underline;
+}
+body a:active {
+  color: #bf1900;
+}
+#index .content table {
+  width: 100%;
+}
+#index .content table tr {
+  border: none;
+}
+#index .content table tr:nth-child(even) {
+  background-color: #f5f5e1;
+}
+#index .content table tr td {
+  border: none;
+}
+#index .content table tr td a {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+#index .content table tr td.node .rev {
+  font-weight: bold;
+}
+#index .content table tr td.node .sep {
+  font-weight: normal;
+  padding: 0px 2px 0px 1px;
+  color: #bebebe;
+}
+#index .content table tr td.node .hash {
+  color: #888888;
+  font: normal 11px Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+#index .content table tr td.stats {
+  text-align: right;
+}
+#index .content table tr td.stats .badge {
+  color: white;
+  font-weight: bold;
+  display: inline-block;
+  line-height: 1;
+  padding: 4px 5px;
+  margin-left: 4px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+#index .content table tr td.stats .badge.yes {
+  background-color: green;
+}
+#index .content table tr td.stats .badge.no {
+  background-color: red;
+}
+#index .content table tr td.stats .badge.neutral {
+  background-color: #666;
+}
+#index .content table tr td.stats .badge.comments {
+  background-color: #ff6f24;
+}
diff -r cd17a814bf17 -r c4db1e4882dd review/static/style.less
--- a/review/static/style.less	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/static/style.less	Sat Jun 12 20:51:20 2010 -0400
@@ -8,9 +8,10 @@
 @c-orange-light: #FF6F24;
 
 @c-dark: #292620;
-@c-light: #fcfcfc;
+@c-light: #888888;
 
 @content-width: 800px;
+@content-background: rgb(250, 250, 250);
 
 .border-radius(@radius) {
     -webkit-border-radius: @radius;
@@ -69,6 +70,7 @@
 
 html, body {
     background-color: @c-cream;
+    background: @c-cream url('bg.png') top left repeat;
 }
 body {
     color: @c-dark;
@@ -77,7 +79,7 @@
     .hr {
         height: 0;
         width: 100%;
-        border-top: 1px solid @c-light;
+        border-top: 1px solid #fcfcfc;
     }
     .wrap {
         width: @content-width;
@@ -123,6 +125,7 @@
 
                 a {
                     .button(@c-cream, #000, 12px, 1.45);
+                    margin-right: 3px;
                 }
             }
         }
@@ -133,12 +136,13 @@
         .wrap {
             border: 1px solid darken(@c-cream, 20%);
             .border-radius(7px);
+            .box-shadow(0px, 5px, 10px, rgba(0, 0, 0, 0.05));
             @content-padding-horiz: 20px;
 
             margin-top: 20px;
             padding: 21px @content-padding-horiz;
             width: @content-width - (@content-padding-horiz * 2);
-            background-color: #fdfdfd;
+            background-color: @content-background;
         }
     }
     .footer {
@@ -155,4 +159,86 @@
             }
         }
     }
+    a {
+        color: saturate(darken(@c-orange, 10%), 10%);
+        text-decoration: none;
+        font-weight: bold;
+
+        &:hover {
+            text-decoration: underline;
+        }
+        &:active {
+            color: @c-orange - #033;
+        }
+    }
 }
+
+#index {
+    .content {
+        table {
+            width: 100%;
+
+            tr {
+                border: none;
+
+                &:nth-child(even) {
+                    background-color: lighten(@c-cream, 8%);
+                }
+
+                td {
+                    border: none;
+
+                    a {
+                        width: 100%;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    &.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;
+                        }
+                    }
+                    &.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);
+
+                            &.yes {
+                                background-color: green;
+                            }
+                            &.no {
+                                background-color: red;
+                            }
+                            &.neutral {
+                                background-color: #666;
+                            }
+                            &.comments {
+                                background-color: @c-orange-light;
+                            }
+
+
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff -r cd17a814bf17 -r c4db1e4882dd review/templates/base.html
--- a/review/templates/base.html	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/templates/base.html	Sat Jun 12 20:51:20 2010 -0400
@@ -22,10 +22,7 @@
             <div class="wrap">
                 <h1>
                     Reviewing
-                    <a href="/">
-                        {{ utils["basename"](datastore.target.root) }}
-                    </a>
-                    {% block header %}{% endblock %}
+                    <a href="/">{{ utils["basename"](datastore.target.root) }}</a>
                 </h1>
                 <div class="remotes">
                     {% if not read_only %}
@@ -57,7 +54,10 @@
         </div>
         <div class="footer">
             <div class="wrap">
-                <p>reviewing {{ utils["basename"](datastore.target.root) }} with <a href="http://bitbucket.org/sjl/hg-review/">hg-review</a></p>
+                <p>
+                    reviewing {{ utils["basename"](datastore.target.root) }}
+                    with <a href="http://bitbucket.org/sjl/hg-review/">hg-review</a>
+                </p>
             </div>
         </div>
     </body>
diff -r cd17a814bf17 -r c4db1e4882dd review/templates/index.html
--- a/review/templates/index.html	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/templates/index.html	Sat Jun 12 20:51:20 2010 -0400
@@ -11,13 +11,29 @@
             {% set rev = rcset.target[rcset.node] %}
             {% set node_short = utils['node_short'](rev.node()) %}
             <tr class="${ loop.parity }">
-                <td>{{ rev.rev() }}:{{ node_short }}</td>
-                <td>
+                <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>
                 </td>
-                <td class="last">
-                    {{ utils['len'](rcset.comments) }} comments,
-                    {{ utils['len'](rcset.signoffs) }} signoffs
+                <td class="stats">
+                    {% with %}
+                        {% set comments = rcset.comments %}
+                        {% set signoffs = utils['categorize_signoffs'](rcset.signoffs) %}
+
+                        {% if comments %}
+                        <span class="badge comments">{{ utils['len'](comments) }} comment{% if utils['len'](comments) > 1 %}s{% endif %}</span>
+                        {% endif %}
+
+                        {% if signoffs['yes'] %}
+                            <span class="badge signoffs yes">{{ signoffs['yes'] }} yes</span>
+                        {% endif %}
+                        {% if signoffs['neutral'] %}
+                            <span class="badge signoffs neutral">{{ signoffs['neutral'] }} neutral</span>
+                        {% endif %}
+                        {% if signoffs['no'] %}
+                            <span class="badge signoffs no">{{ signoffs['no'] }} no</span>
+                        {% endif %}
+                    {% endwith %}
                 </td>
             </tr>
         {% endfor %}
diff -r cd17a814bf17 -r c4db1e4882dd review/web_ui.py
--- a/review/web_ui.py	Sat Jun 12 19:33:07 2010 -0400
+++ b/review/web_ui.py	Sat Jun 12 20:51:20 2010 -0400
@@ -41,6 +41,10 @@
 def _line_type(line):
     return 'rem' if line[0] == '-' else 'add' if line[0] == '+' else 'con'
 
+def _categorize_signoffs(signoffs):
+    return { 'yes': len(filter(lambda s: s.opinion == 'yes', signoffs)),
+             'no': len(filter(lambda s: s.opinion == 'no', signoffs)),
+             'neutral': len(filter(lambda s: s.opinion == '', signoffs)),}
 utils = {
     'node_short': short,
     'basename': os.path.basename,
@@ -50,6 +54,7 @@
     'len': len,
     'item_gravatar': _item_gravatar,
     'line_type': _line_type,
+    'categorize_signoffs': _categorize_signoffs,
 }
 
 datastore = None