# HG changeset patch
# User Steve Losh <steve@stevelosh.com>
# Date 1276909032 14400
# Node ID 78d9f73badd9a17cc18ada861385203ad5c9ef9a
# Parent  5f877e7ce4d7c8fbe19f40c42e22a745adaaf75e
web: refactoring, colorbox changes, avatar border-radii

diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/static/colorbox/jquery.colorbox.js
--- a/review/static/colorbox/jquery.colorbox.js	Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/colorbox/jquery.colorbox.js	Fri Jun 18 20:57:12 2010 -0400
@@ -78,7 +78,7 @@
 		rel: FALSE,
 		opacity: 0.9,
 		preloading: TRUE,
-		current: "image {current} of {total}",
+		current: "{current} of {total}",
 		previous: "previous",
 		next: "next",
 		close: "close",
diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/static/style.css
--- a/review/static/style.css	Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/style.css	Fri Jun 18 20:57:12 2010 -0400
@@ -461,10 +461,11 @@
   margin-bottom: 14px;
 }
 #changeset .content .item-listing .comment, #changeset .content .item-listing .signoff {
-  padding: 8px 10px;
+  padding: 8px 12px 8px 10px;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #ddd;
   position: relative;
+  min-height: 41px;
 }
 #changeset .content .item-listing .comment:first-child, #changeset .content .item-listing .signoff:first-child {
   border-top: none;
@@ -487,14 +488,23 @@
   height: 30px;
   width: 30px;
   margin-top: 5px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
 }
 #changeset .content .item-listing .comment .expand, #changeset .content .item-listing .signoff .expand {
   position: absolute;
-  top: -4px;
-  right: 1px;
-  font-size: 16px;
+  top: 17px;
+  right: -18px;
+  font-size: 14px;
   font-weight: bold;
 }
+#changeset .content .item-listing .comment .expand:hover, #changeset .content .item-listing .signoff .expand:hover {
+  text-decoration: none;
+}
+#changeset .content .item-listing .comment .colorboxed, #changeset .content .item-listing .signoff .colorboxed {
+  display: none;
+}
 #changeset .content .item-listing .signoff .signoff-opinion {
   float: right;
   font: bold 30px/1 "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
@@ -627,6 +637,9 @@
 #changeset .content .diff table td.comment .avatar img {
   height: 30px;
   width: 30px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
 }
 #changeset .content .diff table td.comment .message {
   white-space: pre;
@@ -635,11 +648,32 @@
 #changeset .content .diff table td.comment .author {
   padding-bottom: 3px;
 }
-#colorbox .expand {
+#changeset .content .diff table td.comment .comment-content {
+  position: relative;
+}
+#changeset .content .diff table td.comment .expand {
+  position: absolute;
+  top: -13px;
+  right: -8px;
+  font-size: 14px;
+  font-weight: bold;
+}
+#changeset .content .diff table td.comment .expand:hover {
+  text-decoration: none;
+}
+#changeset .content .diff table td.comment .colorboxed {
   display: none;
 }
+#colorbox #cboxLoadedContent {
+  padding: 10px;
+}
+#colorbox #cboxContent {
+  position: relative;
+}
 #colorbox .avatar {
-  float: right;
+  position: absolute;
+  top: 0px;
+  right: 0px;
 }
 #colorbox .author {
   font-size: 20px;
diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/static/style.less
--- a/review/static/style.less	Fri Jun 18 20:08:01 2010 -0400
+++ b/review/static/style.less	Fri Jun 18 20:57:12 2010 -0400
@@ -405,10 +405,11 @@
         margin-bottom: 14px;
 
         .comment, .signoff {
-            padding: 8px 10px;
+            padding: 8px 12px 8px 10px;
             border-top: 1px solid #fff;
             border-bottom: 1px solid #ddd;
             position: relative;
+            min-height: 41px;
 
             &:first-child {
                 border-top: none;
@@ -431,13 +432,21 @@
                 height: 30px;
                 width: 30px;
                 margin-top: 5px;
+                .border-radius(3px);
             }
             .expand {
                 position: absolute;
-                top: -4px;
-                right: 1px;
-                font-size: 16px;
+                top: 17px;
+                right: -18px;
+                font-size: 14px;
                 font-weight: bold;
+
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+            .colorboxed {
+                display: none;
             }
         }
         .signoff {
@@ -589,6 +598,7 @@
                         img {
                             height: 30px;
                             width: 30px;
+                            .border-radius(3px);
                         }
                     }
                     .message {
@@ -598,6 +608,23 @@
                     .author {
                         padding-bottom: 3px;
                     }
+                    .comment-content {
+                        position: relative;
+                    }
+                    .expand {
+                        position: absolute;
+                        top: -13px;
+                        right: -8px;
+                        font-size: 14px;
+                        font-weight: bold;
+
+                        &:hover {
+                            text-decoration: none;
+                        }
+                    }
+                    .colorboxed {
+                        display: none;
+                    }
                 }
             }
         }
@@ -605,11 +632,17 @@
 }
 
 #colorbox {
-    .expand {
-        display: none;
+    #cboxLoadedContent {
+        padding: 10px;
+    }
+    #cboxContent {
+        position: relative;
     }
     .avatar {
-        float: right;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+
     }
     .author {
         font-size: 20px;
diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/templates/pieces/comment.html
--- a/review/templates/pieces/comment.html	Fri Jun 18 20:08:01 2010 -0400
+++ b/review/templates/pieces/comment.html	Fri Jun 18 20:57:12 2010 -0400
@@ -1,10 +1,11 @@
 <div class="comment group" id="comment-{{ comment.identifier }}">
-    <a href="#comment-{{ comment.identifier }}" class="expand" id="comment-expand-{{ comment.identifier }}">+</a>
+    <a href="#comment-{{ comment.identifier }}" rel="comments" class="expand" id="comment-expand-{{ comment.identifier }}">&rarr;</a>
     <script type="text/javascript">
         $(function() {
-            $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}"});
+            $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}-colorboxed"});
         });
     </script>
+
     <div class="avatar">
         <img src="{{ utils['item_gravatar'](comment, 30) }}" />
     </div>
@@ -15,4 +16,17 @@
         </div>
         <div class="message">{{ comment.message }}</div>
     </div>
+
+    <div id="comment-{{ comment.identifier }}-colorboxed" class="colorboxed">
+        <div class="avatar">
+            <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+        </div>
+        <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>
 </div>
diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/templates/pieces/diff.html
--- a/review/templates/pieces/diff.html	Fri Jun 18 20:08:01 2010 -0400
+++ b/review/templates/pieces/diff.html	Fri Jun 18 20:57:12 2010 -0400
@@ -47,24 +47,7 @@
                     {% set comments = line['comments'] %}
 
                     {% for comment in comments %}
-                        <tr class="comment">
-                            <td class="comment group" colspan="3">
-                                <span class="commentlines disabled">{{ ','.join(utils['map'](utils['str'], comment.lines)) }}</span>
-                                <div class="avatar">
-                                    <img src="{{ utils['item_gravatar'](comment, 30) }}" />
-                                </div>
-
-                                <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>
-                            </td>
-                        </tr>
+                        {% include "pieces/linecomment.html" %}
                     {% endfor %}
                 {% endwith %}
             {% endif %}
diff -r 5f877e7ce4d7 -r 78d9f73badd9 review/templates/pieces/linecomment.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/review/templates/pieces/linecomment.html	Fri Jun 18 20:57:12 2010 -0400
@@ -0,0 +1,38 @@
+<tr class="comment">
+    <td class="comment group" colspan="3" id="comment-{{ comment.identifier }}">
+        <div class="comment-content">
+            <span class="commentlines disabled">{{ ','.join(utils['map'](utils['str'], comment.lines)) }}</span>
+            <a href="#comment-{{ comment.identifier }}" rel="comments" class="expand" id="comment-expand-{{ comment.identifier }}">&rarr;</a>
+            <script type="text/javascript">
+                $(function() {
+                    $("#comment-expand-{{ comment.identifier }}").colorbox({inline: true, href: "#comment-{{ comment.identifier }}-colorboxed"});
+                });
+            </script>
+            <div class="avatar">
+                <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+            </div>
+
+            <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>
+        <div id="comment-{{ comment.identifier }}-colorboxed" class="colorboxed">
+            <div class="avatar">
+                <img src="{{ utils['item_gravatar'](comment, 30) }}" />
+            </div>
+            <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>
+    </td>
+</tr>