comments layout and style refactored

app/assets/stylesheets/comments.scss

@@ -5,11 +5,30 @@
 }
 
 .comment-thumbnail {
-  padding: 10px 0px;
+  margin-right: 20px;
+  width: 40px;
   img {
     border-radius: 100%;
     border: 4px solid $gray-light;
     width: 40px;
   }
 }
 
+.comment-content {
+  width: 100%;
+}
+
+.comment-content,
+.comment-thumbnail {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.comment-row {
+  padding: .5em 0;
+  display: flex;
+  &:hover {
+    background: $comment-row-hover;
+  }
+}
+

app/assets/stylesheets/types.scss

@@ -5,3 +5,8 @@ h1 {
     font-family: $font-family-sans-serif;
   }
 }
+
+.space-xs-sides {
+  margin-left: .6em;
+  margin-right: .6em;
+}

app/assets/stylesheets/variables.scss

@@ -93,3 +93,7 @@ $placeholder-colour: lighten($second-colour,20%);
 
 $permissions-label-border: $second-colour;
 $permissions-label-font-color: $second-colour;
+
+// comments
+
+$comment-row-hover: lighten($gray-light, 17%);

app/views/comments/_comment.html.slim

@@ -1,29 +1,29 @@
-.row id="comment_#{comment.id}"
-  .col-md-1.comment-thumbnail
-    .pull-right
-      .user-image
-        = user_image_tag(comment.author.email)
-  .col-md-11
-    .panel.panel-default
-      .panel-heading
-        h5
-          strong
+.comment-row id="comment_#{comment.id}"
+  .comment-thumbnail
+    .user-image
+      = user_image_tag(comment.author.email)
+  .comment-content
+    .row
+      .col-xs-8
+        p
+          strong.text-primary
             = comment.author.username
-          '  commented
-          = activity_time_tag comment.updated_at
-          '  ago
-          .pull-right
-            button.btn.btn-link.btn-x.btn-edit-role.destroy_comments_btn[
-              data-placement="left"
-              data-toggle="popover"
-              data-title="Please confirm"
-              data-content='<p>Are you sure you want to remove this \
-              comment?</p><a class="btn btn-default">No</a> <a class="btn \
-              btn-primary" data-method="delete" rel="nofollow" \
-              data-remote="true" href="#{url_for([comment.repository, comment])}">Yes</a>'
-              data-html="true"
-              role="button"]
-              if.fa.fa-trash
-              |  Delete comment
-      .panel-body
-        = markdown(comment.body)
+          span.text-muted.space-xs-sides
+            = activity_time_tag comment.updated_at
+            '  ago
+      .col-xs-4.text-right
+        button.btn.btn-link.btn-xs.btn-edit-role.destroy_comments_btn[
+          data-placement="left"
+          data-toggle="popover"
+          data-title="Please confirm"
+          data-content="<p>Are you sure you want to remove this \
+          comment?</p><a class='btn btn-default'>No</a> <a class='btn \
+          btn-primary' data-method='delete' rel='nofollow' \
+          data-remote='true' href='#{url_for([comment.repository, comment])}'>Yes</a>"
+          data-html="true"
+          role="button"]
+          if.fa.fa-trash
+          |  Delete comment
+
+    = markdown(comment.body)
+

app/views/repositories/show.html.slim

@@ -158,7 +158,7 @@
     .row
       .col-sm-6
         h5
-          span class="number_of_comments"
+          span class="number_of_comments badge"
             = @repository.comments.count
           span class="comment_string"
             - if @repository.comments.count == 1