Style commits, branches and tags pages to match new UI

app/assets/stylesheets/base/mixins.scss

@@ -169,7 +169,7 @@
   padding: 0px;
   list-style: none;
 
-  li {
+  > li {
     padding: 10px 0;
     border-bottom: 1px solid #EEE;
     overflow: hidden;

app/assets/stylesheets/generic/lists.scss

@@ -105,7 +105,7 @@ ul.content-list {
   margin: 0;
   padding: 0;
 
-  li {
+  > li {
     padding: $gl-padding;
     border-color: #f1f2f4;
     margin-left: -$gl-padding;

app/assets/stylesheets/pages/projects.scss

@@ -193,8 +193,9 @@ ul.nav.nav-projects-tabs {
 .breadcrumb.repo-breadcrumb {
   padding: 0;
   line-height: 42px;
-  background: white;
+  background: transparent;
   border: none;
+  margin: 0;
 
   > li + li:before {
     padding: 0 3px;

app/views/projects/branches/_branch.html.haml

@@ -1,20 +1,20 @@
 - commit = @repository.commit(branch.target)
 %li(class="js-branch-#{branch.name}")
-  %h4
+  %div
     = link_to namespace_project_tree_path(@project.namespace, @project, branch.name) do
       %strong.str-truncated= branch.name
+       
       - if branch.name == @repository.root_ref
-        %span.label.label-info default
+        %span.label.label-primary default
       - elsif @repository.merged_to_root_ref? branch.name
-        %span.label.label-primary.has_tooltip(title="Merged into #{@repository.root_ref}")
-          %i.fa.fa-check
+        %span.label.label-info.has_tooltip(title="Merged into #{@repository.root_ref}")
           merged
 
       - if @project.protected_branch? branch.name
         %span.label.label-success
           %i.fa.fa-lock
           protected
-    .pull-right
+    .controls.hidden-xs
       - if create_mr_button?(@repository.root_ref, branch.name)
         = link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-grouped btn-xs' do
           = icon('plus')
@@ -30,8 +30,7 @@
           = icon("trash-o")
 
   - if commit
-    %ul.list-unstyled
-      = render 'projects/commits/inline_commit', commit: commit, project: @project
+    = render 'projects/branches/commit', commit: commit, project: @project
   - else
     %p
       Cant find HEAD commit for this branch

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

@@ -0,0 +1,7 @@
+.branch-commit.light
+  = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+  ·
+  %span.str-truncated
+    = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
+  ·
+  #{time_ago_with_tooltip(commit.committed_date)}

app/views/projects/branches/index.html.haml

@@ -1,7 +1,6 @@
 - page_title "Branches"
 = render "projects/commits/head"
-%h3.page-title
-  Branches
+.gray-content-block
   .pull-right
     - if can? current_user, :push_code, @project
       = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
@@ -24,9 +23,10 @@
             = sort_title_recently_updated
           = link_to namespace_project_branches_path(sort: 'last_updated') do
             = sort_title_oldest_updated
-%hr
+  .oneline
+    Protected branches can be managed in project settings
 - unless @branches.empty?
-  %ul.bordered-list.top-list.all-branches
+  %ul.content-list.all-branches
     - @branches.each do |branch|
       = render "projects/branches/branch", branch: branch
   = paginate @branches, theme: 'gitlab'

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

@@ -1,22 +1,18 @@
-%ul.nav.nav-tabs
+%ul.center-top-menu
   = nav_link(controller: [:commit, :commits]) do
     = link_to namespace_project_commits_path(@project.namespace, @project, @ref || @repository.root_ref) do
-      = icon("history")
       Commits
       %span.badge= number_with_delimiter(@repository.commit_count)
   = nav_link(controller: :compare) do
     = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: @ref || @repository.root_ref) do
-      = icon("exchange")
       Compare
 
   = nav_link(html_options: {class: branches_tab_class}) do
     = link_to namespace_project_branches_path(@project.namespace, @project) do
-      = icon("code-fork")
       Branches
       %span.badge.js-totalbranch-count= @repository.branches.size
 
   = nav_link(controller: :tags) do
     = link_to namespace_project_tags_path(@project.namespace, @project) do
-      = icon("tags")
       Tags
       %span.badge.js-totaltags-count= @repository.tags.length

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

@@ -5,22 +5,23 @@
 
 = render "head"
 
-.tree-ref-holder
-  = render 'shared/ref_switcher', destination: 'commits'
+.gray-content-block
+  .tree-ref-holder
+    = render 'shared/ref_switcher', destination: 'commits'
 
-.commits-feed-holder.hidden-xs.hidden-sm
-  - if create_mr_button?(@repository.root_ref, @ref)
-    = link_to create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success' do
-      = icon('plus')
-      Create Merge Request
+  .commits-feed-holder.hidden-xs.hidden-sm
+    - if create_mr_button?(@repository.root_ref, @ref)
+      = link_to create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success' do
+        = icon('plus')
+        Create Merge Request
 
-  - if current_user && current_user.private_token
-    = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'prepend-left-10 btn' do
-      = icon("rss")
+    - if current_user && current_user.private_token
+      = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'prepend-left-10 btn' do
+        = icon("rss")
 
 
-%ul.breadcrumb.repo-breadcrumb
-  = commits_breadcrumbs
+  %ul.breadcrumb.repo-breadcrumb
+    = commits_breadcrumbs
 
 %div{id: dom_id(@project)}
   #commits-list= render "commits", project: @project

app/views/projects/compare/_form.html.haml

@@ -1,5 +1,5 @@
 = form_tag namespace_project_compare_index_path(@project.namespace, @project), method: :post, class: 'form-inline js-requires-input' do
-  .clearfix.append-bottom-20
+  .clearfix
     - if params[:to] && params[:from]
       = link_to 'switch', {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has_tooltip', title: 'Switch base of comparison'}
     .form-group

app/views/projects/compare/index.html.haml

@@ -1,9 +1,7 @@
 - page_title "Compare"
 = render "projects/commits/head"
 
-%h3.page-title
-  Compare View
-%p.slead
+.gray-content-block
   Compare branches, tags or commit ranges.
   %br
   Fill input field with commit id like
@@ -14,4 +12,5 @@
   %br
   Changes are shown <b>from</b> the version in the first field <b>to</b> the version in the second field.
 
-= render "form"
+.prepend-top-20
+  = render "form"

app/views/projects/compare/show.html.haml

@@ -1,16 +1,16 @@
 - page_title "#{params[:from]}...#{params[:to]}"
 = render "projects/commits/head"
 
-%h3.page-title
-  Compare View
 
-= render "form"
+.gray-content-block
+  = render "form"
 
 - if @commits.present?
-  = render "projects/commits/commit_list"
-  = render "projects/diffs/diffs", diffs: @diffs, project: @project
+  .prepend-top-20
+    = render "projects/commits/commit_list"
+    = render "projects/diffs/diffs", diffs: @diffs, project: @project
 - else
-  .light-well
+  .light-well.prepend-top-20
     .center
       %h4
         There isn't anything to compare.

app/views/projects/tags/_tag.html.haml

@@ -1,13 +1,14 @@
 - commit = @repository.commit(tag.target)
 %li
-  %h4
+  %div
     = link_to namespace_project_commits_path(@project.namespace, @project, tag.name), class: "" do
-      %i.fa.fa-tag
-      = tag.name
+      %strong
+        %i.fa.fa-tag
+        = tag.name
     - if tag.message.present?
        
       = strip_gpg_signature(tag.message)
-    .pull-right
+    .controls
       - if can? current_user, :download_code, @project
         = render 'projects/repositories/download_archive', ref: tag.name, btn_class: 'btn-grouped btn-group-xs'
       - if can?(current_user, :admin_project, @project)
@@ -15,8 +16,7 @@
           %i.fa.fa-trash-o
 
   - if commit
-    %ul.list-unstyled
-      = render 'projects/commits/inline_commit', commit: commit, project: @project
+    = render 'projects/branches/commit', commit: commit, project: @project
   - else
     %p
       Cant find HEAD commit for this tag

app/views/projects/tags/index.html.haml

@@ -1,21 +1,18 @@
 - page_title "Tags"
 = render "projects/commits/head"
 
-%h3.page-title
-  Git Tags
+.gray-content-block
   - if can? current_user, :push_code, @project
     .pull-right
       = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
         %i.fa.fa-add-sign
         New tag
-
-%p.light
-  Tags give the ability to mark specific points in history as being important
-%hr
+  .oneline
+    Tags give the ability to mark specific points in history as being important
 
 .tags
   - unless @tags.empty?
-    %ul.bordered-list
+    %ul.content-list
       - @tags.each do |tag|
         = render 'tag', tag: @repository.find_tag(tag)
 

app/views/projects/tree/_tree.html.haml

@@ -14,7 +14,7 @@
         %small
           %i.fa.fa-plus
 
-%div#tree-content-holder.tree-content-holder
+%div#tree-content-holder.tree-content-holder.prepend-top-20
   %table#tree-slider{class: "table_#{@hex_path} tree-table" }
     %thead
       %tr