Set width on stage columns; min width on table with scroll on mobile; add avatar to commit column

app/assets/stylesheets/framework/avatar.scss

@@ -20,6 +20,7 @@
   }
 
   &.s16 { width: 16px; height: 16px; margin-right: 6px; }
+  &.s20 { width: 20px; height: 20px; margin-right: 7px; }
   &.s24 { width: 24px; height: 24px; margin-right: 8px; }
   &.s26 { width: 26px; height: 26px; margin-right: 8px; }
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }

app/assets/stylesheets/framework/variables.scss

@@ -17,6 +17,7 @@ $focus-border-color:    #3aabf0;
 $table-border-color:    #f0f0f0;
 $background-color:      #fafafa;
 $dark-background-color: #f7f7f7;
+$table-text-gray:       #8f8f8f;
 
 /*
  * Text

app/assets/stylesheets/pages/builds.scss

@@ -83,44 +83,6 @@
   }
 }
 
-
-.table.builds {
-
-  tr {
-    th {
-      padding: 18px 10px;
-      border: none;
-    }
-  }
-
-  tbody {
-    border-top-width: 1px;
-  }
-
-  .branch-commit {
-
-    .branch-name {
-      max-width: 180px;
-      overflow: hidden;
-      display: inline-block;
-      white-space: nowrap;
-      vertical-align: top;
-      text-overflow: ellipsis;
-      margin-left: 10px;
-    }
-
-    .commit-id {
-      color: $gl-link-color;
-    }
-  }
-
-  .build-link {
-    a {
-      color: $gl-dark-link-color;
-    }
-  }
-}
-
 .build-trace {
   background: $ci-output-bg;
   color: $ci-text-color;

app/assets/stylesheets/pages/pipelines.scss

 .pipelines {
   .stage {
-    max-width: 100px;
+    max-width: 70px;
+    width: 70px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .duration, .finished_at {
+  .duration, .finished-at {
     margin: 4px 0;
   }
 
@@ -22,3 +23,85 @@
     margin: 4px;
   }
 }
+
+.content-list.pipelines {
+  width: 100%;
+  overflow: auto;
+}
+
+.table.builds {
+  min-width: 1100px;
+
+  tr {
+    th {
+      padding: 18px 10px;
+      border: none;
+    }
+  }
+
+  tbody {
+    border-top-width: 1px;
+  }
+
+  .branch-commit {
+
+    .branch-name {
+      margin-left: 8px;
+      font-weight: bold;
+      max-width: 180px;
+      overflow: hidden;
+      display: inline-block;
+      white-space: nowrap;
+      vertical-align: top;
+      text-overflow: ellipsis;
+    }
+
+    .fa {
+      margin: 0 6px;
+    }
+
+    .commit-id {
+      color: $gl-link-color;
+      margin-right: 8px;
+    }
+
+    .commit-title {
+      margin-top: 4px;
+      max-width: 320px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .avatar {
+      margin-left: 0;
+    }
+  }
+
+  .duration,
+  .finished-at {
+    color: $table-text-gray;
+
+    .fa {
+      margin-right: 5px;
+    }
+  }
+
+  .pipeline-actions {
+
+    .btn {
+      color: $table-text-gray;
+    }
+
+    .btn-remove {
+      color: $white-light;
+    }
+  }
+
+  .build-link {
+
+    a {
+      color: $gl-dark-link-color;
+    }
+  }
+}

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -10,9 +10,8 @@
       %span ##{pipeline.id}
       - if pipeline.ref
         = link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace branch-name"
-        ·
+        = icon("code-fork")
       = link_to pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, pipeline.sha), class: "commit-id monospace"
-       
       - if pipeline.tag?
         %span.label.label-primary tag
       - elsif pipeline.latest?
@@ -26,6 +25,7 @@
 
       %p.commit-title
         - if commit = pipeline.commit
+          = commit_author_avatar(commit, size: 20)
           = link_to_gfm truncate(commit.title, length: 60), namespace_project_commit_path(@project.namespace, @project, commit.id), class: "commit-row-message"
         - else
           Cant find HEAD commit for this branch
@@ -46,14 +46,14 @@
   %td
     - if pipeline.started_at && pipeline.finished_at
       %p.duration
-      = icon("clock-o")
+        = icon("clock-o")
         = duration_in_numbers(pipeline.finished_at, pipeline.started_at)
     - if pipeline.finished_at
-      %p.duration
+      %p.finished-at
         = icon("calendar")
         #{time_ago_with_tooltip(pipeline.finished_at)}
 
-  %td
+  %td.pipeline-actions
     .controls.hidden-xs.pull-right
       - artifacts = pipeline.builds.latest.select { |b| b.artifacts? }
       - if artifacts.present?

app/views/projects/pipelines/index.html.haml

@@ -51,7 +51,7 @@
               %th.stage
                 %span.has-tooltip{ title: "#{stage.titleize}" }
                   = stage.titleize
-            %%th
+            %th
             %th
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages