Improve milestone show page

app/assets/javascripts/milestones.js.coffee

 $ ->
-  $('.milestone-issue-filter tr[data-closed]').addClass('hide')
+  $('.milestone-issue-filter li[data-closed]').addClass('hide')
 
   $('.milestone-issue-filter ul.nav li a').click ->
     $('.milestone-issue-filter li').toggleClass('active')
-    $('.milestone-issue-filter tr[data-closed]').toggleClass('hide')
+    $('.milestone-issue-filter li[data-closed]').toggleClass('hide')
     false
 
-  $('.milestone-merge-requests-filter tr[data-closed]').addClass('hide')
+  $('.milestone-merge-requests-filter li[data-closed]').addClass('hide')
 
   $('.milestone-merge-requests-filter ul.nav li a').click ->
     $('.milestone-merge-requests-filter li').toggleClass('active')
-    $('.milestone-merge-requests-filter tr[data-closed]').toggleClass('hide')
+    $('.milestone-merge-requests-filter li[data-closed]').toggleClass('hide')
     false

app/assets/stylesheets/gitlab_bootstrap/common.scss

@@ -25,6 +25,7 @@
 /** PILLS & TABS**/
 .nav-pills {
   .active a {
+    background: $primary_color;
   }
 
   > li > a {

app/views/milestones/show.html.haml

@@ -38,51 +38,46 @@
       = gfm escape_once(@milestone.title)
 
   .ui-box-body
-    %h5
+    %p
       Progress:
-      %small
-        #{@milestone.closed_items_count} closed
-        –
-        #{@milestone.open_items_count} open
+      #{@milestone.closed_items_count} closed
+      –
+      #{@milestone.open_items_count} open
       %span.right= @milestone.expires_at
     .progress.progress-info
       .bar{style: "width: #{@milestone.percent_complete}%;"}
 
 
   - if @milestone.description.present?
-    .bottom_box_content
+    .ui-box-bottom
       = preserve do
         = markdown @milestone.description
 
 
 .row
   .span6
-    %table.milestone-issue-filter
-      %thead
-        %tr
-          %th
-            %ul.nav.nav-pills
-              %li.active= link_to('Open Issues', '#')
-              %li=link_to('All Issues', '#')
-      - @issues.each do |issue|
-        %tr{data: {closed: issue.closed}}
-          %td
+    .ui-box.milestone-issue-filter
+      .title
+        %ul.nav.nav-pills
+          %li.active= link_to('Open Issues', '#')
+          %li=link_to('All Issues', '#')
+      %ul.well-list
+        - @issues.each do |issue|
+          %li{data: {closed: issue.closed}}
             = link_to [@project, issue] do
               %span.badge.badge-info ##{issue.id}
             –
             = link_to_gfm truncate(issue.title, length: 60), [@project, issue]
 
   .span6
-    %table.milestone-merge-requests-filter
-      %thead
-        %tr
-          %th
-            %ul.nav.nav-pills
-              %li.active= link_to('Open Merge Requests', '#')
-              %li=link_to('All Merge Requests', '#')
-      - @merge_requests.each do |merge_request|
-        %tr{data: {closed: merge_request.closed}}
-          %td
+    .ui-box.milestone-merge-requests-filter
+      .title
+        %ul.nav.nav-pills
+          %li.active= link_to('Open Merge Requests', '#')
+          %li=link_to('All Merge Requests', '#')
+      %ul.well-list
+        - @merge_requests.each do |merge_request|
+          %li{data: {closed: merge_request.closed}}
             = link_to [@project, merge_request] do
               %span.badge.badge-info ##{merge_request.id}
             –