clean up pipeline title display29998-pipeline-title-ui

4 files changed, 32 insertions, 9 deletions

diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 5f4211147f3..d064d884281 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -1,5 +1,4 @@
 .page-content-header {
-  line-height: 34px;
   padding: 10px 0;
   margin-bottom: 0;
 
@@ -60,3 +59,8 @@
     }
   }
 }
+
+.header-main-content-flex {
+  display: flex;
+  align-items: center;
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a4fe652b52f..b7da3e3a8ae 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -316,6 +316,16 @@
   }
 }
 
+.pipeline-status-icon {
+  margin-right: 10px;
+  font-size: 0;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 // Pipeline graph
 .pipeline-graph {
   width: 100%;
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index ab6baaf35b6..d6831afebc0 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,12 +1,17 @@
+- status = @pipeline.detailed_status(current_user)
 .page-content-header
-  .header-main-content
-    = render 'ci/status/badge', status: @pipeline.detailed_status(current_user), title: @pipeline.status_title
-    %strong Pipeline ##{@pipeline.id}
-    triggered #{time_ago_with_tooltip(@pipeline.created_at)}
-    - if @pipeline.user
-      by
-      = user_avatar(user: @pipeline.user, size: 24)
-      = user_link(@pipeline.user)
+  .header-main-content.header-main-content-flex
+    .hidden-xs
+      = render 'ci/status/badge', status: status, title: @pipeline.status_title
+    .visible-xs.pipeline-status-icon.ci-status-icon{ class: "ci-status-icon-#{status.group}" }
+      = custom_icon(@pipeline.detailed_status(current_user).icon)
+    .header-title
+      %strong Pipeline ##{@pipeline.id}
+      triggered #{time_ago_with_tooltip(@pipeline.created_at)}
+      - if @pipeline.user
+        by
+        = user_avatar(user: @pipeline.user, size: 24)
+        = user_link(@pipeline.user)
   .header-action-buttons
     - if can?(current_user, :update_pipeline, @pipeline.project)
       - if @pipeline.retryable?
diff --git a/changelogs/unreleased/29998-pipeline-title-ui.yml b/changelogs/unreleased/29998-pipeline-title-ui.yml
new file mode 100644
index 00000000000..da58ee9c5b8
--- /dev/null
+++ b/changelogs/unreleased/29998-pipeline-title-ui.yml
@@ -0,0 +1,4 @@
+---
+title: clean up Pipeline title display
+merge_request:
+author: