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

Resolve "Graphs and Wiki subnav"

## What does this MR do?
Styles sub nav in `Wiki` and `Graphs`

## What are the relevant issue numbers?
Closes #18533 

## Screenshots (if relevant)
![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

CHANGELOG

@@ -149,6 +149,7 @@ v 8.9.0 (unreleased)
   - Ensure Todos counters doesn't count Todos for projects pending delete
   - Add left/right arrows horizontal navigation
   - Add tooltip to pin/unpin navbar
+  - Add new sub nav style to Wiki and Graphs sub navigation
 
 v 8.8.5
   - Import GitHub repositories respecting the API rate limit !4166

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%;

app/assets/stylesheets/pages/stat_graph.scss

@@ -14,19 +14,27 @@
   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;
-  }
 
-  .person {
-    &:nth-child(even) {
-      float: right;
+    svg {
+      width: 100%;
+    }
   }
 
-    float: left;
+  .person {
+    @include make-md-column(6);
     margin-top: 10px;
 
     @media (max-width: $screen-sm-min) {

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

-- page_specific_javascripts asset_path("graphs/application.js")
-%ul.nav-links
+.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

app/views/projects/graphs/ci.html.haml

+- @no_container = true
 - page_title "Continuous Integration", "Graphs"
 = render 'head'
-.row-content-block.append-bottom-default
+
+%div{ class: (container_class) }
+  .sub-header-block
     .oneline
       A collection of graphs for Continuous Integration
 
-#charts.ci-charts
+  #charts.ci-charts
     .row
       .col-md-6
         = render 'projects/graphs/ci/overall'

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

+- @no_container = true
 - page_title "Commits", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
+%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
+  %p.lead
     Commit statistics for
     %strong #{@ref}
     #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
 
-.row
+  .row
     .col-md-6
       %ul
         %li
@@ -36,7 +38,7 @@
         %p.slead
           Commits per day of month
         %canvas#month-chart
-.row
+  .row
     .col-md-6
       %div
         %p.slead

app/views/projects/graphs/languages.html.haml

+- @no_container = true
 - page_title "Languages", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
+%div{ class: (container_class) }
+  .sub-header-block
     .oneline
       Programming languages used in this repository
 
-.row
+  .row
     .col-md-8
       %canvas#languages-chart{ height: 400 }
     .col-md-4

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

+- @no_container = true
 - page_title "Contributors", "Graphs"
 = render 'head'
 
-.row-content-block.append-bottom-default
+%div{ class: (container_class) }
+  .sub-header-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'graphs'
     %ul.breadcrumb.repo-breadcrumb
       = commits_breadcrumbs
 
-.loading-graph
+  .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
+  .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
+    .graphs.row
       #contributors-master
       #contributors.clearfix
         %ol.contributors-list.clearfix

app/views/projects/wikis/_main_links.html.haml

 - 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)

app/views/projects/wikis/_nav.html.haml

-.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'

app/views/projects/wikis/_new.html.haml

-%div#modal-new-wiki.modal
+- @no_container = true
+
+%div{ class: (container_class) }
+  %div#modal-new-wiki.modal
     .modal-dialog
       .modal-content
         .modal-header

app/views/projects/wikis/edit.html.haml

+- @no_container = true
 - page_title "Edit", @page.title.capitalize, "Wiki"
 = render 'nav'
 
-.top-area
-  .nav-text.wiki-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)
@@ -13,7 +15,10 @@
         Edit Page
 
     .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'

app/views/projects/wikis/git_access.html.haml

+- @no_container = true
 - page_title "Git Access", "Wiki"
 
 = render 'nav'
-.row-content-block
+%div{ class: (container_class) }
+  .sub-header-block
     %span.oneline
       Git access for
       %strong= @project_wiki.path_with_namespace
@@ -9,7 +11,7 @@
     .pull-right
       = render "shared/clone_panel", project: @project_wiki
 
-.git-empty.prepend-top-default
+  .prepend-top-default
     %fieldset
       %legend Install Gollum:
       %pre.dark

app/views/projects/wikis/history.html.haml

 - page_title "History", @page.title.capitalize, "Wiki"
 = render 'nav'
-
-.top-area
+%div{ class: (container_class) }
+  .top-area
     .nav-text
       %strong
         = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
@@ -9,7 +9,7 @@
         ·
         History
 
-.table-holder
+  .table-holder
     %table.table
       %thead
         %tr

app/views/projects/wikis/pages.html.haml

+- @no_container = true
 - page_title "Pages", "Wiki"
 
 = render 'nav'
 
-%ul.content-list
+%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'
+  = paginate @wiki_pages, theme: 'gitlab'

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

+- @no_container = true
 - page_title @page.title.capitalize, "Wiki"
 = render 'nav'
 
-.top-area
+%div{ class: (container_class) }
+  .top-area
     .nav-text
       %strong= @page.title.capitalize
 
@@ -12,13 +14,13 @@
     .nav-controls
       = render 'main_links'
 
-- if @page.historical?
+  - 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-holder.prepend-top-default.append-bottom-default
     .wiki
       = preserve do
         = render_wiki_content(@page)