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
+.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
+      = link_to "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' } do
+        Builds
+        %span.badge= pipeline.statuses.count
 
-  .tab-content
+.tab-content
   #js-tab-pipeline.tab-pane.active
     .build-content.middle-block.pipeline-graph
       .pipeline-visualization

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

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