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

app/assets/stylesheets/framework.scss

@@ -40,3 +40,4 @@
 @import "framework/zen.scss";
 @import "framework/blank";
 @import "framework/wells.scss";
+@import "framework/page-header.scss";

app/assets/stylesheets/framework/page-header.scss

+.page-content-header {
+  line-height: 34px;
+  padding: 10px 0;
+  margin-bottom: 0;
+
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    align-items: center;
+
+    .header-main-content {
+      flex: 1;
+    }
+  }
+
+  .header-action-buttons {
+    i {
+      color: $gl-icon-color;
+      font-size: 13px;
+      margin-right: 3px;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .btn {
+        width: 100%;
+        margin-top: 10px;
+      }
+
+      .dropdown {
+        width: 100%;
+      }
+    }
+  }
+
+  .avatar {
+    @extend .avatar-inline;
+    margin-left: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: 4px;
+    }
+  }
+
+  .commit-committer-link,
+  .commit-author-link {
+    color: $gl-gray;
+    font-weight: bold;
+  }
+
+  .fa-clipboard {
+    color: $dropdown-title-btn-color;
+  }
+
+  .commit-info {
+    &.branches {
+      margin-left: 8px;
+    }
+  }
+
+  .ci-status-link {
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin: 0 2px 0 3px;
+    }
+  }
+}

app/assets/stylesheets/pages/commit.scss

@@ -26,91 +26,6 @@
   white-space: pre-wrap;
 }
 
-.commit-info-row {
-  margin-bottom: 10px;
-  line-height: 24px;
-  padding-top: 6px;
-
-  &.commit-info-row-header {
-    line-height: 34px;
-    padding: 10px 0;
-    margin-bottom: 0;
-
-    @media (min-width: $screen-sm-min) {
-      display: flex;
-      align-items: center;
-
-      .commit-meta {
-        flex: 1;
-      }
-    }
-
-    .commit-hash-full {
-      @media (max-width: $screen-sm-max) {
-        width: 80px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-
-    .commit-action-buttons {
-      i {
-        color: $gl-icon-color;
-        font-size: 13px;
-        margin-right: 3px;
-      }
-
-      @media (max-width: $screen-xs-max) {
-        .dropdown {
-          width: 100%;
-          margin-top: 10px;
-        }
-
-        .dropdown-toggle {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .avatar {
-    @extend .avatar-inline;
-    margin-left: 0;
-
-    @media (min-width: $screen-sm-min) {
-      margin-left: 4px;
-    }
-  }
-
-  .commit-committer-link,
-  .commit-author-link {
-    color: $gl-gray;
-    font-weight: bold;
-  }
-
-  .fa-clipboard {
-    color: $dropdown-title-btn-color;
-  }
-
-  .commit-info {
-    &.branches {
-      margin-left: 8px;
-    }
-  }
-
-  .ci-status-link {
-
-    svg {
-      position: relative;
-      top: 2px;
-      margin: 0 2px 0 3px;
-    }
-  }
-}
-
 .js-details-expand {
   &:hover {
     text-decoration: none;
@@ -138,6 +53,17 @@
   }
 }
 
+.commit-hash-full {
+  @media (max-width: $screen-sm-max) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
 .file-stats {
   ul {
     list-style: none;

app/views/projects/commit/_commit_box.html.haml

-.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')

app/views/projects/commit/_pipeline.html.haml

-.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)

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)}

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

-.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")