Show votes as a bar

app/assets/stylesheets/common.scss

@@ -407,21 +407,46 @@ p.time {
 }
 
 .votes {
-  font-size: 14px;
+  font-size: 13px;
-  font-weight: bold;
+  line-height: 15px;
-  padding: 4px 0;
+  .progress {
-  margin: 2px 0;
+    height: 4px;
+    margin: 0;
+    .bar {
+      float: left;
+      height: 100%;
+    }
+    .bar-success {
+      background-color: #468847;
+      @include bg-gradient(#62C462, #51A351);
+    }
+    .bar-danger {
+      background-color: #B94A48;
+      @include bg-gradient(#EE5F5B, #BD362F);
+    }
+  }
   .upvotes {
     display: inline-block;
     color: #468847;
-    padding: 0 4px;
-    margin: 0 2px;
   }
   .downvotes {
     display: inline-block;
     color: #B94A48;
-    padding: 0 4px;
+  }
-    margin: 0 2px;
+}
+.votes-block {
+  margin: 14px 6px 6px 0;
+  .downvotes {
+    float: right;
+  }
+}
+.votes-inline {
+  display: inline-block;
+  margin: 0 8px;
+  .progress {
+    display: inline-block;
+    padding: 0 0 2px;
+    width: 45px;
   }
 }
 

app/views/issues/_show.html.haml

@@ -34,7 +34,12 @@
     - else
        
 
-    - if issue.upvotes > 0
+    - if issue.votes_count > 0
-      %span.badge.badge-success= "+#{issue.upvotes}"
+      .votes.votes-inline
-    - if issue.downvotes > 0
+        .upvotes= issue.upvotes
-      %span.badge.badge-important= "-#{issue.downvotes}"
+        .progress
+          - up_percent = 100.0/issue.votes_count*issue.upvotes
+          - down_percent = 100.0-up_percent
+          .bar.bar-success{style: "width: #{up_percent}%;"}
+          .bar.bar-danger{style: "width: #{down_percent}%;"}
+        .downvotes= issue.downvotes

app/views/issues/show.html.haml

@@ -16,16 +16,21 @@
         %i.icon-edit
         Edit
 
-    %br
+.right
-      .votes#votes
+  .span3.votes.votes-block#votes
-        Votes:
+    .progress
-        .upvotes#upvotes= "#{@issue.upvotes} up"
+      - up_percent = 100.0/@issue.votes_count*@issue.upvotes
-        .downvotes#downvotes= "#{@issue.downvotes} down"
+      - down_percent = 100.0-up_percent
+      .bar.bar-success{style: "width: #{up_percent}%;"}
+      .bar.bar-danger{style: "width: #{down_percent}%;"}
+    .upvotes= "#{@issue.upvotes} up"
+    .downvotes= "#{@issue.downvotes} down"
 
 .back_link
   = link_to project_issues_path(@project) do
     ← To issues list
 
+
 .main_box
   .top_box_content
     %h4

app/views/merge_requests/_merge_request.html.haml

@@ -23,7 +23,12 @@
     authored by #{merge_request.author_name}
     = time_ago_in_words(merge_request.created_at)
     ago
-    - if merge_request.upvotes > 0
+    - if merge_request.votes_count > 0
-      %span.badge.badge-success= "+#{merge_request.upvotes}"
+      .votes.votes-inline
-    - if merge_request.downvotes > 0
+        .upvotes= merge_request.upvotes
-      %span.badge.badge-important= "-#{merge_request.downvotes}"
+        .progress
+          - up_percent = 100.0/merge_request.votes_count*merge_request.upvotes
+          - down_percent = 100.0-up_percent
+          .bar.bar-success{style: "width: #{up_percent}%;"}
+          .bar.bar-danger{style: "width: #{down_percent}%;"}
+        .downvotes= merge_request.downvotes

app/views/merge_requests/show/_mr_title.html.haml

@@ -23,12 +23,15 @@
           %i.icon-edit
           Edit
 
-    %br
+.right
-      .votes#votes
+  .span3.votes.votes-block#votes
-        Votes:
+    .progress
-        .upvotes#upvotes= "#{@merge_request.upvotes} up"
+      - up_percent = 100.0/@merge_request.votes_count*@merge_request.upvotes
-        .downvotes#downvotes= "#{@merge_request.downvotes} down"
+      - down_percent = 100.0-up_percent
-
+      .bar.bar-success{style: "width: #{up_percent}%;"}
+      .bar.bar-danger{style: "width: #{down_percent}%;"}
+    .upvotes= "#{@merge_request.upvotes} up"
+    .downvotes= "#{@merge_request.downvotes} down"
 
 .back_link
   = link_to project_merge_requests_path(@project) do