Merge branch '18533-graphs-wiki-subnav' into 'master'

Resolve "Graphs and Wiki subnav"

Styles sub nav in `Wiki` and `Graphs`

Closes #18533

![Screen_Shot_2016-06-15_at_9.32.43_AM](/uploads/111dae6e1b9c7d8038ac88b9be6f76a2/Screen_Shot_2016-06-15_at_9.32.43_AM.png)

cc @dzaporozhets

See merge request !4678

16 files changed, 262 insertions, 232 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 8e334977464..c09e1478335 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -157,6 +157,7 @@ v 8.8.5 (unreleased)
   - Ensure Todos counters doesn't count Todos for projects pending delete
   - Add tooltip to pin/unpin navbar
   - Add left/right arrows horizontal navigation
+  - Add new sub nav style to Wiki and Graphs sub navigation
 
 v 8.8.5
   - Import GitHub repositories respecting the API rate limit !4166
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 694f09c0464..0281b06d3ba 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -111,10 +111,6 @@
     width: 50%;
     line-height: 28px;
 
-    &.wiki-page {
-      padding: 16px 10px 11px;
-    }
-
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-sm-min) {
       width: 100%;
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index 85a0304196c..dd62dd4672b 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -14,18 +14,28 @@
   font-size: 10px;
 }
 
+#contributors-master {
+  @include make-md-column(12);
+
+  svg {
+    width: 100%;
+  }
+}
+
 #contributors {
   .contributors-list {
     margin: 0 0 10px;
     list-style: none;
     padding: 0;
+    float: left;
+
+    svg {
+      width: 100%;
+    }
   }
 
   .person {
-    &:nth-child(even) {
-      float: right;
-    }
-    float: left;
+    @include make-md-column(6);
     margin-top: 10px;
   }
 
diff --git a/app/views/projects/graphs/_head.html.haml b/app/views/projects/graphs/_head.html.haml
index 8becaea246f..a388d9a0a61 100644
--- a/app/views/projects/graphs/_head.html.haml
+++ b/app/views/projects/graphs/_head.html.haml
@@ -1,12 +1,14 @@
-- page_specific_javascripts asset_path("graphs/application.js")
-%ul.nav-links
-  = nav_link(action: :show) do
-    = link_to 'Contributors', namespace_project_graph_path
-  = nav_link(action: :commits) do
-    = link_to 'Commits', commits_namespace_project_graph_path
-  = nav_link(action: :languages) do
-    = link_to 'Languages', languages_namespace_project_graph_path
-  - if @project.builds_enabled?
-    = nav_link(action: :ci) do
-      = link_to ci_namespace_project_graph_path do
-        Continuous Integration
+.nav-links.sub-nav
+  %ul{ class: (container_class) }
+
+    - page_specific_javascripts asset_path("graphs/application.js")
+    = nav_link(action: :show) do
+      = link_to 'Contributors', namespace_project_graph_path
+    = nav_link(action: :commits) do
+      = link_to 'Commits', commits_namespace_project_graph_path
+    = nav_link(action: :languages) do
+      = link_to 'Languages', languages_namespace_project_graph_path
+    - if @project.builds_enabled?
+      = nav_link(action: :ci) do
+        = link_to ci_namespace_project_graph_path do
+          Continuous Integration
diff --git a/app/views/projects/graphs/ci.html.haml b/app/views/projects/graphs/ci.html.haml
index 19ccc125ea8..e695d3ae369 100644
--- a/app/views/projects/graphs/ci.html.haml
+++ b/app/views/projects/graphs/ci.html.haml
@@ -1,15 +1,18 @@
+- @no_container = true
 - page_title "Continuous Integration", "Graphs"
 = render 'head'
-.row-content-block.append-bottom-default
-  .oneline
-    A collection of graphs for Continuous Integration
 
-#charts.ci-charts
-  .row
-    .col-md-6
-      = render 'projects/graphs/ci/overall'
-    .col-md-6
-      = render 'projects/graphs/ci/build_times'
+%div{ class: (container_class) }
+  .sub-header-block
+    .oneline
+      A collection of graphs for Continuous Integration
 
-  %hr
-  = render 'projects/graphs/ci/builds'
+  #charts.ci-charts
+    .row
+      .col-md-6
+        = render 'projects/graphs/ci/overall'
+      .col-md-6
+        = render 'projects/graphs/ci/build_times'
+
+    %hr
+    = render 'projects/graphs/ci/builds'
diff --git a/app/views/projects/graphs/commits.html.haml b/app/views/projects/graphs/commits.html.haml
index d9b2fb6c065..0daffe68f6f 100644
--- a/app/views/projects/graphs/commits.html.haml
+++ b/app/views/projects/graphs/commits.html.haml
@@ -1,52 +1,54 @@
+- @no_container = true
 - page_title "Commits", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
-  .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'graphs_commits'
-  %ul.breadcrumb.repo-breadcrumb
-    = commits_breadcrumbs
+%div{ class: (container_class) }
+  .sub-header-block
+    .tree-ref-holder
+      = render 'shared/ref_switcher', destination: 'graphs_commits'
+    %ul.breadcrumb.repo-breadcrumb
+      = commits_breadcrumbs
 
-%p.lead
-  Commit statistics for
-  %strong #{@ref}
-  #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
+  %p.lead
+    Commit statistics for
+    %strong #{@ref}
+    #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
 
-.row
-  .col-md-6
-    %ul
-      %li
-        %p.lead
-          %strong #{@commits_graph.commits.size}
-          commits during
-          %strong #{@commits_graph.duration}
-          days
-      %li
-        %p.lead
-          Average
-          %strong #{@commits_graph.commit_per_day}
-          commits per day
-      %li
-        %p.lead
-          Contributed by
-          %strong #{@commits_graph.authors}
-          authors
-  .col-md-6
-    %div
-      %p.slead
-        Commits per day of month
-      %canvas#month-chart
-.row
-  .col-md-6
-    %div
-      %p.slead
-        Commits per day hour (UTC)
-      %canvas#hour-chart
-  .col-md-6
-    %div
-      %p.slead
-        Commits per weekday
-      %canvas#weekday-chart
+  .row
+    .col-md-6
+      %ul
+        %li
+          %p.lead
+            %strong #{@commits_graph.commits.size}
+            commits during
+            %strong #{@commits_graph.duration}
+            days
+        %li
+          %p.lead
+            Average
+            %strong #{@commits_graph.commit_per_day}
+            commits per day
+        %li
+          %p.lead
+            Contributed by
+            %strong #{@commits_graph.authors}
+            authors
+    .col-md-6
+      %div
+        %p.slead
+          Commits per day of month
+        %canvas#month-chart
+  .row
+    .col-md-6
+      %div
+        %p.slead
+          Commits per day hour (UTC)
+        %canvas#hour-chart
+    .col-md-6
+      %div
+        %p.slead
+          Commits per weekday
+        %canvas#weekday-chart
 
 :javascript
   var responsiveChart = function (selector, data) {
diff --git a/app/views/projects/graphs/languages.html.haml b/app/views/projects/graphs/languages.html.haml
index 249c16f4709..6d97f552a8e 100644
--- a/app/views/projects/graphs/languages.html.haml
+++ b/app/views/projects/graphs/languages.html.haml
@@ -1,24 +1,26 @@
+- @no_container = true
 - page_title "Languages", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
-  .oneline
-    Programming languages used in this repository
+%div{ class: (container_class) }
+  .sub-header-block
+    .oneline
+      Programming languages used in this repository
 
-.row
-  .col-md-8
-    %canvas#languages-chart{ height: 400 }
-  .col-md-4
-    %ul.bordered-list
-      - @languages.each do |language|
-        %li
-          %span{ style: "color: #{language[:color]}" }
-            = icon('circle')
-           
-          = language[:label]
-          .pull-right
-            = language[:value]
-            \%
+  .row
+    .col-md-8
+      %canvas#languages-chart{ height: 400 }
+    .col-md-4
+      %ul.bordered-list
+        - @languages.each do |language|
+          %li
+            %span{ style: "color: #{language[:color]}" }
+              = icon('circle')
+             
+            = language[:label]
+            .pull-right
+              = language[:value]
+              \%
 
 :javascript
   var data = #{@languages.to_json};
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index 33970e7b909..9f7e2a361ff 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,29 +1,31 @@
+- @no_container = true
 - page_title "Contributors", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
-  .tree-ref-holder
-    = render 'shared/ref_switcher', destination: 'graphs'
-  %ul.breadcrumb.repo-breadcrumb
-    = commits_breadcrumbs
-
-.loading-graph
-  .center
-    %h3.page-title
-      %i.fa.fa-spinner.fa-spin
-      Building repository graph.
-    %p.slead Please wait a moment, this page will automatically refresh when ready.
-
-.stat-graph.hide
-  .header.clearfix
-    %h3#date_header.page-title
-    %p.light
-      Commits to #{@ref}, excluding merge commits. Limited to 6,000 commits.
-    %input#brush_change{:type => "hidden"}
-  .graphs
-    #contributors-master
-    #contributors.clearfix
-      %ol.contributors-list.clearfix
+%div{ class: (container_class) }
+  .sub-header-block
+    .tree-ref-holder
+      = render 'shared/ref_switcher', destination: 'graphs'
+    %ul.breadcrumb.repo-breadcrumb
+      = commits_breadcrumbs
+
+  .loading-graph
+    .center
+      %h3.page-title
+        %i.fa.fa-spinner.fa-spin
+        Building repository graph.
+      %p.slead Please wait a moment, this page will automatically refresh when ready.
+
+  .stat-graph.hide
+    .header.clearfix
+      %h3#date_header.page-title
+      %p.light
+        Commits to #{@ref}, excluding merge commits. Limited to 6,000 commits.
+      %input#brush_change{:type => "hidden"}
+    .graphs.row
+      #contributors-master
+      #contributors.clearfix
+        %ol.contributors-list.clearfix
 
 
 
diff --git a/app/views/projects/wikis/_main_links.html.haml b/app/views/projects/wikis/_main_links.html.haml
index 4faa547769b..4ea75dbbf0c 100644
--- a/app/views/projects/wikis/_main_links.html.haml
+++ b/app/views/projects/wikis/_main_links.html.haml
@@ -1,4 +1,7 @@
 - if (@page && @page.persisted?)
+  - if can?(current_user, :create_wiki, @project)
+    = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+      New Page
   = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
     Page History
   - if can?(current_user, :create_wiki, @project)
diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml
index 988fe024e28..f8ea479e0b1 100644
--- a/app/views/projects/wikis/_nav.html.haml
+++ b/app/views/projects/wikis/_nav.html.haml
@@ -1,5 +1,5 @@
-.top-area
-  %ul.nav-links
+.nav-links.sub-nav
+  %ul{ class: (container_class) }
     = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
       = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
 
@@ -10,9 +10,4 @@
       = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
         Git Access
 
-  .nav-controls
-    - if can?(current_user, :create_wiki, @project)
-      = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-        New Page
-
-= render 'projects/wikis/new'
+  = render 'projects/wikis/new'
diff --git a/app/views/projects/wikis/_new.html.haml b/app/views/projects/wikis/_new.html.haml
index 919daf0a7b2..4f8abcdc8e1 100644
--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
@@ -1,14 +1,17 @@
-%div#modal-new-wiki.modal
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title New Wiki Page
-      .modal-body
-        %form.new-wiki-page
-          .form-group
-            = label_tag :new_wiki_path do
-              %span Page slug
-            = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
-          .form-actions
-            = button_tag 'Create Page', class: 'build-new-wiki btn btn-create'
+- @no_container = true
+
+%div{ class: (container_class) }
+  %div#modal-new-wiki.modal
+    .modal-dialog
+      .modal-content
+        .modal-header
+          %a.close{href: "#", "data-dismiss" => "modal"} ×
+          %h3.page-title New Wiki Page
+        .modal-body
+          %form.new-wiki-page
+            .form-group
+              = label_tag :new_wiki_path do
+                %span Page slug
+              = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
+            .form-actions
+              = button_tag 'Create Page', class: 'build-new-wiki btn btn-create'
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index cbd69ee1a73..bf5d09d50c2 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -1,19 +1,24 @@
+- @no_container = true
 - page_title "Edit", @page.title.capitalize, "Wiki"
 = render 'nav'
 
-.top-area
-  .nav-text.wiki-page
-    %strong
-      - if @page.persisted?
-        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-      - else
-        = @page.title.capitalize
-    %span.light
-      ·
-      Edit Page
+%div{ class: (container_class) }
+  .top-area
+    .nav-text
+      %strong
+        - if @page.persisted?
+          = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+        - else
+          = @page.title.capitalize
+      %span.light
+        ·
+        Edit Page
 
-  .nav-controls
-    = render 'main_links'
+    .nav-controls
+      - if can?(current_user, :create_wiki, @project)
+        = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+          New Page
+      = render 'main_links'
 
 
-= render 'form'
+  = render 'form'
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index ccceab6155e..6caf7230f35 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -1,32 +1,34 @@
+- @no_container = true
 - page_title "Git Access", "Wiki"
 
 = render 'nav'
-.row-content-block
-  %span.oneline
-    Git access for
-    %strong= @project_wiki.path_with_namespace
+%div{ class: (container_class) }
+  .sub-header-block
+    %span.oneline
+      Git access for
+      %strong= @project_wiki.path_with_namespace
 
-  .pull-right
-    = render "shared/clone_panel", project: @project_wiki
+    .pull-right
+      = render "shared/clone_panel", project: @project_wiki
 
-.git-empty.prepend-top-default
-  %fieldset
-    %legend Install Gollum:
-    %pre.dark
-      :preserve
-        gem install gollum
+  .prepend-top-default
+    %fieldset
+      %legend Install Gollum:
+      %pre.dark
+        :preserve
+          gem install gollum
 
-    %legend Clone Your Wiki:
-    %pre.dark
-      :preserve
-        git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
-        cd #{h @project_wiki.path}
+      %legend Clone Your Wiki:
+      %pre.dark
+        :preserve
+          git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
+          cd #{h @project_wiki.path}
 
-    %legend Start Gollum And Edit Locally:
-    %pre.dark
-      :preserve
-        gollum
-        == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
-        >> Thin web server (v1.5.0 codename Knife)
-        >> Maximum connections set to 1024
-        >> Listening on 0.0.0.0:4567, CTRL+C to stop
+      %legend Start Gollum And Edit Locally:
+      %pre.dark
+        :preserve
+          gollum
+          == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
+          >> Thin web server (v1.5.0 codename Knife)
+          >> Maximum connections set to 1024
+          >> Listening on 0.0.0.0:4567, CTRL+C to stop
diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml
index 45460ed9f41..630ee35b70b 100644
--- a/app/views/projects/wikis/history.html.haml
+++ b/app/views/projects/wikis/history.html.haml
@@ -1,37 +1,37 @@
 - page_title "History", @page.title.capitalize, "Wiki"
 = render 'nav'
+%div{ class: (container_class) }
+  .top-area
+    .nav-text
+      %strong
+        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+      %span.light
+        ·
+        History
 
-.top-area
-  .nav-text
-    %strong
-      = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-    %span.light
-      ·
-      History
-
-.table-holder
-  %table.table
-    %thead
-      %tr
-        %th Page version
-        %th Author
-        %th Commit Message
-        %th Last updated
-        %th Format
-    %tbody
-      - @page.versions.each_with_index do |version, index|
-        - commit = version
+  .table-holder
+    %table.table
+      %thead
         %tr
-          %td
-            = link_to project_wiki_path_with_version(@project, @page,
-                                                     commit.id, index == 0) do
-              = truncate_sha(commit.id)
-          %td
-            = commit.author.name
-          %td
-            = commit.message
-          %td
-            #{time_ago_with_tooltip(version.authored_date)}
-          %td
-            %strong
-              = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
+          %th Page version
+          %th Author
+          %th Commit Message
+          %th Last updated
+          %th Format
+      %tbody
+        - @page.versions.each_with_index do |version, index|
+          - commit = version
+          %tr
+            %td
+              = link_to project_wiki_path_with_version(@project, @page,
+                                                       commit.id, index == 0) do
+                = truncate_sha(commit.id)
+            %td
+              = commit.author.name
+            %td
+              = commit.message
+            %td
+              #{time_ago_with_tooltip(version.authored_date)}
+            %td
+              %strong
+                = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml
index 2f6162fa3c5..81d9f391c1c 100644
--- a/app/views/projects/wikis/pages.html.haml
+++ b/app/views/projects/wikis/pages.html.haml
@@ -1,12 +1,14 @@
+- @no_container = true
 - page_title "Pages", "Wiki"
 
 = render 'nav'
 
-%ul.content-list
-  - @wiki_pages.each do |wiki_page|
-    %li
-      = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
-      %small (#{wiki_page.format})
-      .pull-right
-        %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
-= paginate @wiki_pages, theme: 'gitlab'
+%div{ class: (container_class) }
+  %ul.content-list
+    - @wiki_pages.each do |wiki_page|
+      %li
+        = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
+        %small (#{wiki_page.format})
+        .pull-right
+          %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
+  = paginate @wiki_pages, theme: 'gitlab'
diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml
index 9166c0edb3b..76f9b1ecd76 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/app/views/projects/wikis/show.html.haml
@@ -1,24 +1,26 @@
+- @no_container = true
 - page_title @page.title.capitalize, "Wiki"
 = render 'nav'
 
-.top-area
-  .nav-text
-    %strong= @page.title.capitalize
+%div{ class: (container_class) }
+  .top-area
+    .nav-text
+      %strong= @page.title.capitalize
 
-    %span.wiki-last-edit-by
-      ·
-      last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
+      %span.wiki-last-edit-by
+        ·
+        last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
 
-  .nav-controls
-    = render 'main_links'
+    .nav-controls
+      = render 'main_links'
 
-- if @page.historical?
-  .warning_message
-    This is an old version of this page.
-    You can view the #{link_to "most recent version", namespace_project_wiki_path(@project.namespace, @project, @page)} or browse the #{link_to "history", namespace_project_wiki_history_path(@project.namespace, @project, @page)}.
+  - if @page.historical?
+    .warning_message
+      This is an old version of this page.
+      You can view the #{link_to "most recent version", namespace_project_wiki_path(@project.namespace, @project, @page)} or browse the #{link_to "history", namespace_project_wiki_history_path(@project.namespace, @project, @page)}.
 
 
-.wiki-holder.prepend-top-default.append-bottom-default
-  .wiki
-    = preserve do
-      = render_wiki_content(@page)
+  .wiki-holder.prepend-top-default.append-bottom-default
+    .wiki
+      = preserve do
+        = render_wiki_content(@page)