Make pipeline page header responsive; add build counter; add short sha

4 files changed, 67 insertions, 79 deletions

diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index bc48f67d140..503cbd13b5e 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,5 +1,5 @@
-.commit-info-row.commit-info-row-header
-  .commit-meta
+.page-content-header
+  .header-main-content
     %strong Commit
     %strong.monospace.js-details-short= @commit.short_id
     = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
@@ -19,7 +19,8 @@
       %strong
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
-  .commit-action-buttons
+
+  .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
       %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
         = icon('comment')
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 859909d3600..4d809ca54a3 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,68 +1,51 @@
-.pipeline-graph-container
-  .oneline.clearfix
-    - if defined?(pipeline_details) && pipeline_details
-      Pipeline
-      = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-      with
-      = pluralize pipeline.statuses.count(:id), "build"
-      - if pipeline.ref
-        for
-        = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-      - if defined?(link_to_commit) && link_to_commit
-        for commit
-        = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-      - if pipeline.duration
-        in
-        = time_interval_in_words pipeline.duration
+.tabs-holder
+  %ul.nav-links.no-top.no-bottom
+    %li.active
+      = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }
+    %li
+      = link_to "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' } do
+        Builds
+        %span.badge= pipeline.statuses.count
 
-  .tabs-holder
-    %ul.nav-links.no-top.no-bottom
-      %li.active
-        = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }
-        %span.badge
-      %li
-        = link_to "Builds", "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' }
-        %span.badge
+.tab-content
+  #js-tab-pipeline.tab-pane.active
+    .build-content.middle-block.pipeline-graph
+      .pipeline-visualization
+        %ul.stage-column-list
+          - stages = pipeline.stages_with_latest_statuses
+          - stages.each do |stage, statuses|
+            %li.stage-column
+              .stage-name
+                %a{name: stage}
+                - if stage
+                  = stage.titleize
+              .builds-container
+                %ul
+                  = render "projects/commit/pipeline_stage", statuses: statuses
 
-  .tab-content
-    #js-tab-pipeline.tab-pane.active
-      .build-content.middle-block.pipeline-graph
-        .pipeline-visualization
-          %ul.stage-column-list
-            - stages = pipeline.stages_with_latest_statuses
-            - stages.each do |stage, statuses|
-              %li.stage-column
-                .stage-name
-                  %a{name: stage}
-                  - if stage
-                    = stage.titleize
-                .builds-container
-                  %ul
-                    = render "projects/commit/pipeline_stage", statuses: statuses
+  #js-tab-builds.tab-pane
+    - if pipeline.yaml_errors.present?
+      .bs-callout.bs-callout-danger
+        %h4 Found errors in your .gitlab-ci.yml:
+        %ul
+          - pipeline.yaml_errors.split(",").each do |error|
+            %li= error
+        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
 
-    #js-tab-builds.tab-pane
-      - if pipeline.yaml_errors.present?
-        .bs-callout.bs-callout-danger
-          %h4 Found errors in your .gitlab-ci.yml:
-          %ul
-            - pipeline.yaml_errors.split(",").each do |error|
-              %li= error
-          You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+    - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
+      .bs-callout.bs-callout-warning
+        \.gitlab-ci.yml not found in this commit
 
-      - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
-        .bs-callout.bs-callout-warning
-          \.gitlab-ci.yml not found in this commit
-
-      .table-holder.pipeline-holder
-        %table.table.ci-table.pipeline
-          %thead
-            %tr
-              %th Status
-              %th Build ID
-              %th Name
-              %th
-              - if pipeline.project.build_coverage_enabled?
-                %th Coverage
-              %th
-          - pipeline.statuses.relevant.stages.each do |stage|
-            = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
+    .table-holder.pipeline-holder
+      %table.table.ci-table.pipeline
+        %thead
+          %tr
+            %th Status
+            %th Build ID
+            %th Name
+            %th
+            - if pipeline.project.build_coverage_enabled?
+              %th Coverage
+            %th
+        - pipeline.statuses.relevant.stages.each do |stage|
+          = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 34855c54176..12096941209 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -36,7 +36,6 @@
         %pre.commit-row-description.js-toggle-content
           = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
 
-      .commit-row-info
-        = commit_author_link(commit, avatar: false, size: 24)
-        authored
-        #{time_ago_with_tooltip(commit.committed_date)}
+      = commit_author_link(commit, avatar: false, size: 24)
+      authored
+      #{time_ago_with_tooltip(commit.committed_date)}
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index e44c6351f46..decbbd80ac5 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,5 +1,5 @@
-.commit-info-row.commit-info-row-header
-  .commit-meta
+.page-content-header
+  .header-main-content
     = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), class: "ci-status ci-#{@pipeline.status}" do
       = ci_icon_for_status(@pipeline.status)
       = ci_label_for_status(@pipeline.status)
@@ -7,12 +7,12 @@
     triggered #{time_ago_with_tooltip(@commit.authored_date)} by
     = author_avatar(@commit, size: 24)
     = commit_author_link(@commit)
-  .commit-action-buttons
+  .header-action-buttons
     - if can?(current_user, :update_pipeline, @pipeline.project)
       - if @pipeline.builds.latest.failed.any?(&:retryable?)
-        = link_to "Retry failed", retry_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'btn btn-grouped retry-build-btn', method: :post
+        = link_to "Retry failed", retry_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'btn retry-build-btn', method: :post
       - if @pipeline.builds.running_or_pending.any?
-        = link_to "Cancel running", cancel_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
+        = link_to "Cancel running", cancel_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
 - if @commit
   .commit-box
@@ -29,7 +29,7 @@
         = ci_icon_for_status(@commit.status)
       = pluralize @pipeline.statuses.count(:id), "build"
       - if @pipeline.ref
-        for
+        from
         = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
       - if @pipeline.duration
         in
@@ -40,5 +40,10 @@
   .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
-    = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace"
-    = clipboard_button(clipboard_text: @pipeline.sha)
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+      %span.text-expander
+        \...
+    %span.js-details-content.hide
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+    = clipboard_button(clipboard_text: @pipeline.sha, title: "Copy commit SHA to clipboard")