Add column headers, make pipeline dropdown smaller on mobile31415-responsive-pipelines-table

5 files changed, 72 insertions, 54 deletions

diff --git a/app/assets/javascripts/pipelines/components/time_ago.js b/app/assets/javascripts/pipelines/components/time_ago.js
index 9d6b0094ff4..7bb3b9e789f 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.js
+++ b/app/assets/javascripts/pipelines/components/time_ago.js
@@ -67,32 +67,35 @@ export default {
 
   template: `
     <div class="table-section section-15 pipelines-time-ago">
-      <p
-        class="duration"
-        v-if="hasDuration">
-        <span
-          v-html="iconTimerSvg">
-        </span>
-        {{durationFormated}}
-      </p>
-
-      <p
-        class="finished-at"
-        v-if="hasFinishedTime">
-
-        <i
-          class="fa fa-calendar"
-          aria-hidden="true" />
-
-        <time
-          ref="tooltip"
-          data-toggle="tooltip"
-          data-placement="top"
-          data-container="body"
-          :title="localTimeFinished">
-          {{finishedTimeFormated}}
-        </time>
-      </p>
+      <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 hidden-xs hidden-sm"
+          v-if="hasFinishedTime">
+
+          <i
+            class="fa fa-calendar"
+            aria-hidden="true" />
+
+          <time
+            ref="tooltip"
+            data-toggle="tooltip"
+            data-placement="top"
+            data-container="body"
+            :title="localTimeFinished">
+            {{finishedTimeFormated}}
+          </time>
+        </p>
+      </div>
     </div>
   `,
 };
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
index ff5ae28e062..6f1f54000e7 100644
--- a/app/assets/javascripts/vue_shared/components/commit.js
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -117,13 +117,13 @@ export default {
   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"></i>
         <i v-if="!tag" class="fa fa-code-fork"></i>
       </div>
 
       <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_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
index be0e88962c8..b6617387cf7 100644
--- a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -208,29 +208,37 @@ export default {
   template: `
     <div class="commit gl-responsive-table-row">
       <div class="table-section section-10 commit-link">
-        <ci-badge :status="pipelineStatus"/>
+        <div class="table-mobile-header" role="rowheader">Status</div>
+        <div class="table-mobile-content">
+          <ci-badge :status="pipelineStatus"/>
+        </div>
       </div>
 
       <pipeline-url :pipeline="pipeline"></pipeline-url>
 
       <div class="table-section section-25">
-        <commit-component
-          :tag="commitTag"
-          :commit-ref="commitRef"
-          :commit-url="commitUrl"
-          :short-sha="commitShortSha"
-          :title="commitTitle"
-          :author="commitAuthor"/>
+        <div class="table-mobile-header" role="rowheader">Commit</div>
+        <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="stage-container dropdown js-mini-pipeline-graph"
-          v-if="pipeline.details.stages.length > 0"
-          v-for="stage in pipeline.details.stages">
-
-          <dropdown-stage
-            :stage="stage"
-            :update-dropdown="updateGraphDropdown"/>
+        <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">
+            <dropdown-stage
+              :stage="stage"
+              :update-dropdown="updateGraphDropdown"/>
+          </div>
         </div>
       </div>
 
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index 9e6b350c53a..7d37e09b74b 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -102,6 +102,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/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 53d75a0f763..bb4b5e69073 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -740,6 +740,10 @@
       top: 1px;
       vertical-align: text-bottom;
       position: relative;
+
+      @media (max-width: $screen-xs-max) {
+        max-width: 60%;
+      }
     }
 
     // status icon on the left
@@ -830,6 +834,10 @@
     left: 50%;
     transform: translate(-50%, 0);
     border-width: 0 5px 6px;
+
+    @media (max-width: $screen-sm-max) {
+      left: 70%;
+    }
   }
 
   &::before {
@@ -847,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(-60%, 0);
+  min-width: 150px;
+
+  @media(min-width: $screen-md-min) {
+    transform: translate(-50%, 0);
+    right: auto;
+    left: 50%;
+    min-width: 240px;
+  }
 }
 /**
  * Terminal
@@ -907,11 +921,3 @@
     }
   }
 }
-
-.table-section {
-  @media (max-width: $screen-sm-max) {
-    .ci-status {
-      border: 0;
-    }
-  }
-}