Add table styling to commits tables

5 files changed, 68 insertions, 41 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 08b88f436c0..bffd0e6f0cd 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -234,6 +234,44 @@ ul.content-list {
   }
 }
 
+// Table list
+.table-list {
+  display: table;
+  width: 100%;
+
+  .table-list-row {
+    display: table-row;
+  }
+
+  .table-list-cell {
+    display: table-cell;
+    vertical-align: top;
+    padding: 10px 16px;
+    border-bottom: 1px solid $gray-darker;
+
+    &.avatar-cell {
+      width: 36px;
+      padding-right: 0;
+
+      img {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.table-wide {
+    .table-list-cell {
+      &:last-of-type {
+        padding-right: 0;
+      }
+
+      &:first-of-type {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
 .panel > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index abad300a7d1..feaa04136a9 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -142,7 +142,6 @@
 .commit-header {
   padding: 5px 10px;
   background-color: $gray-light;
-  border-top: 1px solid $gray-darker;
   border-bottom: 1px solid $gray-darker;
   font-size: 14px;
 
@@ -187,9 +186,8 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-left: $gl-padding;
-    margin-top: 2px;
+    width: 300px;
+    text-align: right;
     font-size: 0;
   }
 
@@ -232,14 +230,6 @@
     vertical-align: baseline;
   }
 
-  .commit-content {
-    display: inline-block;
-
-    @media (min-width: $screen-sm-min) {
-      max-width: 70%;
-    }
-  }
-
   .commit-row-description {
     font-size: 14px;
     border-left: 1px solid $white-normal;
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 0cea9ab5b39..3c6c50dce3c 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -9,34 +9,33 @@
 - cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do
-  %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
+  %li.commit.table-list-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .commit-row-title
-      .image-container
-        = author_avatar(commit, size: 36)
+    .table-list-cell.avatar-cell.hidden-xs
+      = author_avatar(commit, size: 36)
 
-      .commit-content
-        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message item-title"
-        %span.commit-row-message.visible-xs-inline
-          ·
-          = commit.short_id
-        - if commit.status(ref)
-          .visible-xs-inline
-            = render_commit_status(commit, ref: ref)
-        - if commit.description?
-          %a.text-expander.hidden-xs.js-toggle-button ...
+    .table-list-cell.commit-content
+      = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message item-title"
+      %span.commit-row-message.visible-xs-inline
+        ·
+        = commit.short_id
+      - if commit.status(ref)
+        .visible-xs-inline
+          = render_commit_status(commit, ref: ref)
+      - if commit.description?
+        %a.text-expander.hidden-xs.js-toggle-button ...
 
-        - if commit.description?
-          %pre.commit-row-description.js-toggle-content
-            = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
-        .commiter
-          = commit_author_link(commit, avatar: false, size: 24)
-          committed
-          #{time_ago_with_tooltip(commit.committed_date)}
+      - if commit.description?
+        %pre.commit-row-description.js-toggle-content
+          = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
+      .commiter
+        = commit_author_link(commit, avatar: false, size: 24)
+        committed
+        #{time_ago_with_tooltip(commit.committed_date)}
 
-      .commit-actions.hidden-xs
-        - if commit.status(ref)
-          = render_commit_status(commit, ref: ref)
-        = clipboard_button(clipboard_text: commit.id)
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
-        = link_to_browse_code(project, commit)
+    .table-list-cell.commit-actions.hidden-xs
+      - if commit.status(ref)
+        = render_commit_status(commit, ref: ref)
+      = clipboard_button(clipboard_text: commit.id)
+      = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
+      = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index ce416caa494..9cd91841e27 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -11,4 +11,4 @@
       %li.warning-row.unstyled
         #{number_with_delimiter(hidden)} additional commits have been omitted to prevent performance issues.
   - else
-    %ul.content-list= render commits, project: @project, ref: @ref
+    %ul.content-list.table-list= render commits, project: @project, ref: @ref
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index fb8a96ee5b3..fcc367951ad 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -4,7 +4,7 @@
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
   %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
   %li.commits-row
-    %ul.content-list.commit-list
+    %ul.content-list.commit-list.table-list.table-wide
       = render commits, project: project, ref: ref
 
 - if hidden > 0