Create responsive mobile view for pipelines table

3 files changed, 56 insertions, 46 deletions

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>