Merge branch 'improve-pipeline-design' into 'master'

Improve design of Pipeline view

## What does this MR do?

Improves current design of Pipelines view when there is multiple stages.
This makes the statuses clickable and makes the view more compact.

## Screenshots (if relevant)

![Screen_Shot_2016-05-21_at_01.20.40](/uploads/dd031b7af7005c7a61f3165fefa8b7c9/Screen_Shot_2016-05-21_at_01.20.40.png)

cc @DouweM @markpundsack @rspeicher @marin 

See merge request !4230

3 files changed, 24 insertions, 10 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 2ae6c61d524..ee4f573f91b 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -281,7 +281,7 @@
 }
 
 .page-with-layout-nav {
-  margin-top: 50px;
+  margin-top: $header-height + 2;
 
   &.controls-dropdown-visible {
     @media (max-width: $screen-xs-min) {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c4005ba1e69..4f8a8748d3f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -280,11 +280,5 @@
       background-color: $white-light;
       color: $gl-placeholder-color;
     }
-
-    th,
-    td {
-      padding: 16px;
-    }
   }
 }
-
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 546176b65e4..6128868b670 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,24 @@
-.pipeline-stage {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.pipelines {
+  .stage {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .duration, .finished_at {
+    margin: 4px 0;
+  }
+
+  .commit-title {
+    margin: 0;
+  }
+
+  .controls {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: 4px;
+  }
 }