Merge branch '19751-branch-tag-icons' into 'master'

Resolve "Add icons for branch and tag in pipeline list"

## What does this MR do?
Adds branch or tag icon on pipeline ref

## What are the relevant issue numbers?
Closes #19751    
Part of #18920 

## Screenshots (if relevant)
![Screen_Shot_2016-07-13_at_1.42.54_PM](/uploads/d90706a76cf87a6cc8c25dca9a71affa/Screen_Shot_2016-07-13_at_1.42.54_PM.png)

With icons closer to tag/branch name/sha:   
![Screen_Shot_2016-07-15_at_11.23.48_AM](/uploads/411338f811bafbd314dbab5553fa46d4/Screen_Shot_2016-07-15_at_11.23.48_AM.png)

See merge request !5239

2 files changed, 41 insertions, 18 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a0334207c68..a3b72ec9574 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,7 +1,7 @@
 .pipelines {
   .stage {
-    max-width: 80px;
-    width: 80px;
+    max-width: 90px;
+    width: 90px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -30,13 +30,17 @@
 }
 
 .table.builds {
-  min-width: 1100px;
+  min-width: 1200px;
 
   tr {
     th {
-      padding: 16px;
+      padding: 16px 8px;
       border: none;
     }
+
+    td {
+      padding: 10px 8px;
+    }
   }
 
   tbody {
@@ -53,9 +57,8 @@
   .branch-commit {
 
     .branch-name {
-      margin-left: 8px;
       font-weight: bold;
-      max-width: 180px;
+      max-width: 150px;
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
@@ -64,10 +67,15 @@
     }
 
     svg {
-      margin: 0 6px;
       height: 14px;
       width: auto;
       vertical-align: middle;
+      fill: $table-text-gray;
+    }
+
+    .fa {
+      font-size: 12px;
+      color: $table-text-gray;
     }
 
     .commit-id {
@@ -100,6 +108,22 @@
     }
   }
 
+  .icon-container {
+    display: inline-block;
+    text-align: right;
+    width: 20px;
+
+    .fa {
+      position: relative;
+      right: 3px;
+    }
+
+    svg {
+      position: relative;
+      right: 1px;
+    }
+  }
+
   .duration,
   .finished-at {
     color: $table-text-gray;
@@ -107,21 +131,19 @@
 
     .fa {
       font-size: 12px;
+      margin-right: 4px;
     }
 
     svg {
-      height: 12px;
-      width: auto;
+      width: 12px;
+      height: auto;
       vertical-align: middle;
-    }
-
-    .fa,
-    svg {
-      margin-right: 5px;
+      margin-right: 4px;
     }
   }
 
   .pipeline-actions {
+    min-width: 140px;
 
     .btn {
       margin: 0;
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index 0557d384e33..7ae699832f6 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -10,12 +10,13 @@
       = link_to namespace_project_pipeline_path(@project.namespace, @project, pipeline.id) do
         %span ##{pipeline.id}
       - if pipeline.ref
+        .icon-container
+          = pipeline.tag? ? icon('tag') : icon('code-fork')
         = link_to pipeline.ref, namespace_project_commits_path(@project.namespace, @project, pipeline.ref), class: "monospace branch-name"
-        = custom_icon("icon_commit")
+        .icon-container
+          = custom_icon("icon_commit")
       = 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?
+      - if pipeline.latest?
         %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
       - if pipeline.triggered?
         %span.label.label-primary triggered