Fix repo page ui issues, show full last commit message in repo view.

Integrates changes from ClemMakesApps' commit:
8581e152, although it was reverted to avoid frustrating conflicts.

See MR: !5530 (diffs)

7 files changed, 33 insertions, 15 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 6b09dfa8d74..f094a707bfa 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -52,6 +52,7 @@ v 8.12.0 (unreleased)
   - Adds response mime type to transaction metric action when it's not HTML
   - Fix hover leading space bug in pipeline graph !5980
   - User can edit closed MR with deleted fork (Katarzyna Kobierska Ula Budziszewska) !5496
+  - Fix repository page ui issues
 
 v 8.11.4 (unreleased)
   - Fix broken gitlab:backup:restore because of bad permissions on repo storage !6098 (Dirk Hörner)
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5da390118c6..abfae2e00fb 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -35,6 +35,7 @@ $gl-icon-color:        $gl-placeholder-color;
 $gl-grayish-blue:      #7f8fa4;
 $gl-gray:              $gl-text-color;
 $gl-gray-dark:         #313236;
+$gl-gray-light:        $gl-placeholder-color;
 $gl-header-color:      $gl-title-color;
 
 /*
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 9da40fe2b09..e330300f9a1 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -22,6 +22,15 @@
         line-height: 21px;
       }
 
+      .last-commit {
+        @include str-truncated(60%);
+      }
+
+      .commit-history-link-spacer {
+        margin: 0 10px;
+        color: $table-border-color;
+      }
+
       &:hover {
         td {
           background-color: $row-hover;
@@ -77,11 +86,17 @@
     }
   }
 
-  .tree_commit {
-    color: $gl-gray;
+  .tree-time-ago {
+    min-width: 135px;
+    color: $gl-gray-light;
+  }
+
+  .tree-commit {
+    max-width: 320px;
+    color: $gl-gray-light;
 
     .tree-commit-link {
-      color: $gl-gray;
+      color: $gl-gray-light;
 
       &:hover {
         text-decoration: underline;
diff --git a/app/views/projects/refs/logs_tree.js.haml b/app/views/projects/refs/logs_tree.js.haml
index 8ee2aef0e61..1141168f037 100644
--- a/app/views/projects/refs/logs_tree.js.haml
+++ b/app/views/projects/refs/logs_tree.js.haml
@@ -5,8 +5,8 @@
 
   :plain
     var row = $("table.table_#{@hex_path} tr.file_#{hexdigest(file_name)}");
-    row.find("td.tree_time_ago").html('#{escape_javascript time_ago_with_tooltip(commit.committed_date)}');
-    row.find("td.tree_commit").html('#{escape_javascript render("projects/tree/tree_commit_column", commit: commit)}');
+    row.find("td.tree-time-ago").html('#{escape_javascript time_ago_with_tooltip(commit.committed_date)}');
+    row.find("td.tree-commit").html('#{escape_javascript render("projects/tree/tree_commit_column", commit: commit)}');
 
 - if @more_log_url
   :plain
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index a3a4dba3fa4..ee417b58cbf 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -4,6 +4,6 @@
     - file_name = blob_item.name
     = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@id || @commit.id, blob_item.name)), title: file_name do
       %span.str-truncated= file_name
-  %td.tree_time_ago.cgray
-    = render 'projects/tree/spinner'
-  %td.hidden-xs.tree_commit
+  %td.hidden-xs.tree-commit
+  %td.tree-time-ago.cgray.text-right
+    = render 'projects/tree/spinner'
\ No newline at end of file
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 558e6146ae9..0f7d629ab98 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -4,7 +4,6 @@
       %thead
         %tr
           %th Name
-          %th Last Update
           %th.hidden-xs
             .pull-left Last Commit
             .last-commit.hidden-sm.pull-left
@@ -14,9 +13,11 @@
               %small.light
                 = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
                 –
-                = truncate(@commit.title, length: 50)
-            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'pull-right'
-
+                = time_ago_with_tooltip(@commit.committed_date)
+                = @commit.full_title
+            %small.commit-history-link-spacer |
+            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'commit-history-link'
+          %th.text-right Last Update
       - if @path.present?
         %tr.tree-item
           %td.tree-item-file-name
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index 9577696fc0d..1ccef6d52ab 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -4,6 +4,6 @@
     - path = flatten_tree(tree_item)
     = link_to namespace_project_tree_path(@project.namespace, @project, tree_join(@id || @commit.id, path)), title: path do
       %span.str-truncated= path
-  %td.tree_time_ago.cgray
-    = render 'projects/tree/spinner'
-  %td.hidden-xs.tree_commit
+  %td.hidden-xs.tree-commit
+  %td.tree-time-ago.text-right
+    = render 'projects/tree/spinner'
\ No newline at end of file