Visual improvements of comments display

* Comments now start from the beginning of the row – helps with recognizing
when comments start
* Lighter colors
* Paddings and margins have better harmony
* Highlighted comments are using less harsh colors than yellow

Author: nb

code_comments/htdocs/code-comments.css

@@ -23,7 +23,25 @@ table.code-comments td.check {
 	width: auto !important;
 }
 ul.comments .active {
-	background-color: #FFFFCD;
+	border-color: #555;
+}
+ul.comments .active .meta {
+	background-color: #555;
+}
+ul.comments>li.active .meta .author {
+	color: #eee;
+}
+ul.comments>li .time {
+	font-size: 10px;
+	margin-left: 5px;
+}
+ul.comments>li.active a.time,
+ul.comments>li.active .meta .delete {
+	color: #eee;
+}
+ul.comments>li.active a.time:hover,
+ul.comments>li.active .meta .delete:hover {
+	background: #222;
 }
 ul.comments {
 	margin: 0;
@@ -33,32 +51,34 @@ ul.comments {
 }
 ul.comments>li {
 	border-radius: 4px;
-	border: 1px solid #dfdfdf;
+	border: 1px solid #f5f5f5;
 	margin-bottom: 4px;
 	list-style-type: none;
 }
 ul.comments>li .meta {
-	padding: 6px;
-	background-color: #dfdfdf;
+	padding: 6px 10px;
+	background-color: #f5f5f5;
 }
 ul.comments>li .time {
 	font-size: 10px;
+	margin-left: 5px;
 }
 ul.comments>li .meta img.gravatar {
 	vertical-align: middle;
-	padding: 1px;
-	border: 1px solid #888;
+	border: 1px solid #ddd;
+	margin-right: 5px;
 }
 ul.comments>li .meta .author {
 	font-weight: bold;
 }
 ul.comments>li .meta .delete {
 	float: right;
 	margin-right: 1em;
+	margin-top: 2px;
 }
 
 ul.comments>li .text {
-	padding: 1px 8px;
+	padding: 1px 15px;
 	border: 0;
 	margin: 0;
 }
@@ -86,13 +106,19 @@ table.code tr,
 .trac-diff tbody tr {
 	height: 17px;
 }
-
-table.code tr:hover td,
-#content table.trac-diff tbody tr:hover td {
-	background-color: #FFFFCA;
+a.bubble {
+	position: relative;
 }
-
 a.bubble span.ui-icon {
 	/* this centers the icon horizontally and vertically */
+	background-color: #fff;
+	border-radius: 3px;
+	border: 4px solid #fff;
+	position: absolute;
+	left: 24px;
 	margin: -2px auto 0;
-}
+}
+.diff table.trac-diff td.comments {
+	padding: 10px;
+	border-top: 1px solid #f5f5f5;
+}

code_comments/htdocs/code-comments.js

@@ -47,9 +47,9 @@ var underscore = _.noConflict();
 			this.is_active = this.model.id == CodeComments.active_comment_id;
 		},
 		render: function() {
+			$(this.el).toggleClass('active', this.is_active);
 			$(this.el).html(this.template(_.extend(this.model.toJSON(), {
 				delete_url: CodeComments.delete_url,
-				active: this.is_active,
 				can_delete: CodeComments.is_admin
 			})));
 			return this;

code_comments/templates/js/comment.html

@@ -1,14 +1,12 @@
 <a id="comment-<%= id %>"></a>
 <div class="meta">
     <img class="gravatar" src="http://0.gravatar.com/avatar/<%= email_md5 %>?size=20" width="20" height="20" alt="gravatar for <%= author %>" />
-    <span class="author"><%= author %></span> @ <span class="time"><%= formatted_date %></span>
-    •
-    <a href="<%= permalink %>">#<%= id %></a>
+	<span class="author"><%= author %></span> <a class="time" href="<%= permalink %>"><%= formatted_date %></a>
     <% if (can_delete) { %>
     <a href="<%= delete_url %>?id=<%= id %>" class="delete">Delete</a>
     <% } %>
 
 </div>
-<div class="text <%= active? 'active' : ''%>">
+<div class="text">
 <%= html %>
 </div>

code_comments/templates/js/comments-for-a-line.html

@@ -1,7 +1,4 @@
-<th colspan='<%= colspan %>' class='comments'>
-    &nbsp;
-</th>
-<td>
+<td colspan='<%= colspan + 1 %>' class='comments'>
     <ul class="comments"></ul>
     <button>Reply</button>
 </td>