Start commits refactor

app/assets/stylesheets/framework/lists.scss

@@ -236,12 +236,6 @@ ul.content-list {
 
 .panel > .content-list > li {
   padding: $gl-padding-top $gl-padding;
-
-  &.commit {
-    @media (min-width: $screen-sm-min) {
-      padding-left: 46px + $gl-padding;
-    }
-  }
 }
 
 ul.controls {

app/assets/stylesheets/pages/commit.scss

-.commit-title {
-  display: block;
-}
-
-.commit-author,
-.commit-committer {
-  display: block;
-  color: $commit-committer-color;
-  font-weight: normal;
-  font-style: italic;
-}
-
-.commit-author strong,
-.commit-committer strong {
-  font-weight: bold;
-  font-style: normal;
-}
-
-.commit-description {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  margin-top: 10px;
-  word-break: normal;
-  white-space: pre-wrap;
-}
-
-.js-details-expand {
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.ci-status-link {
-  svg {
-    overflow: visible;
-  }
-}
-
-.commit-box {
-  border-top: 1px solid $border-color;
-  padding: $gl-padding 0;
-
-  .commit-title {
-    margin: 0;
-    font-size: 23px;
-    color: $gl-gray-dark;
-  }
-
-  .commit-description {
-    margin-top: 15px;
-  }
-}
-
-.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;
-    margin: 0;
-    padding: 10px 0;
-
-    li {
-      padding: 3px 0;
-      line-height: 20px;
-    }
-  }
-
-  .new-file {
-    a {
-      color: $gl-text-green;
-    }
-  }
-
-  .renamed-file {
-    a {
-      color: $gl-text-orange;
-    }
-  }
-
-  .deleted-file {
-    a {
-      color: $gl-text-red;
-    }
-  }
-
-  .edit-file {
-    a {
-      color: $gl-text-color;
-    }
-  }
-}
-
-/*
- * Commit message textarea for web editor and
- * custom merge request message
- */
-.commit-message-container {
-  background-color: $body-bg;
-  position: relative;
-  font-family: $monospace_font;
-  $left: 12px;
-  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
-  .max-width-marker {
-    width: 72ch;
-    color: $commit-max-width-marker-color;
-    font-family: inherit;
-    left: $left;
-    height: 100%;
-    border-right: 1px solid mix($input-border, $white-light);
-    position: absolute;
-    z-index: 1;
-  }
-
-  > textarea {
-    background-color: $commit-message-text-area-bg;
-    font-family: inherit;
-    padding-left: $left;
-    position: relative;
-    z-index: 2;
-  }
-}

app/assets/stylesheets/pages/commits.scss

+.commit-title {
+  display: block;
+}
+
+.commit-author,
+.commit-committer {
+  display: block;
+  color: $commit-committer-color;
+  font-weight: normal;
+  font-style: italic;
+}
+
+.commit-author strong,
+.commit-committer strong {
+  font-weight: bold;
+  font-style: normal;
+}
+
+.commit-description {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  margin-top: 10px;
+  word-break: normal;
+  white-space: pre-wrap;
+}
+
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.ci-status-link {
+  svg {
+    overflow: visible;
+  }
+}
+
+.commit-box {
+  border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
+
+  .commit-title {
+    margin: 0;
+    font-size: 23px;
+    color: $gl-gray-dark;
+  }
+
+  .commit-description {
+    margin-top: 15px;
+  }
+}
+
+.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;
+    margin: 0;
+    padding: 10px 0;
+
+    li {
+      padding: 3px 0;
+      line-height: 20px;
+    }
+  }
+
+  .new-file {
+    a {
+      color: $gl-text-green;
+    }
+  }
+
+  .renamed-file {
+    a {
+      color: $gl-text-orange;
+    }
+  }
+
+  .deleted-file {
+    a {
+      color: $gl-text-red;
+    }
+  }
+
+  .edit-file {
+    a {
+      color: $gl-text-color;
+    }
+  }
+}
+
+/*
+ * Commit message textarea for web editor and
+ * custom merge request message
+ */
+.commit-message-container {
+  background-color: $body-bg;
+  position: relative;
+  font-family: $monospace_font;
+  $left: 12px;
+  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
+  .max-width-marker {
+    width: 72ch;
+    color: $commit-max-width-marker-color;
+    font-family: inherit;
+    left: $left;
+    height: 100%;
+    border-right: 1px solid mix($input-border, $white-light);
+    position: absolute;
+    z-index: 1;
+  }
+
+  > textarea {
+    background-color: $commit-message-text-area-bg;
+    font-family: inherit;
+    padding-left: $left;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+
 .commits-compare-switch {
   @include btn-default;
   @include btn-white;
@@ -18,7 +152,6 @@
 }
 
 .commit-row-title {
-  line-height: 1.35;
 
   .notes_count {
     float: right;
@@ -93,21 +226,13 @@
     padding-left: 46px;
   }
 
-  &:not(:last-child) {
-    border-bottom: 1px solid $gray-darker;
-  }
-
   a,
   button {
     color: $gl-dark-link-color;
     vertical-align: baseline;
   }
 
-  .avatar {
-    margin-left: -46px;
-  }
-
-  .item-title {
+  .commit-content {
     display: inline-block;
 
     @media (min-width: $screen-sm-min) {

app/views/projects/commits/_commit.html.haml

@@ -10,12 +10,13 @@
 
 = cache(cache_key, expires_in: 1.day) do
   %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
-    = author_avatar(commit, size: 36)
 
-    .commit-info-block
     .commit-row-title
-        %span.item-title
-          = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
+      .image-container
+        = 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
@@ -25,17 +26,17 @@
         - if commit.description?
           %a.text-expander.hidden-xs.js-toggle-button ...
 
-        .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)
-
         - 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)

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.list-unstyled.commit-list
+    %ul.content-list.commit-list
       = render commits, project: project, ref: ref
 
 - if hidden > 0