Finish styling commits view

9 files changed, 85 insertions, 31 deletions

diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index 48490869364..a64cefb62bd 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -15,6 +15,11 @@
     return $("body").on("click", ".js-details-expand", function(e) {
       $(this).next('.js-details-content').removeClass("hide");
       $(this).hide();
+
+      var truncatedItem = $(this).siblings('.js-details-short');
+      if (truncatedItem.length) {
+        truncatedItem.addClass("hide");
+      }
       return e.preventDefault();
     });
   });
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b271f8cf332..be2a7ceefff 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -90,6 +90,8 @@ $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
+$widget-expand-item: #e8f2f7;
+$widget-inner-border: #eef0f2;
 
 /*
  * Text
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 62232d8a060..16e70bf9e4c 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -33,6 +33,7 @@
 
   &.commit-info-row-header {
     line-height: 34px;
+    padding: 10px 0;
 
     @media (min-width: $screen-sm-min) {
       margin-bottom: 0;
@@ -80,6 +81,12 @@
   }
 }
 
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 .commit-info-widget {
   background: $background-color;
   color: $gl-gray;
@@ -90,9 +97,40 @@
     padding: $gl-padding;
 
     &:not(:last-of-type) {
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $widget-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
     }
   }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $widget-expand-item;
+  }
 }
 
 .ci-status-link {
@@ -154,6 +192,9 @@
 }
 
 .commit-action-buttons {
+  position: relative;
+  top: -1px;
+
   i {
     color: $gl-icon-color;
     font-size: 13px;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index ad315cfae62..52d6a39bd59 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -33,21 +33,22 @@
     color: $gl-dark-link-color;
   }
 
-  .text-expander {
-    display: inline-block;
-    background: $gray-light;
-    color: $gl-placeholder-color;
-    padding: 0 5px;
-    cursor: pointer;
-    border: 1px solid $border-gray-dark;
-    border-radius: $border-radius-default;
-    margin-left: 5px;
-    line-height: 1;
-
-    &:hover {
-      background-color: darken($gray-light, 10%);
-      text-decoration: none;
-    }
+}
+
+.text-expander {
+  display: inline-block;
+  background: $gray-light;
+  color: $gl-placeholder-color;
+  padding: 0 5px;
+  cursor: pointer;
+  border: 1px solid $border-gray-dark;
+  border-radius: $border-radius-default;
+  margin-left: 5px;
+  line-height: 1;
+
+  &:hover {
+    background-color: darken($gray-light, 10%);
+    text-decoration: none;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f510e3d3cdf..f8e31a624ec 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -60,7 +60,7 @@
   }
 
   .ci_widget {
-    border-bottom: 1px solid #eef0f2;
+    border-bottom: 1px solid $widget-inner-border;
 
     svg {
       margin-right: 4px;
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 4039d059d40..47f45ae6b1a 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,7 +1,11 @@
 .commit-info-row.commit-info-row-header
   %span.hidden-xs.hidden-sm Commit
-  = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
-  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace visible-xs-inline visible-sm-inline"
+  = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace js-details-short"
+  = link_to("#", class: "js-details-expand") do
+    %span.text-expander
+      \...
+  %span.js-details-content.hide
+    = link_to @commit.id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace hidden-xs hidden-sm"
   = clipboard_button(clipboard_text: @commit.id)
   %span.hidden-xs authored
   #{time_ago_with_tooltip(@commit.authored_date)}
@@ -53,6 +57,8 @@
 
 .commit-info-widget
   .widget-row.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
     - @commit.parents.each do |parent|
       = link_to parent.short_id, namespace_project_commit_path(@project.namespace, @project, parent), class: "monospace"
@@ -61,12 +67,14 @@
 
   .widget-row.pipeline-info
     - if @commit.status
-      = ci_icon_for_status(@commit.status)
-      Builds for
-      = pluralize(@commit.pipelines.count, 'pipeline')
-      = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "ci-status-link ci-status-icon-#{@commit.status}" do
-        %span.ci-status-label
-          = ci_label_for_status(@commit.status)
+      .icon-container
+        = ci_icon_for_status(@commit.status)
+      Pipeline
+      = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace"
+      for
+      = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
+      %span.ci-status-label
+        = ci_label_for_status(@commit.status)
       in
       = time_interval_in_words @commit.pipelines.total_duration
 
diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml
index f9d7eac3542..077b2d2725b 100644
--- a/app/views/projects/commit/builds.html.haml
+++ b/app/views/projects/commit/builds.html.haml
@@ -3,8 +3,7 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .prepend-top-default
-    = render "commit_box"
+  = render "commit_box"
 
   = render "ci_menu"
   = render "builds"
diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml
index d85d6729a81..8233e26e4e7 100644
--- a/app/views/projects/commit/pipelines.html.haml
+++ b/app/views/projects/commit/pipelines.html.haml
@@ -1,7 +1,6 @@
 - page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits"
 
-.prepend-top-default
-  = render "commit_box"
+= render "commit_box"
 
 = render "ci_menu"
 = render "pipelines_list", pipelines: @ci_pipelines
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index cebf58d63df..b8c64d1f13e 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -4,8 +4,7 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .prepend-top-default
-    = render "commit_box"
+  = render "commit_box"
   - if @commit.status
     = render "ci_menu"
   - else