Merge branch 'ui-improvements' into 'master'

Ui improvements

* fix project home page when activity set as default
* style commits, branches and tags pages to new style
* render flash message outside of content block
* style group pages

See merge request !1255

27 files changed, 134 insertions, 116 deletions

diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss
index 2d2e8b3dedd..8698109bc4c 100644
--- a/app/assets/stylesheets/base/mixins.scss
+++ b/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;
diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss
index 61209f73a2e..abf4657dd58 100644
--- a/app/assets/stylesheets/generic/blocks.scss
+++ b/app/assets/stylesheets/generic/blocks.scss
@@ -27,6 +27,11 @@
   border-bottom: 1px solid #e7e9ed;
   color: $gl-gray;
 
+  &.second-block {
+    margin-top: -1px;
+    margin-bottom: 0;
+  }
+
   &.footer-block {
     margin-top: 0;
     margin-bottom: -$gl-padding;
diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss
index 096698e8466..b995486588f 100644
--- a/app/assets/stylesheets/generic/common.scss
+++ b/app/assets/stylesheets/generic/common.scss
@@ -7,6 +7,7 @@
 
 /** COMMON CLASSES **/
 .prepend-top-10 { margin-top:10px }
+.prepend-top-default { margin-top: $gl-padding; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
 .prepend-left-20 { margin-left:20px }
diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss
index 601fdd1e329..3bfed8de772 100644
--- a/app/assets/stylesheets/generic/lists.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 64db6a85ded..361fd63bc79 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/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;
@@ -331,3 +332,9 @@ pre.light-well {
   padding: 10px 15px;
   margin: 0;
 }
+
+.project-show-activity {
+  .activity-filter-block {
+    margin-top: -1px;
+  }
+}
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index b067cb54a43..82eebf4245b 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -30,4 +30,13 @@ module GroupsHelper
       image_path('no_group_avatar.png')
     end
   end
+
+  def group_title(group, name, url)
+    content_tag :span do
+      link_to(
+        simple_sanitize(group.name), group_path(group)
+      ) + ' · '.html_safe +
+        link_to(simple_sanitize(name), url)
+    end
+  end
 end
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index f0d90782556..08d97e418a3 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -1,25 +1,24 @@
 - page_title "Issues"
+- header_title group_title(@group, "Issues", issues_group_path(@group))
 = content_for :meta_tags do
   - if current_user
     = auto_discovery_link_tag(:atom, issues_group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} issues")
 
-%h3.page-title
-  Issues
 
-%p.light
-  Only issues from
-  %strong #{@group.name}
-  group are listed here.
-  - if current_user
-    To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page.
-%hr
 
-.append-bottom-20
+= render 'shared/issuable/filter', type: :issues
+.gray-content-block.second-block
   .pull-right
     - if current_user
       .hidden-xs.pull-left
-        = link_to issues_group_url(@group, format: :atom, private_token: current_user.private_token), class: 'btn' do
+        = link_to issues_group_url(@group, format: :atom, private_token: current_user.private_token) do
           %i.fa.fa-rss
+  %div
+    Only issues from
+    %strong #{@group.name}
+    group are listed here.
+    - if current_user
+      To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page.
 
-  = render 'shared/issuable/filter', type: :issues
-= render 'shared/issues'
+.prepend-top-default
+  = render 'shared/issues'
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index ca85a158707..425ad8331bf 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -1,14 +1,13 @@
 - page_title "Merge Requests"
-%h3.page-title
-  Merge Requests
+- header_title group_title(@group, "Merge Requests", merge_requests_group_path(@group))
 
-%p.light
-  Only merge requests from
-  %strong #{@group.name}
-  group are listed here.
-  - if current_user
-    To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
-%hr
-.append-bottom-20
-  = render 'shared/issuable/filter', type: :merge_requests
-= render 'shared/merge_requests'
+= render 'shared/issuable/filter', type: :merge_requests
+.gray-content-block.second-block
+  %div
+    Only merge requests from
+    %strong #{@group.name}
+    group are listed here.
+    - if current_user
+      To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
+.prepend-top-default
+  = render 'shared/merge_requests'
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index 385222fa5b7..2bbcad5fdfb 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -1,23 +1,17 @@
 - page_title "Milestones"
-%h3.page-title
-  Milestones
-  %span.pull-right #{@group_milestones.count} milestones
+- header_title group_title(@group, "Milestones", group_milestones_path(@group))
 
-%p.light
+= render 'shared/milestones_filter'
+.gray-content-block
   Only milestones from
   %strong #{@group.name}
   group are listed here.
-
-%hr
-
-= render 'shared/milestones_filter'
 .milestones
-  .panel.panel-default
-    %ul.well-list
-      - if @group_milestones.blank?
-        %li
-          .nothing-here-block No milestones to show
-      - else
-        - @group_milestones.each do |milestone|
-          = render 'milestone', milestone: milestone
+  %ul.content-list
+    - if @group_milestones.blank?
+      %li
+        .nothing-here-block No milestones to show
+    - else
+      - @group_milestones.each do |milestone|
+        = render 'milestone', milestone: milestone
   = paginate @group_milestones, theme: "gitlab"
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 1275c42000b..c1746676ae2 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -18,8 +18,8 @@
         .username
           = current_user.username
   .content-wrapper
+    = render "layouts/flash"
     %div{ class: fluid_layout ? "container-fluid" : "container-fluid container-limited" }
       .content
-        = render "layouts/flash"
         .clearfix
           = yield
diff --git a/app/views/layouts/group.html.haml b/app/views/layouts/group.html.haml
index db7dbf9bfe3..4f00d01d4cd 100644
--- a/app/views/layouts/group.html.haml
+++ b/app/views/layouts/group.html.haml
@@ -1,5 +1,6 @@
 - page_title    @group.name
-- header_title  @group.name, group_path(@group)
+- unless @header_title
+  - header_title  @group.name, group_path(@group)
 - sidebar       "group" unless sidebar
 
 = render template: "layouts/application"
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index 86133768d77..1261f6254d7 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -1,5 +1,5 @@
 = render 'projects/last_push'
-.gray-content-block
+.gray-content-block.activity-filter-block
   - if current_user
     %ul.nav.nav-pills.event_filter.pull-right
       %li
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index a693c4b282f..cc0ec9483d2 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/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
diff --git a/app/views/projects/branches/_commit.html.haml b/app/views/projects/branches/_commit.html.haml
new file mode 100644
index 00000000000..68326e65d85
--- /dev/null
+++ b/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)}
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 80acc937908..6e2dc2d2710 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/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'
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index e3d8cd0fdd5..50c0fd6803d 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/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
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 55054a31977..a01a99458a0 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/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
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 3019893d12c..efc25eda26b 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/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
diff --git a/app/views/projects/compare/index.html.haml b/app/views/projects/compare/index.html.haml
index d1e579a2ede..43d00726c48 100644
--- a/app/views/projects/compare/index.html.haml
+++ b/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"
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 3670dd5c13b..8800ffdf482 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/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.
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 995eecd7830..2b8fd671587 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -1,18 +1,21 @@
 - page_title "Milestones"
-.pull-right
-  - if can? current_user, :admin_milestone, @project
-    = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "pull-right btn btn-new", title: "New Milestone" do
-      %i.fa.fa-plus
-      New Milestone
 = render 'shared/milestones_filter'
 
+.gray-content-block
+  .pull-right
+    - if can? current_user, :admin_milestone, @project
+      = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "pull-right btn btn-new", title: "New Milestone" do
+        %i.fa.fa-plus
+        New Milestone
+  .oneline
+    Milestone allows you to group issues and set due date for it
+
 .milestones
-  .panel.panel-default
-    %ul.well-list
-      = render @milestones
+  %ul.content-list
+    = render @milestones
 
-      - if @milestones.blank?
-        %li
-          .nothing-here-block No milestones to show
+    - if @milestones.blank?
+      %li
+        .nothing-here-block No milestones to show
 
   = paginate @milestones, theme: "gitlab"
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index d575891fd46..d5c4ee71978 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -65,9 +65,11 @@
 
 %section
   - if prefer_readme?
-    = render 'projects/readme'
+    .project-show-readme
+      = render 'projects/readme'
   - else
-    = render 'projects/activity'
+    .project-show-activity
+      = render 'projects/activity'
 
 
 - if current_user
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index 28ad272322f..2ca295fc5f3 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/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?
       &nbsp;
       = 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
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index d4652a47cba..1503a4330f4 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/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)
 
diff --git a/app/views/projects/tree/_tree.html.haml b/app/views/projects/tree/_tree.html.haml
index 5048154cb2f..367a87927d7 100644
--- a/app/views/projects/tree/_tree.html.haml
+++ b/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
diff --git a/features/steps/project/commits/commits.rb b/features/steps/project/commits/commits.rb
index e7dd20191b7..23e67371f96 100644
--- a/features/steps/project/commits/commits.rb
+++ b/features/steps/project/commits/commits.rb
@@ -52,7 +52,6 @@ class Spinach::Features::ProjectCommits < Spinach::FeatureSteps
   end
 
   step 'I see compared refs' do
-    expect(page).to have_content "Compare View"
     expect(page).to have_content "Commits (1)"
     expect(page).to have_content "Showing 2 changed files"
   end
diff --git a/features/steps/shared/active_tab.rb b/features/steps/shared/active_tab.rb
index 92e099315d8..eb2ccd9d01e 100644
--- a/features/steps/shared/active_tab.rb
+++ b/features/steps/shared/active_tab.rb
@@ -6,7 +6,7 @@ module SharedActiveTab
   end
 
   def ensure_active_sub_tab(content)
-    expect(find('div.content ul.nav-tabs li.active')).to have_content(content)
+    expect(find('div.content ul.center-top-menu li.active')).to have_content(content)
   end
 
   def ensure_active_sub_nav(content)
@@ -18,7 +18,7 @@ module SharedActiveTab
   end
 
   step 'no other sub tabs should be active' do
-    expect(page).to have_selector('div.content ul.nav-tabs li.active', count: 1)
+    expect(page).to have_selector('div.content ul.center-top-menu li.active', count: 1)
   end
 
   step 'no other sub navs should be active' do