Rearrange commit info view

app/assets/stylesheets/pages/commit.scss

@@ -80,6 +80,21 @@
   }
 }
 
+.commit-info-widget {
+  background: $background-color;
+  color: $gl-gray;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .widget-row {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $border-color;
+    }
+  }
+}
+
 .ci-status-link {
   svg {
     overflow: visible;
@@ -88,6 +103,7 @@
 
 .commit-box {
   border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
 
   .commit-title {
     margin: 0;

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

 .commit-info-row.commit-info-row-header
-  %span.hidden-xs Authored by
+  %span.hidden-xs.hidden-sm Commit
+  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
+  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline"
+  = clipboard_button(clipboard_text: @commit.id)
+  %span.hidden-xs authored
+  #{time_ago_with_tooltip(@commit.authored_date)}
+  %span.hidden-xs by
+  = author_avatar(@commit, size: 24)
   %strong
     = commit_author_link(@commit, avatar: true, size: 24)
-  #{time_ago_with_tooltip(@commit.authored_date)}
+  - if @commit.different_committer?
+    %span.light Committed by
+    %strong
+      = commit_committer_link(@commit, avatar: true, size: 24)
+    #{time_ago_with_tooltip(@commit.committed_date)}
 
   .pull-right.commit-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
@@ -33,42 +44,31 @@
           %li= link_to "Email Patches", namespace_project_commit_path(@project.namespace, @project, @commit, format: :patch)
         %li= link_to "Plain Diff",    namespace_project_commit_path(@project.namespace, @project, @commit, format: :diff)
 
-- if @commit.different_committer?
-  .commit-info-row
-    %span.light Committed by
-    %strong
-      = commit_committer_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.committed_date)}
-
-.commit-info-row
-  %span.hidden-xs.hidden-sm Commit
-  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
-  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline"
-  = clipboard_button(clipboard_text: @commit.id)
-  %span.cgray= pluralize(@commit.parents.count, "parent")
-  - @commit.parents.each do |parent|
-    = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
-
-  %span.commit-info.branches
-    %i.fa.fa-spinner.fa-spin
-
-- if @commit.status
-  .commit-info-row
-    Builds for
-    = pluralize(@commit.pipelines.count, 'pipeline')
-    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do
-      = ci_icon_for_status(@commit.status)
-      %span.ci-status-label
-        = ci_label_for_status(@commit.status)
-    in
-    = time_interval_in_words @commit.pipelines.total_duration
-
-.commit-box.content-block
+.commit-box
   %h3.commit-title
     = markdown(@commit.title, pipeline: :single_line, author: @commit.author)
   - if @commit.description.present?
     %pre.commit-description
       = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
 
+.commit-info-widget
+  .widget-row.branch-info
+    %span.cgray= pluralize(@commit.parents.count, "parent")
+    - @commit.parents.each do |parent|
+      = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
+    %span.commit-info.branches
+      %i.fa.fa-spinner.fa-spin
+
+  .widget-row.pipeline-info
+    - if @commit.status
+      = ci_icon_for_status(@commit.status)
+      Builds for
+      = pluralize(@commit.pipelines.count, 'pipeline')
+      = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do
+        %span.ci-status-label
+          = ci_label_for_status(@commit.status)
+      in
+      = time_interval_in_words @commit.pipelines.total_duration
+
 :javascript
   $(".commit-info.branches").load("#{branches_namespace_project_commit_path(@project.namespace, @project, @commit.id)}");