convert admin runners table to responsive table

app/views/admin/runners/_runner.html.haml

-%tr{ id: dom_id(runner) }
-  %td
+.gl-responsive-table-row{ id: dom_id(runner) }
+  .table-section.section-10
+    .table-mobile-header{ role: "rowheader" } Type
+    .table-mobile-content
       - if runner.instance_type?
         %span.badge.badge-success shared
       - elsif runner.group_type?
@@ -11,41 +13,66 @@
       - unless runner.active?
         %span.badge.badge-danger paused
 
-  %td
-    = link_to admin_runner_path(runner) do
-      = runner.short_sha
-  %td
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Runner token
+    .table-mobile-content
+      = link_to runner.short_sha, admin_runner_path(runner)
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Description
+    .table-mobile-content
       = runner.description
-  %td
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Version
+    .table-mobile-content
       = runner.version
-  %td
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } IP Address
+    .table-mobile-content
       = runner.ip_address
-  %td
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Projects
+    .table-mobile-content
       - if runner.instance_type? || runner.group_type?
         n/a
       - else
         = runner.projects.count(:all)
-  %td
-    #{runner.builds.count(:all)}
-  %td
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Jobs
+    .table-mobile-content
+      = runner.builds.count(:all)
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Tags
+    .table-mobile-content
       - runner.tag_list.sort.each do |tag|
         %span.badge.badge-primary
           = tag
-  %td
+
+  .table-section.section-10
+    .table-mobile-header{ role: 'rowheader' } Last contact
+    .table-mobile-content
       - if runner.contacted_at
         = time_ago_with_tooltip runner.contacted_at
       - else
         Never
-  %td.admin-runner-btn-group-cell
-    .float-right.btn-group
-      = link_to admin_runner_path(runner), class: 'btn btn-sm btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do
+
+  .table-section.table-button-footer.section-10
+    .btn-group.table-action-buttons
+      .btn-group
+        = link_to admin_runner_path(runner), class: 'btn btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do
           = icon('pencil')
-       
+      .btn-group
         - if runner.active?
-        = link_to [:pause, :admin, runner], method: :get, class: 'btn btn-sm btn-default has-tooltip', title: 'Pause', ref: 'tooltip', aria: { label: 'Pause' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
+          = link_to [:pause, :admin, runner], method: :get, class: 'btn btn-default has-tooltip', title: 'Pause', ref: 'tooltip', aria: { label: 'Pause' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
             = icon('pause')
         - else
-        = link_to [:resume, :admin, runner], method: :get, class: 'btn btn-default btn-sm has-tooltip', title: 'Resume', ref: 'tooltip', aria: { label: 'Resume' }, data: { placement: 'top', container: 'body'} do
+          = link_to [:resume, :admin, runner], method: :get, class: 'btn btn-default has-tooltip', title: 'Resume', ref: 'tooltip', aria: { label: 'Resume' }, data: { placement: 'top', container: 'body'} do
             = icon('play')
-      = link_to [:admin, runner], method: :delete, class: 'btn btn-danger btn-sm has-tooltip', title: 'Remove', ref: 'tooltip', aria: { label: 'Remove' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
+      .btn-group
+        = link_to [:admin, runner], method: :delete, class: 'btn btn-danger has-tooltip', title: 'Remove', ref: 'tooltip', aria: { label: 'Remove' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
           = icon('remove')

app/views/admin/runners/index.html.haml

@@ -92,21 +92,18 @@
   %br
 
   - if @runners.any?
-    .runners-content
+    .runners-content.content-list
       .table-holder
-        %table.table
-          %thead
-            %tr
-              %th Type
-              %th Runner token
-              %th Description
-              %th Version
-              %th IP Address
-              %th Projects
-              %th Jobs
-              %th Tags
-              %th Last contact
-              %th
+        .gl-responsive-table-row.table-row-header{ role: 'row' }
+          .table-section.section-10{ role: 'rowheader' } Type
+          .table-section.section-10{ role: 'rowheader' } Runner token
+          .table-section.section-10{ role: 'rowheader' } Description
+          .table-section.section-10{ role: 'rowheader' } Version
+          .table-section.section-10{ role: 'rowheader' } IP Address
+          .table-section.section-10{ role: 'rowheader' } Projects
+          .table-section.section-10{ role: 'rowheader' } Jobs
+          .table-section.section-10{ role: 'rowheader' } Tags
+          .table-section.section-10{ role: 'rowheader' } Last contact
 
         - @runners.each do |runner|
           = render "admin/runners/runner", runner: runner

spec/features/admin/admin_runners_spec.rb

@@ -99,29 +99,25 @@ describe "Admin Runners", :js do
 
         visit admin_runners_path
 
-        within '.runners-content tbody' do
-          within('tr:nth-child(1)') do
+        within '.runners-content .gl-responsive-table-row:nth-child(2)' do
           expect(page).to have_content 'runner-2'
         end
 
-          within('tr:nth-child(2)') do
+        within '.runners-content .gl-responsive-table-row:nth-child(3)' do
           expect(page).to have_content 'runner-1'
         end
-        end
 
         sorting_by 'Last Contact'
 
-        within '.runners-content tbody' do
-          within('tr:nth-child(1)') do
+        within '.runners-content .gl-responsive-table-row:nth-child(2)' do
           expect(page).to have_content 'runner-1'
         end
 
-          within('tr:nth-child(2)') do
+        within '.runners-content .gl-responsive-table-row:nth-child(3)' do
           expect(page).to have_content 'runner-2'
         end
       end
     end
-    end
 
     context "when there are no runners" do
       before do