Merge branch '18546-update-wiki-page-design' into 'master'

Resolve "missing design for wiki page"

### To Do:

- [x] Move page navigation from sub-menu to sidebar menu
- [x] Update wiki page header
- [x] Update wiki edit page actions and header
- [x] Update `Git access` page design
- [ ] ~~Add search to sidebar navigation~~

### Screen Shots:

#### `@media (min-width: $screen-lg)`

![Screen_Shot_2016-11-16_at_12.25.47_PM](/uploads/2efc59639ac53d69808e78a8ba65fcbf/Screen_Shot_2016-11-16_at_12.25.47_PM.png)  
![Screen_Shot_2016-11-16_at_12.25.36_PM](/uploads/bb7e93558335edf4216082cc1ac3f8f5/Screen_Shot_2016-11-16_at_12.25.36_PM.png)  
![Screen_Shot_2016-11-16_at_12.26.43_PM](/uploads/c2dce7cff05680b9a03438ec7d9967b4/Screen_Shot_2016-11-16_at_12.26.43_PM.png)  
![Screen_Shot_2016-11-16_at_12.26.05_PM](/uploads/7dbae25bfc93fb2f01cd231db0cb47d3/Screen_Shot_2016-11-16_at_12.26.05_PM.png) 

#### `@media (min-width: $screen-md)`

![Screen_Shot_2016-11-16_at_12.28.18_PM](/uploads/4fdcc8c88c38093ea5a4fe0b22b79acf/Screen_Shot_2016-11-16_at_12.28.18_PM.png)  
![Screen_Shot_2016-11-16_at_12.28.21_PM](/uploads/ce84a51fdc0623b2b192d8334c2c2f6d/Screen_Shot_2016-11-16_at_12.28.21_PM.png)  

#### `@media (min-width: $screen-sm)`

![Screen_Shot_2016-11-16_at_12.28.05_PM](/uploads/cf612a36259c248ca597a0850546fe75/Screen_Shot_2016-11-16_at_12.28.05_PM.png)  
![Screen_Shot_2016-11-16_at_12.28.08_PM](/uploads/ae4374f9968c1cc064242fde3ad0e214/Screen_Shot_2016-11-16_at_12.28.08_PM.png)  

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #18546

See merge request !7429

8 files changed, 105 insertions, 68 deletions

diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 4e41a15d9f4..c52527332bc 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -34,9 +34,6 @@
     - if @page && @page.persisted?
       = f.submit 'Save changes', class: "btn-save btn"
       .pull-right
-        - if can?(current_user, :admin_wiki, @project)
-          = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger btn-grouped" do
-            Delete
         = link_to "Cancel", namespace_project_wiki_path(@project.namespace, @project, @page), class: "btn btn-cancel btn-grouped"
     - else
       = f.submit 'Create page', class: "btn-create btn"
diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml
deleted file mode 100644
index afdef70e1cf..00000000000
--- a/app/views/projects/wikis/_nav.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %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)
-
-        = nav_link(path: 'wikis#pages') do
-          = link_to 'Pages', namespace_project_wikis_pages_path(@project.namespace, @project)
-
-        = nav_link(path: 'wikis#git_access') do
-          = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
-            Git Access
-
-      = render 'projects/wikis/new'
diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml
new file mode 100644
index 00000000000..cad9c15a49e
--- /dev/null
+++ b/app/views/projects/wikis/_sidebar.html.haml
@@ -0,0 +1,23 @@
+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar
+  .block.wiki-sidebar-header.append-bottom-default
+    %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
+      = icon('angle-double-right')
+
+    - git_access_url = namespace_project_wikis_git_access_path(@project.namespace, @project)
+    = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '' do
+      = succeed ' ' do
+        = icon('cloud-download')
+      Clone repository
+
+  .blocks-container
+    .block.block-first
+      %ul.wiki-pages
+        - @sidebar_wiki_pages.each do |wiki_page|
+          %li{ class: params[:id] == wiki_page.slug ? 'active' : '' }
+            = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
+              = wiki_page.title.capitalize
+    .block
+      = link_to namespace_project_wikis_pages_path(@project.namespace, @project), class: 'btn btn-block' do
+        More Pages
+
+= render 'projects/wikis/new'
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 679d6018bef..8cf018da1b7 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -1,23 +1,35 @@
 - @no_container = true
 - page_title "Edit", @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
-  .top-area
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
-      %strong
+      %h2.wiki-page-title
         - if @page.persisted?
           = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
         - else
           = @page.title.capitalize
-      %span.light
-        ·
-        Edit Page
+        %span.light
+          ·
+          - if @page.persisted?
+            Edit Page
+          - else
+            Create Page
 
     .nav-controls
-      - 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
+      - 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
+      - if @page.persisted?
+        = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
+          Page History
+        - if can?(current_user, :admin_wiki, @project)
+          = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger" do
+            Delete
 
   = render 'form'
+
+= render 'sidebar'
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index b8811a28dd6..e25d6a48573 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -1,34 +1,36 @@
 - @no_container = true
 - page_title "Git Access", "Wiki"
 
-= render 'nav'
 %div{ class: container_class }
-  .sub-header-block
-    %span.oneline
-      Git access for
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
+    .git-access-header
+      Clone repository
       %strong= @project_wiki.path_with_namespace
 
-    .pull-right
-      = render "shared/clone_panel", project: @project_wiki
+    = render "shared/clone_panel", project: @project_wiki
+
+  .wiki-git-access
+    %h3 Install Gollum
+    %pre.dark
+      :preserve
+        gem install gollum
 
-  .prepend-top-default
-    %fieldset
-      %legend Install Gollum:
-      %pre.dark
-        :preserve
-          gem install gollum
+    %h3 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}
+    %h3 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
+= render 'sidebar'
diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml
index 4c0b14e2c42..dd7213622c1 100644
--- a/app/views/projects/wikis/history.html.haml
+++ b/app/views/projects/wikis/history.html.haml
@@ -1,13 +1,16 @@
 - page_title "History", @page.title.capitalize, "Wiki"
-= render 'nav'
+
 %div{ class: container_class }
-  .top-area
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
-      %strong
+      %h2.wiki-page-title
         = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-      %span.light
-        ·
-        History
+        %span.light
+          ·
+          History
 
   .table-holder
     %table.table
@@ -35,3 +38,5 @@
             %td
               %strong
                 = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
+
+= render 'sidebar'
diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml
index 9c10acd4cb6..e1eaffc6884 100644
--- a/app/views/projects/wikis/pages.html.haml
+++ b/app/views/projects/wikis/pages.html.haml
@@ -1,9 +1,18 @@
 - @no_container = true
 - page_title "Pages", "Wiki"
 
-= render 'nav'
-
 %div{ class: container_class }
+  .wiki-page-header
+
+    .nav-text
+      %h2.wiki-page-title
+        Wiki Pages
+
+    .nav-controls
+      = link_to namespace_project_wikis_git_access_path(@project.namespace, @project), class: 'btn' do
+        = icon('cloud-download')
+        Clone repository
+
   %ul.content-list
     - @wiki_pages.each do |wiki_page|
       %li
diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml
index 5cebb538cf5..1b6dceee241 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/app/views/projects/wikis/show.html.haml
@@ -1,15 +1,19 @@
 - @no_container = true
 - page_title @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
-  .top-area
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
-      %strong= @page.title.capitalize
+      %h2.wiki-page-title= @page.title.capitalize
 
       %span.wiki-last-edit-by
-        ·
-        last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
+        Last edited by
+        %strong
+          #{@page.commit.author.name}
+        #{time_ago_with_tooltip(@page.commit.authored_date)}
 
     .nav-controls
       = render 'main_links'
@@ -19,8 +23,9 @@
       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)
+
+= render 'sidebar'