From 1d448a66d7d25cc30733b11eecfcd6893a445fc1 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 16 Jun 2017 12:00:28 +0000
Subject: [PATCH] Create responsive mobile view for pipelines table

---
 .../components/environment_item.vue           |   4 +-
 .../pipelines/components/pipeline_url.vue     |  44 ++--
 .../components/pipelines_actions.vue          |   2 +-
 .../pipelines/components/time_ago.vue         |  56 +++--
 .../vue_shared/components/commit.vue          |   4 +-
 .../vue_shared/components/pipelines_table.vue |  57 +++--
 .../components/pipelines_table_row.vue        |  86 ++++---
 .../stylesheets/framework/page-header.scss    |   4 +
 .../framework/responsive-tables.scss          |  48 +++-
 .../stylesheets/pages/environments.scss       |  37 ---
 app/assets/stylesheets/pages/pipelines.scss   | 176 ++++-----------
 app/assets/stylesheets/pages/status.scss      | 210 +++++++-----------
 .../deployments/_deployment.html.haml         |   4 +-
 .../31415-responsive-pipelines-table-2.yml    |   4 +
 .../merge_requests/created_from_fork_spec.rb  |   2 +-
 .../features/merge_requests/pipelines_spec.rb |   2 +-
 .../projects/pipelines/pipelines_spec.rb      |   2 +-
 .../pipelines/pipeline_url_spec.js            |   4 +-
 .../components/pipelines_table_row_spec.js    |  18 +-
 .../components/pipelines_table_spec.js        |  16 +-
 20 files changed, 347 insertions(+), 433 deletions(-)
 create mode 100644 changelogs/unreleased/31415-responsive-pipelines-table-2.yml

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 614637b637e..809c147bf25 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -535,10 +535,10 @@ export default {
       </span>
     </div>
 
-    <div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
+    <div class="table-section section-30 table-button-footer" role="gridcell">
       <div
         v-if="!model.isFolder"
-        class="btn-group environment-action-buttons"
+        class="btn-group table-action-buttons"
         role="group">
 
         <actions-component
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 4781a8ff1da..8333ec0fbc3 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -23,7 +23,7 @@ export default {
 };
 </script>
 <template>
-  <td>
+  <div class="table-section section-15 hidden-xs hidden-sm">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
@@ -42,24 +42,26 @@ export default {
       class="js-pipeline-url-api api">
       API
     </span>
-    <span
-      v-if="pipeline.flags.latest"
-      class="js-pipeline-url-lastest label label-success"
-      title="Latest pipeline for this branch"
-      ref="tooltip">
-      latest
-    </span>
-    <span
-      v-if="pipeline.flags.yaml_errors"
-      class="js-pipeline-url-yaml label label-danger"
-      :title="pipeline.yaml_errors"
-      ref="tooltip">
-      yaml invalid
-    </span>
-    <span
-      v-if="pipeline.flags.stuck"
-      class="js-pipeline-url-stuck label label-warning">
-      stuck
-    </span>
-  </td>
+    <div class="label-container">
+      <span
+        v-if="pipeline.flags.latest"
+        class="js-pipeline-url-latest label label-success"
+        title="Latest pipeline for this branch"
+        ref="tooltip">
+        latest
+      </span>
+      <span
+        v-if="pipeline.flags.yaml_errors"
+        class="js-pipeline-url-yaml label label-danger"
+        :title="pipeline.yaml_errors"
+        ref="tooltip">
+        yaml invalid
+      </span>
+      <span
+        v-if="pipeline.flags.stuck"
+        class="js-pipeline-url-stuck label label-warning">
+        stuck
+      </span>
+    </div>
+  </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index da5df2a06cf..97b4de26214 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -56,7 +56,7 @@
   <div class="btn-group">
     <button
       type="button"
-      class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
+      class="dropdown-new btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
       title="Manual job"
       data-toggle="dropdown"
       data-placement="top"
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index c47658cd6e6..be3f32afa09 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -55,31 +55,39 @@
   };
 </script>
 <template>
-  <td class="pipelines-time-ago">
-    <p
-      class="duration"
-      v-if="hasDuration">
-      <span v-html="iconTimerSvg">
-      </span>
-      {{durationFormated}}
-    </p>
+  <div class="table-section section-15 pipelines-time-ago">
+    <div
+      class="table-mobile-header"
+      role="rowheader">
+      Duration
+    </div>
+    <div class="table-mobile-content">
+      <p
+        class="duration"
+        v-if="hasDuration">
+        <span
+          v-html="iconTimerSvg">
+        </span>
+        {{durationFormated}}
+      </p>
 
-    <p
-      class="finished-at"
-      v-if="hasFinishedTime">
+      <p
+        class="finished-at hidden-xs hidden-sm"
+        v-if="hasFinishedTime">
 
-      <i
-        class="fa fa-calendar"
-        aria-hidden="true">
-      </i>
+        <i
+          class="fa fa-calendar"
+          aria-hidden="true">
+        </i>
 
-      <time
-        ref="tooltip"
-        data-placement="top"
-        data-container="body"
-        :title="tooltipTitle(finishedTime)">
-        {{timeFormated(finishedTime)}}
-      </time>
-    </p>
-  </td>
+        <time
+          ref="tooltip"
+          data-placement="top"
+          data-container="body"
+          :title="tooltipTitle(finishedTime)">
+          {{timeFormated(finishedTime)}}
+        </time>
+      </p>
+    </div>
+  </div>
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index fcf48b11057..262584769e0 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -110,7 +110,7 @@
 </script>
 <template>
   <div class="branch-commit">
-    <div v-if="hasCommitRef" class="icon-container">
+    <div v-if="hasCommitRef" class="icon-container hidden-xs">
       <i
         v-if="tag"
         class="fa fa-tag"
@@ -125,7 +125,7 @@
 
     <a
       v-if="hasCommitRef"
-      class="ref-name"
+      class="ref-name hidden-xs"
       :href="commitRef.ref_url">
       {{commitRef.name}}
     </a>
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.vue b/app/assets/javascripts/vue_shared/components/pipelines_table.vue
index ebe8fba8a44..884f1ce9689 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table.vue
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.vue
@@ -28,28 +28,37 @@
   };
 </script>
 <template>
-  <table class="table ci-table">
-    <thead>
-      <tr>
-        <th class="js-pipeline-status pipeline-status">Status</th>
-        <th class="js-pipeline-info pipeline-info">Pipeline</th>
-        <th class="js-pipeline-commit pipeline-commit">Commit</th>
-        <th class="js-pipeline-stages pipeline-stages">Stages</th>
-        <th class="js-pipeline-date pipeline-date"></th>
-        <th class="js-pipeline-actions pipeline-actions"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <template
-        v-for="model in pipelines"
-        :model="model">
-        <tr
-          is="pipelines-table-row-component"
-          :pipeline="model"
-          :service="service"
-          :update-graph-dropdown="updateGraphDropdown"
-          />
-      </template>
-    </tbody>
-  </table>
+  <div class="ci-table">
+    <div
+      class="gl-responsive-table-row table-row-header"
+      role="row">
+      <div
+        class="table-section section-10 js-pipeline-status pipeline-status"
+        role="rowheader">
+        Status
+      </div>
+      <div
+        class="table-section section-15 js-pipeline-info pipeline-info"
+        role="rowheader">
+        Pipeline
+      </div>
+      <div
+        class="table-section section-25 js-pipeline-commit pipeline-commit"
+        role="rowheader">
+        Commit
+      </div>
+      <div
+        class="table-section section-15 js-pipeline-stages pipeline-stages"
+        role="rowheader">
+        Stages
+      </div>
+    </div>
+    <pipelines-table-row-component
+      v-for="model in pipelines"
+      :key="model.id"
+      :pipeline="model"
+      :service="service"
+      :update-graph-dropdown="updateGraphDropdown"
+    />
+  </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue b/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
index 33b3375deff..4d5ebe2e9ed 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.vue
@@ -200,47 +200,74 @@ export default {
       }
       return {};
     },
+
+    displayPipelineActions() {
+      return this.pipeline.flags.retryable ||
+             this.pipeline.flags.cancelable ||
+             this.pipeline.details.manual_actions.length ||
+             this.pipeline.details.artifacts.length;
+    },
   },
 };
 </script>
 <template>
-  <tr class="commit">
-    <td class="commit-link">
-      <ci-badge :status="pipelineStatus" />
-    </td>
+  <div class="commit gl-responsive-table-row">
+    <div class="table-section section-10 commit-link">
+      <div class="table-mobile-header"
+        role="rowheader">
+        Status
+      </div>
+      <div class="table-mobile-content">
+        <ci-badge :status="pipelineStatus"/>
+      </div>
+    </div>
 
     <pipeline-url :pipeline="pipeline" />
 
-    <td>
-      <commit-component
-        :tag="commitTag"
-        :commit-ref="commitRef"
-        :commit-url="commitUrl"
-        :short-sha="commitShortSha"
-        :title="commitTitle"
-        :author="commitAuthor"
-        />
-    </td>
-
-    <td class="stage-cell">
-      <div class="stage-container dropdown js-mini-pipeline-graph"
-        v-if="pipeline.details.stages.length > 0"
-        v-for="stage in pipeline.details.stages">
-
-        <pipeline-stage
-          :stage="stage"
-          :update-dropdown="updateGraphDropdown"
-          />
+    <div class="table-section section-25">
+      <div
+        class="table-mobile-header"
+        role="rowheader">
+        Commit
       </div>
-    </td>
+      <div class="table-mobile-content">
+        <commit-component
+          :tag="commitTag"
+          :commit-ref="commitRef"
+          :commit-url="commitUrl"
+          :short-sha="commitShortSha"
+          :title="commitTitle"
+          :author="commitAuthor"/>
+      </div>
+    </div>
+
+    <div class="table-section section-wrap section-15 stage-cell">
+      <div
+        class="table-mobile-header"
+        role="rowheader">
+        Stages
+      </div>
+      <div class="table-mobile-content">
+        <div class="stage-container dropdown js-mini-pipeline-graph"
+          v-if="pipeline.details.stages.length > 0"
+          v-for="stage in pipeline.details.stages">
+          <pipeline-stage
+            :stage="stage"
+            :update-dropdown="updateGraphDropdown"
+            />
+        </div>
+      </div>
+    </div>
 
     <pipelines-timeago
       :duration="pipelineDuration"
       :finished-time="pipelineFinishedAt"
       />
 
-    <td class="pipeline-actions">
-      <div class="pull-right btn-group">
+    <div
+      v-if="displayPipelineActions"
+      class="table-section section-20 table-button-footer pipeline-actions">
+      <div class="btn-group table-action-buttons">
         <pipelines-actions-component
           v-if="pipeline.details.manual_actions.length"
           :actions="pipeline.details.manual_actions"
@@ -249,6 +276,7 @@ export default {
 
         <pipelines-artifacts-component
           v-if="pipeline.details.artifacts.length"
+          class="hidden-xs hidden-sm"
           :artifacts="pipeline.details.artifacts"
           />
 
@@ -271,6 +299,6 @@ export default {
           confirm-action-message="Are you sure you want to cancel this pipeline?"
           />
       </div>
-    </td>
-  </tr>
+    </div>
+  </div>
 </template>
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 5f4211147f3..f1ecd050a0a 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -59,4 +59,8 @@
       margin: 0 2px 0 3px;
     }
   }
+
+  .ci-status {
+    margin-right: 10px;
+  }
 }
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index f0a4c66aa1a..d2c90908baa 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -36,13 +36,58 @@
         align-self: stretch;
         padding: 10px;
         align-items: center;
-        height: 62px;
+        min-height: 62px;
 
         &:not(:first-of-type) {
           border-top: 1px solid $white-normal;
         }
       }
     }
+
+    &.section-wrap {
+      white-space: normal;
+
+      @media (max-width: $screen-sm-max) {
+        flex-wrap: wrap;
+      }
+    }
+  }
+}
+
+
+.table-button-footer {
+  @media (min-width: $screen-md-min) {
+    text-align: right;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    background-color: $gray-normal;
+    align-self: stretch;
+    border-top: 1px solid $border-color;
+
+    .table-action-buttons {
+      padding: 10px 5px;
+      display: flex;
+
+      .btn {
+        border-radius: 3px;
+      }
+
+      > .btn-group,
+      > .external-url,
+      > .btn {
+        flex: 1 1 28px;
+        margin: 0 5px;
+      }
+
+      .dropdown-new {
+        width: 100%;
+      }
+
+      .dropdown-menu {
+        min-width: initial;
+      }
+    }
   }
 }
 
@@ -56,6 +101,7 @@
 
 .table-mobile-header {
   color: $gl-text-color-secondary;
+  text-align: left;
   @include flex-max-width(40);
 
   @media (min-width: $screen-md-min) {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index b24803678ea..89bd437b362 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -124,43 +124,6 @@
 }
 
 .gl-responsive-table-row {
-  .environments-actions {
-    @media (min-width: $screen-md-min) {
-      text-align: right;
-    }
-
-    @media (max-width: $screen-sm-max) {
-      background-color: $gray-normal;
-      align-self: stretch;
-      border-top: 1px solid $border-color;
-
-      .environment-action-buttons {
-        padding: 10px 5px;
-        display: flex;
-
-        .btn {
-          border-radius: 3px;
-        }
-
-        > .btn-group,
-        > .external-url,
-        > .btn {
-          flex: 1;
-          flex-basis: 28px;
-          margin: 0 5px;
-        }
-
-        .dropdown-new {
-          width: 100%;
-        }
-
-        .dropdown-menu {
-          min-width: initial;
-        }
-      }
-    }
-  }
-
   .branch-commit {
     max-width: 100%;
   }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 3d88e273a9e..a85ba3a5955 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -10,17 +10,13 @@
 
   .table-holder {
     width: 100%;
-
-    @media (max-width: $screen-sm-max) {
-      overflow: auto;
-    }
   }
 
   .commit-title {
     margin: 0;
   }
 
-  .table.ci-table {
+  .ci-table {
 
     .label {
       margin-bottom: 3px;
@@ -30,11 +26,6 @@
       color: $black;
     }
 
-    .stage-cell {
-      min-width: 130px; // Guarantees we show at least 4 stages in line
-      width: 20%;
-    }
-
     .pipelines-time-ago {
       text-align: right;
     }
@@ -108,39 +99,7 @@
   }
 }
 
-.table.ci-table {
-
-  &.builds-page tbody tr {
-    height: 71px;
-  }
-
-  tr {
-    th {
-      padding: 16px 8px;
-      border: none;
-    }
-
-    td {
-      padding: 10px 8px;
-    }
-
-    td.environments-actions {
-      padding-right: 0;
-    }
-
-    td.stage-cell {
-      padding: 10px 0;
-    }
-
-    .commit-link {
-      padding: 9px 8px 10px 2px;
-    }
-  }
-
-  tbody {
-    border-top-width: 1px;
-  }
-
+.ci-table {
   .build.retried {
     background-color: $gray-lightest;
   }
@@ -194,13 +153,6 @@
       color: $gl-link-color;
     }
 
-    .commit-title {
-      max-width: 225px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
     .label {
       margin-right: 4px;
     }
@@ -253,11 +205,7 @@
 }
 
 .stage-cell {
-  font-size: 0;
-  padding: 0 4px;
-
-  > .stage-container > div > button > span > svg,
-  > .stage-container > button > svg {
+  .mini-pipeline-graph-dropdown-toggle svg {
     height: 22px;
     width: 22px;
     position: absolute;
@@ -631,6 +579,23 @@
   font-weight: normal;
 }
 
+@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
+  border-color: $color-main;
+  color: $color-main;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $color-light;
+    border-color: $color-dark;
+    color: $color-dark;
+
+    svg {
+      fill: $color-dark;
+    }
+  }
+}
+
 // Dropdown button in mini pipeline graph
 .mini-pipeline-graph-dropdown-toggle {
   border-radius: 100px;
@@ -670,100 +635,32 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    border-color: $green-500;
-    color: $green-500;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $green-50;
-      border-color: $green-600;
-      color: $green-600;
-
-      svg {
-        fill: $green-600;
-      }
-    }
+    @include mini-pipeline-graph-color($green-50, $green-500, $green-600);
   }
 
   &.ci-status-icon-failed {
-    border-color: $red-500;
-    color: $red-500;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $red-50;
-      border-color: $red-600;
-      color: $red-600;
-
-      svg {
-        fill: $red-600;
-      }
-    }
+    @include mini-pipeline-graph-color($red-50, $red-500, $red-600);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    border-color: $orange-500;
-    color: $orange-500;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $orange-50;
-      border-color: $orange-600;
-      color: $orange-600;
-
-      svg {
-        fill: $orange-600;
-      }
-    }
+    @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
   }
 
   &.ci-status-icon-running {
-    border-color: $blue-400;
-    color: $blue-400;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: $blue-50;
-      border-color: $blue-600;
-      color: $blue-600;
-
-      svg {
-        fill: $blue-600;
-      }
-    }
+    @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
   }
 
   &.ci-status-icon-canceled,
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    border-color: $gl-text-color;
-    color: $gl-text-color;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gl-text-color, 0.1);
-      border-color: $gl-text-color;
-    }
+    @include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    border-color: $gray-darkest;
-    color: $gray-darkest;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: rgba($gray-darkest, 0.1);
-      border-color: $gray-darkest;
-    }
+    @include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
   }
 }
 
@@ -842,6 +739,10 @@
       top: 1px;
       vertical-align: text-bottom;
       position: relative;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 60%;
+      }
     }
 
     // status icon on the left
@@ -932,6 +833,11 @@
     left: 50%;
     transform: translate(-50%, 0);
     border-width: 0 5px 6px;
+
+    @media (max-width: $screen-sm-max) {
+      left: 100%;
+      margin-left: -12px;
+    }
   }
 
   &::before {
@@ -949,9 +855,15 @@
  * Center dropdown menu in mini graph
  */
 .mini-pipeline-graph-dropdown-menu.dropdown-menu {
-  right: auto;
-  left: 50%;
-  transform: translate(-50%, 0);
+  transform: translate(-80%, 0);
+  min-width: 150px;
+
+  @media(min-width: $screen-md-min) {
+    transform: translate(-50%, 0);
+    right: auto;
+    left: 50%;
+    min-width: 240px;
+  }
 }
 /**
  * Terminal
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4ed8617b6a3..67ad1ae60af 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,142 +1,82 @@
-.container-fluid {
-  .ci-status {
-    padding: 2px 7px 4px;
-    margin-right: 10px;
-    border: 1px solid $gray-darker;
-    white-space: nowrap;
-    border-radius: 4px;
+@mixin status-color($color-light, $color-main, $color-dark) {
+  color: $color-main;
+  border-color: $color-main;
 
-    &:hover,
-    &:focus {
-      text-decoration: none;
+  &:not(span):hover {
+    background-color: $color-light;
+    color: $color-dark;
+    border-color: $color-dark;
+
+    svg {
+      fill: $color-dark;
+    }
+  }
+
+  svg {
+    fill: $color-main;
+  }
+}
+
+.ci-status {
+  padding: 2px 7px 4px;
+  border: 1px solid $gray-darker;
+  white-space: nowrap;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  svg {
+    height: 13px;
+    width: 13px;
+    position: relative;
+    top: 2px;
+    overflow: visible;
+  }
+
+  &.ci-failed {
+    @include status-color($red-50, $red-500, $red-600);
+  }
+
+  &.ci-success {
+    @include status-color($green-50, $green-500, $green-700);
+  }
+
+  &.ci-canceled,
+  &.ci-disabled,
+  &.ci-manual {
+    color: $gl-text-color;
+    border-color: $gl-text-color;
+
+    &:not(span):hover {
+      background-color: rgba($gl-text-color, .07);
+    }
+  }
+
+  &.ci-pending,
+  &.ci-failed_with_warnings,
+  &.ci-success_with_warnings {
+    @include status-color($orange-50, $orange-500, $orange-700);
+  }
+
+  &.ci-info,
+  &.ci-running {
+    @include status-color($blue-50, $blue-500, $blue-600);
+  }
+
+  &.ci-created,
+  &.ci-skipped {
+    color: $gl-text-color-secondary;
+    border-color: $gl-text-color-secondary;
+
+    &:not(span):hover {
+      background-color: rgba($gl-text-color-secondary, .07);
     }
 
     svg {
-      height: 13px;
-      width: 13px;
-      position: relative;
-      top: 2px;
-      overflow: visible;
-    }
-
-    &.ci-failed {
-      color: $red-500;
-      border-color: $red-500;
-
-      &:not(span):hover {
-        background-color: $red-50;
-        color: $red-600;
-        border-color: $red-600;
-
-        svg {
-          fill: $red-600;
-        }
-      }
-
-      svg {
-        fill: $red-500;
-      }
-    }
-
-    &.ci-success {
-      color: $green-600;
-      border-color: $green-500;
-
-      &:not(span):hover {
-        background-color: $green-50;
-        color: $green-700;
-        border-color: $green-600;
-
-        svg {
-          fill: $green-600;
-        }
-      }
-
-      svg {
-        fill: $green-500;
-      }
-    }
-
-    &.ci-canceled,
-    &.ci-disabled {
-      color: $gl-text-color;
-      border-color: $gl-text-color;
-
-      &:not(span):hover {
-        background-color: rgba($gl-text-color, .07);
-      }
-
-      svg {
-        fill: $gl-text-color;
-      }
-    }
-
-    &.ci-pending,
-    &.ci-success_with_warnings,
-    &.ci-failed_with_warnings {
-      color: $orange-600;
-      border-color: $orange-500;
-
-      &:not(span):hover {
-        background-color: $orange-50;
-        color: $orange-700;
-        border-color: $orange-600;
-
-        svg {
-          fill: $orange-600;
-        }
-      }
-
-      svg {
-        fill: $orange-500;
-      }
-    }
-
-    &.ci-info,
-    &.ci-running {
-      color: $blue-500;
-      border-color: $blue-500;
-
-      &:not(span):hover {
-        background-color: $blue-50;
-        color: $blue-600;
-        border-color: $blue-600;
-
-        svg {
-          fill: $blue-600;
-        }
-      }
-
-      svg {
-        fill: $blue-500;
-      }
-    }
-
-    &.ci-created,
-    &.ci-skipped {
-      color: $gl-text-color-secondary;
-      border-color: $gl-text-color-secondary;
-
-      &:not(span):hover {
-        background-color: rgba($gl-text-color-secondary, .07);
-      }
-
-      svg {
-        fill: $gl-text-color-secondary;
-      }
-    }
-
-    &.ci-manual {
-      color: $gl-text-color;
-      border-color: $gl-text-color;
-
-      &:not(span):hover {
-        background-color: rgba($gl-text-color, .07);
-      }
-
-      svg {
-        fill: $gl-text-color;
-      }
+      fill: $gl-text-color-secondary;
     }
   }
 }
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index d956cb2cc1a..9b2ec9ae41c 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -20,7 +20,7 @@
     .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
+  .table-section.section-20.table-button-footer{ role: 'gridcell' }
+    .btn-group.table-action-button
       = render 'projects/deployments/actions', deployment: deployment
       = render 'projects/deployments/rollback', deployment: deployment
diff --git a/changelogs/unreleased/31415-responsive-pipelines-table-2.yml b/changelogs/unreleased/31415-responsive-pipelines-table-2.yml
new file mode 100644
index 00000000000..59402b85871
--- /dev/null
+++ b/changelogs/unreleased/31415-responsive-pipelines-table-2.yml
@@ -0,0 +1,4 @@
+---
+title: Create responsive mobile view for pipelines table
+merge_request:
+author:
diff --git a/spec/features/merge_requests/created_from_fork_spec.rb b/spec/features/merge_requests/created_from_fork_spec.rb
index bf34c99b92a..b4327743383 100644
--- a/spec/features/merge_requests/created_from_fork_spec.rb
+++ b/spec/features/merge_requests/created_from_fork_spec.rb
@@ -56,7 +56,7 @@ feature 'Merge request created from fork' do
       visit_merge_request(merge_request)
       page.within('.merge-request-tabs') { click_link 'Pipelines' }
 
-      page.within('table.ci-table') do
+      page.within('.ci-table') do
         expect(page).to have_content pipeline.status
         expect(page).to have_content pipeline.id
       end
diff --git a/spec/features/merge_requests/pipelines_spec.rb b/spec/features/merge_requests/pipelines_spec.rb
index 4c76004cb93..744bd484a80 100644
--- a/spec/features/merge_requests/pipelines_spec.rb
+++ b/spec/features/merge_requests/pipelines_spec.rb
@@ -28,7 +28,7 @@ feature 'Pipelines for Merge Requests', feature: true, js: true do
       end
       wait_for_requests
 
-      expect(page).to have_selector('.pipeline-actions')
+      expect(page).to have_selector('.stage-cell')
     end
   end
 
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 026e2ce5b68..db2d1a100a5 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -178,7 +178,7 @@ describe 'Pipelines', :feature, :js do
         end
 
         it 'has a dropdown with play button' do
-          expect(page).to have_selector('.dropdown-toggle.btn.btn-default .icon-play')
+          expect(page).to have_selector('.dropdown-new.btn.btn-default .icon-play')
         end
 
         it 'has link to the manual action' do
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index 594a9856d2c..3c4b20a5f06 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -19,7 +19,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.tagName).toEqual('TD');
+    expect(component.$el.getAttribute('class')).toContain('table-section');
   });
 
   it('should render a link the provided path and id', () => {
@@ -94,7 +94,7 @@ describe('Pipeline Url Component', () => {
       },
     }).$mount();
 
-    expect(component.$el.querySelector('.js-pipeline-url-lastest').textContent).toContain('latest');
+    expect(component.$el.querySelector('.js-pipeline-url-latest').textContent).toContain('latest');
     expect(component.$el.querySelector('.js-pipeline-url-yaml').textContent).toContain('yaml invalid');
     expect(component.$el.querySelector('.js-pipeline-url-stuck').textContent).toContain('stuck');
   });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 346fd0ae010..9475ee28a03 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -34,7 +34,7 @@ describe('Pipelines Table Row', () => {
 
   it('should render a table row', () => {
     component = buildComponent(pipeline);
-    expect(component.$el).toEqual('TR');
+    expect(component.$el.getAttribute('class')).toContain('gl-responsive-table-row');
   });
 
   describe('status column', () => {
@@ -44,13 +44,13 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').getAttribute('href'),
+        component.$el.querySelector('.table-section.commit-link a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render status text', () => {
       expect(
-        component.$el.querySelector('td.commit-link a').textContent,
+        component.$el.querySelector('.table-section.commit-link a').textContent,
       ).toContain(pipeline.details.status.text);
     });
   });
@@ -62,24 +62,24 @@ describe('Pipelines Table Row', () => {
 
     it('should render a pipeline link', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
+        component.$el.querySelector('.table-section:nth-child(2) a').getAttribute('href'),
       ).toEqual(pipeline.path);
     });
 
     it('should render pipeline ID', () => {
       expect(
-        component.$el.querySelector('td:nth-child(2) a > span').textContent,
+        component.$el.querySelector('.table-section:nth-child(2) a > span').textContent,
       ).toEqual(`#${pipeline.id}`);
     });
 
     describe('when a user is provided', () => {
       it('should render user information', () => {
         expect(
-          component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
+          component.$el.querySelector('.table-section:nth-child(2) a:nth-child(3)').getAttribute('href'),
         ).toEqual(pipeline.user.path);
 
         expect(
-          component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
+          component.$el.querySelector('.table-section:nth-child(2) img').getAttribute('data-original-title'),
         ).toEqual(pipeline.user.name);
       });
     });
@@ -142,7 +142,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render an icon for each stage', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
+        component.$el.querySelectorAll('.table-section:nth-child(4) .js-builds-dropdown-button').length,
       ).toEqual(pipeline.details.stages.length);
     });
   });
@@ -154,7 +154,7 @@ describe('Pipelines Table Row', () => {
 
     it('should render the provided actions', () => {
       expect(
-        component.$el.querySelectorAll('td:nth-child(6) ul li').length,
+        component.$el.querySelectorAll('.table-section:nth-child(6) ul li').length,
       ).toEqual(pipeline.details.manual_actions.length);
     });
   });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
index c362cfb7a96..4c35d702004 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js
@@ -32,16 +32,14 @@ describe('Pipelines Table', () => {
     });
 
     it('should render a table', () => {
-      expect(component.$el).toEqual('TABLE');
+      expect(component.$el.getAttribute('class')).toContain('ci-table');
     });
 
     it('should render table head with correct columns', () => {
-      expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
-      expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
-      expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
-      expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
-      expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
-      expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
+      expect(component.$el.querySelector('.table-section.js-pipeline-status').textContent.trim()).toEqual('Status');
+      expect(component.$el.querySelector('.table-section.js-pipeline-info').textContent.trim()).toEqual('Pipeline');
+      expect(component.$el.querySelector('.table-section.js-pipeline-commit').textContent.trim()).toEqual('Commit');
+      expect(component.$el.querySelector('.table-section.js-pipeline-stages').textContent.trim()).toEqual('Stages');
     });
   });
 
@@ -53,7 +51,7 @@ describe('Pipelines Table', () => {
           service: {},
         },
       }).$mount();
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(0);
     });
   });
 
@@ -67,7 +65,7 @@ describe('Pipelines Table', () => {
         },
       }).$mount();
 
-      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
+      expect(component.$el.querySelectorAll('.commit.gl-responsive-table-row').length).toEqual(1);
     });
   });
 });