a150f425c074

web: style the signoff list
[view raw] [browse files]
author Steve Losh <steve@stevelosh.com>
date Sat, 12 Jun 2010 23:49:19 -0400
parents fcbf8d764330
children 4a6d47faac16
branches/tags (none)
files review/static/style.css review/static/style.less review/templates/changeset.html

Changes

--- a/review/static/style.css	Sat Jun 12 23:12:15 2010 -0400
+++ b/review/static/style.css	Sat Jun 12 23:49:19 2010 -0400
@@ -147,6 +147,10 @@
 body .disabled {
   display: none;
 }
+body .avatar img {
+  height: 52px;
+  width: 52px;
+}
 form .field {
   position: relative;
 }
@@ -158,13 +162,13 @@
 }
 form .field label.infield {
   display: block;
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: Monaco, Consolas, "Courier New", monospace;
   position: absolute;
   top: 5px;
   left: 5px;
 }
 form .field textarea {
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: Monaco, Consolas, "Courier New", monospace;
   padding: 5px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -199,7 +203,7 @@
 }
 #index .content table tr td.node .hash {
   color: #888888;
-  font: normal 11px Menlo, Monaco, Consolas, "Courier New", monospace;
+  font: normal 11px Monaco, Consolas, "Courier New", monospace;
 }
 #index .content table tr td.stats {
   text-align: right;
@@ -373,9 +377,81 @@
   -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 .review-level-comments {
+  background-color: #faf9ef;
+  border: 1px solid #ccc;
+  margin-bottom: 14px;
+}
+#changeset .content .review-level-comments .comment {
+  padding: 10px 10px 12px;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #ddd;
+}
+#changeset .content .review-level-comments .comment:first-child {
+  border-top: none;
+}
+#changeset .content .review-level-comments .comment:last-child {
+  border-bottom: none;
+}
+#changeset .content .review-level-comments .comment img {
+  float: right;
+}
+#changeset .content .review-level-comments .comment .message {
+  background-color: #fefefd;
+  border: 1px solid #eee;
+  font-family: Monaco, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  padding: 10px;
+  width: 650px;
+}
 #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;
 }
--- a/review/static/style.less	Sat Jun 12 23:12:15 2010 -0400
+++ b/review/static/style.less	Sat Jun 12 23:49:19 2010 -0400
@@ -1,5 +1,5 @@
 @font-normal: "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
-@font-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-mono: Monaco, Consolas, "Courier New", monospace;
 
 @c-cream: #edecc7;
 @c-green: #648239;
@@ -11,6 +11,7 @@
 @c-light: #888888;
 
 @c-metal: #eaeaea;
+@c-soft-cream: lighten(@c-cream, 12%);
 
 @content-width: 800px;
 @content-background: rgb(250, 250, 250);
@@ -178,6 +179,10 @@
     .disabled {
         display: none;
     }
+    .avatar img { 
+        height: 52px;
+        width: 52px;
+    }
 }
 
 form {
@@ -308,17 +313,88 @@
             border: 1px solid #ccc;
             .border-radius(3px);
             padding: 15px 10px;
-            background-color: lighten(@c-cream, 12%);
+            background-color: @c-soft-cream;
             .box-shadow(0px, 5px, 5px, rgba(0, 0, 0, 0.02);
         }
     }
 
+    .review-level-comments {
+        background-color: @c-soft-cream;
+        border: 1px solid #ccc;
+        margin-bottom: 14px;
 
+        .comment {
+            padding: 10px 10px 12px;
+            border-top: 1px solid #fff;
+            border-bottom: 1px solid #ddd;
+
+            &:first-child {
+                border-top: none;
+            }
+            &:last-child {
+                border-bottom: none;
+            }
+            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;
+                text-transform: capitalize;
+                margin-right: 15px;
+
+                &.yes { color: saturate(@c-green - #111, 20%); }
+                &.no { color: #c00; }
+                &.neutral { color: @c-cream - #333; }
+            }
+            .author {
+                .opinion {
+                    font-weight: bold;
+                }
+            }
+            .message {
+                background-color: lighten(@c-soft-cream, 4%);
+                border: 1px solid #eee;
+                font-family: @font-mono;
+                font-size: 12px;
+                padding: 10px;
+                width: 500px;
+            }
+        }
+    }
     .add-signoff {
         margin-bottom: 40px;
 
--- a/review/templates/changeset.html	Sat Jun 12 23:12:15 2010 -0400
+++ b/review/templates/changeset.html	Sat Jun 12 23:49:19 2010 -0400
@@ -10,18 +10,26 @@
         <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) }}
-            <div>
-                <div class="author">
-                    <a href="mailto:${ email(comment.author) }">{{ utils['templatefilters'].person(comment.author) }}</a>
-                    said:
-                </div>
-                <div class="message">{{ comment.message }}</div>
+    {% with %}
+        {% set comments = rcset.review_level_comments() %}
+
+        {% if comments %}
+            <div class="review-level-comments">
+                {% for comment in comments %}
+                    <div class="comment group">
+                        {{ macros.gravatar(comment, utils) }}
+                        <div>
+                            <div class="author">
+                                <a href="mailto:${ email(comment.author) }">{{ utils['templatefilters'].person(comment.author) }}</a>
+                                said:
+                            </div>
+                            <div class="message">{{ comment.message }}</div>
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
-        </div>
-    {% endfor %}
+        {% endif %}
+    {% endwith %}
 
     {% if not read_only %}
         <div class="add-review-comment togglebox group">
@@ -39,18 +47,28 @@
 
     <h2>Signoffs</h2>
 
-    {% for signoff in rcset.signoffs %}
-        <div class="signoff {{ signoff.opinion or 'neutral' }}">
-            {{ macros.gravatar(signoff, utils) }}
-            <div>
-                <div class="author">
-                    <a href="mailto:${ email(signoff.author) }">{{ utils['templatefilters'].person(signoff.author) }}</a>
-                    signed off as <span class="opinion">{{ signoff.opinion or "neutral" }}</span> on this changeset, saying:
-                </div>
-                <div class="message">{{ signoff.message }}</div>
+    {% with %}
+        {% set signoffs = rcset.signoffs %}
+
+        {% if signoffs %}
+            <div class="signoffs">
+                {% for signoff in signoffs %}
+                    <div class="signoff group {{ signoff.opinion or 'neutral' }}">
+                        {{ macros.gravatar(signoff, utils) }}
+                        <div class="signoff-opinion {{ signoff.opinion or "neutral" }}">{{ signoff.opinion or "meh" }}</div>
+                        
+                        <div>
+                            <div class="author">
+                                <a href="mailto:${ email(signoff.author) }">{{ utils['templatefilters'].person(signoff.author) }}</a>
+                                signed off as <span class="opinion">{{ signoff.opinion or "neutral" }}</span> on this changeset, saying:
+                            </div>
+                            <div class="message">{{ signoff.message }}</div>
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
-        </div>
-    {% endfor %}
+        {% endif %}
+    {% endwith %}
 
     {% if not read_only %}
         <div class="add-signoff togglebox group">