consistent spacing on new MR panels28230-new-mr-spacing

center spinner
show placeholder text on new MR page
remove redundant `display: block` from li - they default to `list-style` already

11 files changed, 66 insertions, 92 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 55ed4b7b06c..7adbb0a4188 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -229,44 +229,6 @@ 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/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index efe93724013..9d8d08dff88 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -48,11 +48,3 @@
     line-height: inherit;
   }
 }
-
-.panel-default {
-  .table-list-row:last-child {
-    .table-list-cell {
-      border-bottom: 0;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c3d45d708c1..2029b6893ef 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -78,6 +78,7 @@
   padding: 5px 10px;
   background-color: $gray-light;
   border-bottom: 1px solid $gray-darker;
+  border-top: 1px solid $gray-darker;
   font-size: 14px;
 
   &:first-child {
@@ -117,10 +118,37 @@
   }
 }
 
+.commit.flex-list {
+  display: flex;
+}
+
+.avatar-cell {
+  width: 46px;
+  padding-left: 10px;
+
+  img {
+    margin-right: 0;
+  }
+}
+
+.commit-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-grow: 1;
+  padding-left: 10px;
+
+  .merge-request-branches & {
+    flex-direction: column;
+  }
+}
+
+.commit-content {
+  padding-right: 10px;
+}
+
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    width: 300px;
-    text-align: right;
     font-size: 0;
   }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a629a5333d7..aebb60ab2cf 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -240,8 +240,7 @@
 
   .commit {
     margin: 0;
-    padding-top: 2px;
-    padding-bottom: 2px;
+    padding: 10px 0;
     list-style: none;
 
     &:hover {
@@ -356,7 +355,7 @@
   }
 
   .panel-footer {
-    padding: 5px 10px;
+    padding: 0;
 
     .btn {
       min-width: auto;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 8d1063fc26f..fc4da4c495f 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -139,18 +139,10 @@
 .blob-commit-info {
   list-style: none;
   background: $gray-light;
-  padding: 6px 0;
+  padding: 16px 16px 16px 6px;
   border: 1px solid $border-color;
   border-bottom: none;
   margin: 0;
-
-  .table-list-cell {
-    border-bottom: none;
-  }
-
-  .commit-actions {
-    width: 260px;
-  }
 }
 
 #modal-remove-blob > .modal-dialog { width: 850px; }
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 41a7191302d..24ff74ecb3b 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -18,7 +18,7 @@
         - else
           = link_to title, '#'
 
-%ul.blob-commit-info.table-list.hidden-xs
+%ul.blob-commit-info.hidden-xs
   - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
   = render blob_commit, project: @project, ref: @ref
 
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 002e3d345dc..6ab9a80e083 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -9,33 +9,34 @@
 - cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do
-  %li.commit.table-list-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
+  %li.commit.flex-list.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .table-list-cell.avatar-cell.hidden-xs
+    .avatar-cell.hidden-xs
       = author_avatar(commit, size: 36)
 
-    .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 ...
+    .commit-detail
+      .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)}
 
-    .table-list-cell.commit-actions.hidden-xs
-      - if commit.status(ref)
-        = render_commit_status(commit, ref: ref)
-      = clipboard_button(clipboard_text: commit.id, title: "Copy commit SHA to clipboard")
-      = 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)
+      .commit-actions.flex-row.hidden-xs
+        - if commit.status(ref)
+          = render_commit_status(commit, ref: ref)
+        = clipboard_button(clipboard_text: commit.id, title: "Copy commit SHA to clipboard")
+        = 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 64d93e4141c..6f5835cb9be 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.table-list= render commits, project: @project, ref: @ref
+    %ul.content-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 904cdb5767f..88c7d7bc44b 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.table-list.table-wide
+    %ul.content-list.commit-list
       = render commits, project: project, ref: ref
 
 - if hidden > 0
diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 466ec1475d8..ad14b4e583e 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -21,7 +21,7 @@
                   selected: f.object.source_project_id
           .merge-request-select.dropdown
             = f.hidden_field :source_branch
-            = dropdown_toggle f.object.source_branch || "Select source branch", { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
+            = dropdown_toggle local_assigns.fetch(f.object.source_branch, "Select source branch"), { toggle: "dropdown", field_name: "#{f.object_name}[source_branch]" }, { toggle_class: "js-compare-dropdown js-source-branch" }
             .dropdown-menu.dropdown-menu-selectable.dropdown-source-branch
               = dropdown_title("Select source branch")
               = dropdown_filter("Search branches")
@@ -30,7 +30,7 @@
                   branches: @merge_request.source_branches,
                   selected: f.object.source_branch
         .panel-footer
-          = icon('spinner spin', class: 'js-source-loading')
+          .text-center= icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
 
     .col-md-6
@@ -60,7 +60,7 @@
                   branches: @merge_request.target_branches,
                   selected: f.object.target_branch
         .panel-footer
-          = icon('spinner spin', class: "js-target-loading")
+          .text-center= icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit
 
   - if @merge_request.errors.any?
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 22004ecacbc..02133d09cdf 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -11,7 +11,7 @@
 
   .results.prepend-top-10
     - if @scope == 'commits'
-      %ul.content-list.commit-list.table-list.table-wide
+      %ul.content-list.commit-list
         = render partial: "search/results/commit", collection: @search_objects
     - else
       .search-results