Merge branch 'responsive-table-fixes' into 'master'

Responsive table fixes

Closes #33376

See merge request !11987

app/assets/javascripts/environments/components/environment.vue

@@ -230,7 +230,7 @@ export default {
       </div>
     </div>
 
-    <div class="content-list environments-container">
+    <div class="environments-container">
       <loading-icon
         label="Loading environments"
         size="3"

app/assets/javascripts/environments/components/environment_actions.vue

@@ -70,7 +70,7 @@ export default {
       </span>
     </button>
 
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu dropdown-menu-align-right">
       <li v-for="action in actions">
         <button
           type="button"

app/assets/javascripts/environments/components/environment_item.vue

@@ -422,11 +422,13 @@ export default {
 </script>
 <template>
   <div
-    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
+    :class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }"
+    role="row">
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="table-mobile-header">
+        class="table-mobile-header"
+        role="rowheader">
         Environment
       </div>
       <a
@@ -497,6 +499,7 @@ export default {
     <div class="table-section section-25" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Commit
       </div>
@@ -513,7 +516,7 @@ export default {
       </div>
       <div
         v-if="!model.isFolder && !hasLastDeploymentKey"
-        class="commit-title">
+        class="commit-title table-mobile-content">
         No deployments yet
       </div>
     </div>
@@ -521,6 +524,7 @@ export default {
     <div class="table-section section-10" role="gridcell">
       <div
         v-if="!model.isFolder"
+        role="rowheader"
         class="table-mobile-header">
         Updated
       </div>

app/assets/javascripts/environments/components/environments_table.vue

@@ -47,19 +47,19 @@ export default {
 <template>
   <div class="ci-table" role="grid">
     <div class="gl-responsive-table-row table-row-header" role="row">
-      <div class="table-section section-10 environments-name" role="rowheader">
+      <div class="table-section section-10 environments-name" role="columnheader">
         Environment
       </div>
-      <div class="table-section section-10 environments-deploy" role="rowheader">
+      <div class="table-section section-10 environments-deploy" role="columnheader">
         Deployment
       </div>
-      <div class="table-section section-15 environments-build" role="rowheader">
+      <div class="table-section section-15 environments-build" role="columnheader">
         Job
       </div>
-      <div class="table-section section-25 environments-commit" role="rowheader">
+      <div class="table-section section-25 environments-commit" role="columnheader">
         Commit
       </div>
-      <div class="table-section section-10 environments-date" role="rowheader">
+      <div class="table-section section-10 environments-date" role="columnheader">
         Updated
       </div>
     </div>

app/assets/stylesheets/framework/responsive-tables.scss

@@ -19,10 +19,6 @@
   .table-section {
     white-space: nowrap;
 
-    .branch-commit {
-      max-width: 100%;
-    }
-
     $section-widths: 10 15 20 25 30 40;
     @each $width in $section-widths {
       &.section-#{$width} {
@@ -87,4 +83,9 @@
   @media (min-width: $screen-md-min) {
     flex: 0 0 90%;
   }
+
+  .avatar {
+    float: none;
+    margin-right: 4px;
+  }
 }

app/assets/stylesheets/pages/environments.scss

@@ -143,8 +143,8 @@
         }
 
         > .btn-group,
-        .external-url,
-        .btn {
+        > .external-url,
+        > .btn {
           flex: 1;
           flex-basis: 28px;
           margin: 0 5px;
@@ -153,6 +153,10 @@
         .dropdown-new {
           width: 100%;
         }
+
+        .dropdown-menu {
+          min-width: initial;
+        }
       }
     }
   }

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

app/views/projects/deployments/_commit.html.haml

-.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

app/views/projects/deployments/_deployment.html.haml

-.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

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