Merge branch 'repository-page-ui-issues' into 'master'

Fix repository page ui issues

## What does this MR do?

Fixes 3 UI issues outlined in https://gitlab.com/gitlab-org/gitlab-ce/issues/19610. 

## Are there points in the code the reviewer needs to double check?

Not afaik. 

## Why was this MR needed?

To fix problems with the UI noted in relevant issues.

## What are the relevant issue numbers?

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19610 (combines all three) also

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19614, Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19615, Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/19616

Integrates changes from: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/5530/diffs?view=parallel

## Screenshots (if relevant)

Right align & color contrast issues (https://gitlab.com/gitlab-org/gitlab-ce/issues/19614 & https://gitlab.com/gitlab-org/gitlab-ce/issues/19616)

Before: 

![no-contrast](/uploads/9dec2510250806434cf686d6362eda4d/Screen_Shot_2016-07-07_at_1.46.08_PM.png)
![left-align](/uploads/09ddc525491010538d7bce95c410a067/Screen_Shot_2016-07-07_at_1.42.17_PM.png)

After: 

![right-align-and-contrast](/uploads/0d303179150ce718a28cd38ddbbf2954/right-align-and-contrast.png)

Truncate last commit (https://gitlab.com/gitlab-org/gitlab-ce/issues/19615)

Before: 
![not-truncated](/uploads/e66213db28d11cc44e7eb8578ac788fd/Screen_Shot_2016-07-07_at_1.40.26_PM.png)
After: 

![truncated-commit-message](/uploads/94947234451f29c34df3c2bd8846193d/truncated-commit-message.png)


**UPDATED screenshot![Screen_Shot_2016-09-02_at_2.15.04_PM](/uploads/dc11e6159759818b5ea69e04206c5691/Screen_Shot_2016-09-02_at_2.15.04_PM.png)**

## Does this MR meet the acceptance criteria?

- [X] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [X] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [X] API support added
- Tests
  - [X] Added for this feature/bug
  - [X] All builds are passing
- [X] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [X] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [X] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !5308

7 files changed, 35 insertions, 28 deletions

diff --git a/CHANGELOG b/CHANGELOG
index a5744cadc81..d06b782f850 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -83,6 +83,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
   - Fixed invisible scroll controls on build page on iPhone
   - Fix error on raw build trace download for old builds stored in database !4822
   - Refactor the triggers page and documentation !6217
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e4a3ca3a9ea..9f563a4de35 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -101,6 +101,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 cdd38442550..1778c069706 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -15,16 +15,6 @@
     vertical-align: top;
   }
 
-  .last-commit {
-    max-width: 506px;
-
-    .last-commit-content {
-      @include str-truncated;
-      width: calc(100% - 140px);
-      margin-left: 3px;
-    }
-  }
-
   .tree-table {
     margin-bottom: 0;
 
@@ -36,6 +26,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;
@@ -91,11 +90,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 ca5d2d7722a..0f7d629ab98 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -4,20 +4,20 @@
       %thead
         %tr
           %th Name
-          %th Last Update
-          %th.hidden-xs.last-commit
-            Last Commit
-            .last-commit-content.hidden-sm
+          %th.hidden-xs
+            .pull-left Last Commit
+            .last-commit.hidden-sm.pull-left
+               
               %i.fa.fa-angle-right
                
               %small.light
                 = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
                 –
                 = time_ago_with_tooltip(@commit.committed_date)
-                –
                 = @commit.full_title
-            = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'pull-right'
-
+            %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