poc improving pipeline list view for grid css on repsonsive tablespoc-grid-tables

7 files changed, 113 insertions, 44 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipeline_tags.vue b/app/assets/javascripts/pipelines/components/pipeline_tags.vue
new file mode 100644
index 00000000000..b310d272399
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_tags.vue
@@ -0,0 +1,49 @@
+<script>
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarLink,
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <div class="table-section section-10 hidden-xs hidden-sm">
+    <div class="label-container">
+      <span
+        v-if="pipeline.flags.latest"
+        v-tooltip
+        class="js-pipeline-url-latest label label-success"
+        title="Latest pipeline for this branch">
+        latest
+      </span>
+      <span
+        v-if="pipeline.flags.yaml_errors"
+        v-tooltip
+        class="js-pipeline-url-yaml label label-danger"
+        :title="pipeline.yaml_errors">
+        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/pipeline_triggerer.vue b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
new file mode 100644
index 00000000000..20479778aa2
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/pipeline_triggerer.vue
@@ -0,0 +1,41 @@
+<script>
+import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarLink,
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    user() {
+      return this.pipeline.user;
+    },
+  },
+};
+</script>
+<template>
+  <div class="table-section section-5 hidden-xs hidden-sm">
+    <user-avatar-link
+      v-if="user"
+      class="js-pipeline-url-user"
+      :link-href="pipeline.user.path"
+      :img-src="pipeline.user.avatar_url"
+      :imgSize=32
+      :tooltip-text="pipeline.user.name"
+    />
+    <span
+      v-if="!user"
+      class="js-pipeline-url-api api">
+      API
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 2ca5ac2912f..bb72f366f3b 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -23,45 +23,11 @@ export default {
 };
 </script>
 <template>
-  <div class="table-section section-15 hidden-xs hidden-sm">
+  <div class="table-section section-5 hidden-xs hidden-sm">
     <a
       :href="pipeline.path"
       class="js-pipeline-url-link">
       <span class="pipeline-id">#{{pipeline.id}}</span>
     </a>
-    <span>by</span>
-    <user-avatar-link
-      v-if="user"
-      class="js-pipeline-url-user"
-      :link-href="pipeline.user.path"
-      :img-src="pipeline.user.avatar_url"
-      :tooltip-text="pipeline.user.name"
-    />
-    <span
-      v-if="!user"
-      class="js-pipeline-url-api api">
-      API
-    </span>
-    <div class="label-container">
-      <span
-        v-if="pipeline.flags.latest"
-        v-tooltip
-        class="js-pipeline-url-latest label label-success"
-        title="Latest pipeline for this branch">
-        latest
-      </span>
-      <span
-        v-if="pipeline.flags.yaml_errors"
-        v-tooltip
-        class="js-pipeline-url-yaml label label-danger"
-        :title="pipeline.yaml_errors">
-        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_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 5088d92209f..2fa48e311cb 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -29,19 +29,24 @@
       class="gl-responsive-table-row table-row-header"
       role="row">
       <div
+        class="table-section section-5 js-pipeline-status pipeline-id"
+        role="rowheader">
+        Pipeline
+      </div>
+      <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"
+        class="table-section section-5 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"
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index c3f1c426d8a..54eebdb7c83 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -6,6 +6,8 @@ import pipelinesArtifactsComponent from './pipelines_artifacts.vue';
 import ciBadge from '../../vue_shared/components/ci_badge_link.vue';
 import pipelineStage from './stage.vue';
 import pipelineUrl from './pipeline_url.vue';
+import pipelineTriggerer from './pipeline_triggerer.vue';
+import pipelineTags from './pipeline_tags.vue';
 import pipelinesTimeago from './time_ago.vue';
 import commitComponent from '../../vue_shared/components/commit.vue';
 
@@ -33,6 +35,8 @@ export default {
     commitComponent,
     pipelineStage,
     pipelineUrl,
+    pipelineTriggerer,
+    pipelineTags,
     ciBadge,
     pipelinesTimeago,
   },
@@ -208,6 +212,8 @@ export default {
 </script>
 <template>
   <div class="commit gl-responsive-table-row">
+    <!-- <pipeline-url :pipeline="pipeline" /> -->
+
     <div class="table-section section-10 commit-link">
       <div class="table-mobile-header"
         role="rowheader">
@@ -218,9 +224,11 @@ export default {
       </div>
     </div>
 
-    <pipeline-url :pipeline="pipeline" />
+    <pipeline-triggerer :pipeline="pipeline" />
+
+    <pipeline-tags :pipeline="pipeline" />
 
-    <div class="table-section section-25">
+    <div class="table-section section-35">
       <div
         class="table-mobile-header"
         role="rowheader">
@@ -262,7 +270,7 @@ export default {
 
     <div
       v-if="displayPipelineActions"
-      class="table-section section-20 table-button-footer pipeline-actions">
+      class="table-section section-15 table-button-footer pipeline-actions">
       <div class="btn-group table-action-buttons">
         <pipelines-actions-component
           v-if="pipeline.details.manual_actions.length"
diff --git a/app/assets/javascripts/pipelines/components/time_ago.vue b/app/assets/javascripts/pipelines/components/time_ago.vue
index 037684b4e72..7a8e686ce01 100644
--- a/app/assets/javascripts/pipelines/components/time_ago.vue
+++ b/app/assets/javascripts/pipelines/components/time_ago.vue
@@ -57,7 +57,7 @@
   };
 </script>
 <template>
-  <div class="table-section section-15 pipelines-time-ago">
+  <div class="table-section section-10 pipelines-time-ago">
     <div
       class="table-mobile-header"
       role="rowheader">
diff --git a/app/assets/stylesheets/framework/responsive-tables.scss b/app/assets/stylesheets/framework/responsive-tables.scss
index 8e653c443cf..c47a6291be2 100644
--- a/app/assets/stylesheets/framework/responsive-tables.scss
+++ b/app/assets/stylesheets/framework/responsive-tables.scss
@@ -19,7 +19,7 @@
   .table-section {
     white-space: nowrap;
 
-    $section-widths: 10 15 20 25 30 40;
+    $section-widths: 5 10 15 20 25 30 35 40;
     @each $width in $section-widths {
       &.section-#{$width} {
         flex: 0 0 #{$width + '%'};