Responsive table fixes

4 files changed, 30 insertions, 25 deletions

diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index c96616a0be4..e2baaa625ae 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -6,7 +6,7 @@
         %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
-        %ul.dropdown-menu
+        %ul.dropdown-menu.dropdown-menu-align-right
           - actions.each do |action|
             - next unless can?(current_user, :update_build, action)
             %li
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index 465ddaf713a..4502c397d29 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -1,16 +1,17 @@
-.branch-commit
-  - if deployment.ref
-    %span.icon-container
-      = deployment.tag? ? icon('tag') : icon('code-fork')
-    = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
-  .icon-container.commit-icon
-    = custom_icon("icon_commit")
-  = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
+.table-mobile-content
+  .branch-commit
+    - if deployment.ref
+      %span.icon-container
+        = deployment.tag? ? icon('tag') : icon('code-fork')
+      = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
+    = link_to deployment.short_sha, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-sha"
 
-  %p.commit-title.flex-truncate-parent
-    %span.flex-truncate-child
-      - if commit_title = deployment.commit_title
-        = author_avatar(deployment.commit, size: 20)
-        = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"
-      - else
-        Cant find HEAD commit for this branch
+    %p.commit-title.flex-truncate-parent
+      %span.flex-truncate-child
+        - if commit_title = deployment.commit_title
+          = author_avatar(deployment.commit, size: 20)
+          = link_to_gfm commit_title, namespace_project_commit_path(@project.namespace, @project, deployment.sha), class: "commit-row-message"
+        - else
+          Cant find HEAD commit for this branch
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index d6822106266..d956cb2cc1a 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -1,20 +1,24 @@
-.gl-responsive-table-row.deployment
+.gl-responsive-table-row.deployment{ role: 'row' }
   .table-section.section-10{ role: 'gridcell' }
-    %strong ##{deployment.iid}
+    .table-mobile-header{ role: 'rowheader' } ID
+    %strong.table-mobile-content ##{deployment.iid}
 
   .table-section.section-40{ role: 'gridcell' }
+    .table-mobile-header{ role: 'rowheader' } Commit
     = render 'projects/deployments/commit', deployment: deployment
 
   .table-section.section-15.build-column{ role: 'gridcell' }
+    .table-mobile-header{ role: 'rowheader' } Job
     - if deployment.deployable
-      = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
+      = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link table-mobile-content' do
         #{deployment.deployable.name} (##{deployment.deployable.id})
       - if deployment.user
         by
         = user_avatar(user: deployment.user, size: 20)
 
   .table-section.section-15{ role: 'gridcell' }
-    #{time_ago_with_tooltip(deployment.created_at)}
+    .table-mobile-header{ role: 'rowheader' } Created
+    %span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
 
   .table-section.section-20.environments-actions.table-button-footer{ role: 'gridcell' }
     .btn-group.environment-action-buttons
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index f9068d11542..23aa4c29e69 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -28,12 +28,12 @@
         = link_to "Read more", help_page_path("ci/environments"), class: "btn btn-success"
     - else
       .table-holder
-        .ci-table.environments
+        .ci-table.environments{ role: 'grid' }
           .gl-responsive-table-row.table-row-header{ role: 'row' }
-            .table-section.section-10{ role: 'rollheader' } ID
-            .table-section.section-40{ role: 'rollheader' } Commit
-            .table-section.section-15{ role: 'rollheader' } Job
-            .table-section.section-15{ role: 'rollheader' } Created
+            .table-section.section-10{ role: 'columnheader' } ID
+            .table-section.section-40{ role: 'columnheader' } Commit
+            .table-section.section-15{ role: 'columnheader' } Job
+            .table-section.section-15{ role: 'columnheader' } Created
 
           = render @deployments