Updated commits UI

Closes #14633

3 files changed, 19 insertions, 30 deletions

diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 367027182b6..288b95c3e6e 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -9,26 +9,25 @@
 
 = cache(cache_key) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
+    = commit_author_avatar(commit)
     .commit-row-title
       %span.item-title
-        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
+        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message commit-link"
         - if commit.description?
           %a.text-expander.js-toggle-button ...
 
-      .pull-right
+      .commit-actions
         - if commit.status
-          = render_commit_status(commit)
+          = render_commit_status(commit, cssclass: 'btn btn-transparent')
         = clipboard_button(clipboard_text: commit.id)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent commit-link"
+        = link_to_browse_code(project, commit)
 
     - if commit.description?
-      .commit-row-description.js-toggle-content
-        %pre
-          = preserve(markdown(escape_once(commit.description), pipeline: :single_line, author: commit.author))
+      %pre.commit-row-description.js-toggle-content
+        = preserve(markdown(escape_once(commit.description), pipeline: :single_line, author: commit.author))
 
     .commit-row-info
-      by
       = commit_author_link(commit, avatar: true, size: 24)
-      .committed_ago
-        #{time_ago_with_tooltip(commit.committed_date)}  
-      = link_to_browse_code(project, commit)
+      authored
+      #{time_ago_with_tooltip(commit.committed_date)}  
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 7283a78a64e..dd12eae8f7e 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -4,18 +4,11 @@
 - commits, hidden = limited_commits(@commits)
 
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
-  .row.commits-row
-    .col-md-2.hidden-xs.hidden-sm
-      %h5.commits-row-date
-        %i.fa.fa-calendar
-        %span= day.strftime('%d %b, %Y')
-      .light
-        = pluralize(commits.count, 'commit')
-    .col-md-10.col-sm-12
-      %ul.content-list
-        = render commits, project: project
-  %hr.lists-separator
+  %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
+  %li.commits-row
+    %ul.list-unstyled.commit-list
+      = render commits, project: project
 
 - if hidden > 0
-  .alert.alert-warning
+  %li.alert.alert-warning
     #{number_with_delimiter(hidden)} additional commits have been omitted to prevent performance issues.
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 76ba0bea36d..51ca4eb903e 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -23,21 +23,18 @@
             Create Merge Request
 
       .control
-        = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'pull-left commits-search-form') do
-          = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input', spellcheck: false }
-
+        = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'commits-search-form') do
+          = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
       - if current_user && current_user.private_token
         .control
           = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
             = icon("rss")
-
-
     %ul.breadcrumb.repo-breadcrumb
       = commits_breadcrumbs
 
   %div{id: dom_id(@project)}
-    #commits-list.content_list= render "commits", project: @project
-  .clear
+    %ol#commits-list.list-unstyled.content_list
+      = render "commits", project: @project
   = spinner
 
 :javascript