Merge branch 'dz-small-ui-fixes' into 'master'

Set of UI fixes

* Improve wiki pages
* Improve profile pages

cc @skyruler 

See merge request !2758

22 files changed, 110 insertions, 94 deletions

diff --git a/app/assets/javascripts/wikis.js.coffee b/app/assets/javascripts/wikis.js.coffee
index 19420f42468..1ee827f1fa3 100644
--- a/app/assets/javascripts/wikis.js.coffee
+++ b/app/assets/javascripts/wikis.js.coffee
@@ -2,7 +2,7 @@
 
 class @Wikis
   constructor: ->
-    $('.build-new-wiki').bind 'click', (e) =>
+    $('.new-wiki-page').on 'submit', (e) =>
       $('[data-error~=slug]').addClass('hidden')
       field = $('#new_wiki_path')
       slug = @slugify(field.val())
@@ -10,6 +10,7 @@ class @Wikis
       if (slug.length > 0)
         path = field.attr('data-wikis-path')
         location.href = path + '/' + slug
+        e.preventDefault()
 
   dasherize: (value) ->
     value.replace(/[_\s]+/g, '-')
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 252a586358c..d24faa897a1 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -77,12 +77,21 @@
     margin-bottom: 0px;
 
     > .dropdown {
-      margin-right: 10px;
+      margin-right: $gl-padding-top;
       display: inline-block;
     }
 
     > .btn {
+      margin-right: $gl-padding-top;
       display: inline-block;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    > .btn-grouped {
+      float: none;
     }
 
     > form {
@@ -94,7 +103,7 @@
       display: inline-block;
       position: relative;
       top: 1px;
-      margin-right: 10px;
+      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index cdf514197cb..dfaeba41cf6 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -4,8 +4,3 @@
   margin-right: auto;
   padding-right: 7px;
 }
-
-.wiki-last-edit-by {
-  font-size: 80%;
-  font-weight: normal;
-}
diff --git a/app/views/profiles/applications.html.haml b/app/views/profiles/applications.html.haml
index 0436c2213da..86f35823406 100644
--- a/app/views/profiles/applications.html.haml
+++ b/app/views/profiles/applications.html.haml
@@ -1,7 +1,7 @@
 - page_title "Applications"
 - header_title page_title, applications_profile_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   - if user_oauth_applications?
     Manage applications that can use GitLab as an OAuth provider,
     and applications that you've authorized to use your account.
diff --git a/app/views/profiles/audit_log.html.haml b/app/views/profiles/audit_log.html.haml
index 8fdba45b193..8f45f41cfe3 100644
--- a/app/views/profiles/audit_log.html.haml
+++ b/app/views/profiles/audit_log.html.haml
@@ -1,7 +1,7 @@
 - page_title "Audit Log"
 - header_title page_title, audit_log_profile_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   History of authentications
 
 .prepend-top-default
diff --git a/app/views/profiles/emails/index.html.haml b/app/views/profiles/emails/index.html.haml
index 1d140347a5f..705e1804717 100644
--- a/app/views/profiles/emails/index.html.haml
+++ b/app/views/profiles/emails/index.html.haml
@@ -1,24 +1,22 @@
 - page_title "Emails"
 - header_title page_title, profile_emails_path
 
-.gray-content-block.top-block
-  Control emails linked to your account
-
-%ul.prepend-top-default
-  %li
-    Your
-    %b Primary Email
-    will be used for avatar detection and web based operations, such as edits and merges.
-  %li
-    Your
-    %b Notification Email
-    will be used for account notifications.
-  %li
-    Your
-    %b Public Email
-    will be displayed on your public profile.
-  %li
-    All email addresses will be used to identify your commits.
+.alert.alert-help.prepend-top-default
+  %ul
+    %li
+      Your
+      %b Primary Email
+      will be used for avatar detection and web based operations, such as edits and merges.
+    %li
+      Your
+      %b Notification Email
+      will be used for account notifications.
+    %li
+      Your
+      %b Public Email
+      will be displayed on your public profile.
+    %li
+      All email addresses will be used to identify your commits.
 
 .panel.panel-default
   .panel-heading
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 17a4195030e..c9a6a93f545 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -1,14 +1,14 @@
 - page_title "SSH Keys"
 - header_title page_title, profile_keys_path
 
-.gray-content-block.top-block
-  .pull-right
+.top-area
+  .nav-text
+    Before you can add an SSH key you need to
+    = link_to "generate it.", help_page_path("ssh", "README")
+  .nav-controls
     = link_to new_profile_key_path, class: "btn btn-new" do
       = icon('plus')
       Add SSH Key
-  .oneline
-    Before you can add an SSH key you need to
-    = link_to "generate it.", help_page_path("ssh", "README")
 
 .prepend-top-default
 = render 'key_table'
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 0bcadc965fa..d5f61d9f0ca 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -1,9 +1,6 @@
 - page_title "Notifications"
 - header_title page_title, profile_notifications_path
 
-.gray-content-block.top-block
-  These are your global notification settings.
-
 .prepend-top-default
 = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications form-horizontal global-notifications-form' } do |f|
   -if @user.errors.any?
diff --git a/app/views/profiles/passwords/edit.html.haml b/app/views/profiles/passwords/edit.html.haml
index fab7c45c9b2..ab070c09beb 100644
--- a/app/views/profiles/passwords/edit.html.haml
+++ b/app/views/profiles/passwords/edit.html.haml
@@ -1,7 +1,7 @@
 - page_title "Password"
 - header_title page_title, edit_profile_password_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   - if @user.password_automatically_set?
     Set your password.
   - else
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 877589dc390..1a53b4393e4 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,8 +1,7 @@
 - page_title 'Preferences'
 - header_title page_title, profile_preferences_path
-- @blank_container = true
 
-.alert.alert-help
+.alert.alert-help.prepend-top-default
   These settings allow you to customize the appearance and behavior of the site.
   They are saved with your account and will persist to any device you use to
   access the site.
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index add9a00138b..5051c6bf83b 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -1,4 +1,4 @@
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   This information will appear on your profile.
   - if current_user.ldap_user?
     Some options are unavailable for LDAP accounts
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 042f660077e..f2e56081afe 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,5 +1,3 @@
-- @blank_container = true
-
 .project-edit-container.prepend-top-default
   .project-edit-errors
   .project-edit-content
diff --git a/app/views/projects/wikis/_main_links.html.haml b/app/views/projects/wikis/_main_links.html.haml
index 29bf5d62abe..2b91b7e8f65 100644
--- a/app/views/projects/wikis/_main_links.html.haml
+++ b/app/views/projects/wikis/_main_links.html.haml
@@ -1,12 +1,11 @@
-%span.pull-right
-  - if (@page && @page.persisted?)
-    = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
-      Page History
-    - if can?(current_user, :create_wiki, @project)
-      = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-    - 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-remove" do
-        = icon('trash')
-        Delete
+- if (@page && @page.persisted?)
+  = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
+    Page History
+  - if can?(current_user, :create_wiki, @project)
+    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
+      %i.fa.fa-pencil-square-o
+      Edit
+  - 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-remove" do
+      = icon('trash')
+      Delete
diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml
index 56a53ffff2a..a722fbc5352 100644
--- a/app/views/projects/wikis/_nav.html.haml
+++ b/app/views/projects/wikis/_nav.html.haml
@@ -16,4 +16,4 @@
         = icon('plus')
         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 53b37b1104e..919daf0a7b2 100644
--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
@@ -5,9 +5,10 @@
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3.page-title New Wiki Page
       .modal-body
-        .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)
-        .form-actions
-          = link_to 'Create Page', '#', class: 'build-new-wiki btn btn-create'
+        %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 23f64fbbd10..4dd818c7f67 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -1,16 +1,20 @@
 - page_title "Edit", @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
-.gray-content-block
-  .pull-right
+
+.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'
 
-  %h3.page-title.oneline
-    %span.light Edit Page
-    - if @page.persisted?
-      = link_to @page.title, namespace_project_wiki_path(@project.namespace, @project, @page)
-    - else
-      = @page.title
 
 = render 'form'
diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml
index 4322146ce34..dcaddae2b04 100644
--- a/app/views/projects/wikis/history.html.haml
+++ b/app/views/projects/wikis/history.html.haml
@@ -1,11 +1,14 @@
 - page_title "History", @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
-.gray-content-block
-  %h3.page-title
-    %span.light History for
-    = link_to @page.title, namespace_project_wiki_path(@project.namespace, @project, @page)
+
+.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
diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml
index aae1ad69ad9..92b494a513c 100644
--- a/app/views/projects/wikis/pages.html.haml
+++ b/app/views/projects/wikis/pages.html.haml
@@ -2,15 +2,12 @@
 = render "header_title"
 
 = render 'nav'
-.gray-content-block
-  All pages in this wiki are listed below.
-  
+
 %ul.content-list
   - @wiki_pages.each do |wiki_page|
     %li
-      %h4
-        = 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)}
+      = 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 309d40f52bc..067fb7f8f54 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/app/views/projects/wikis/show.html.haml
@@ -1,17 +1,18 @@
 - page_title @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
 
-.gray-content-block
-  = render 'main_links'
-  %h3.page-title.oneline
-    = @page.title.capitalize
+.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)}
 
+  .nav-controls
+    = render 'main_links'
+
 - if @page.historical?
   .warning_message
     This is an old version of this page.
diff --git a/features/steps/profile/profile.rb b/features/steps/profile/profile.rb
index 0305f7e6da0..6b0c1049ece 100644
--- a/features/steps/profile/profile.rb
+++ b/features/steps/profile/profile.rb
@@ -97,7 +97,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
   end
 
   step "I should see a password error message" do
-    page.within '.alert' do
+    page.within '.alert-danger' do
       expect(page).to have_content "Password confirmation doesn't match"
     end
   end
diff --git a/features/steps/project/source/markdown_render.rb b/features/steps/project/source/markdown_render.rb
index 3a4f7a6e01c..2134dae168a 100644
--- a/features/steps/project/source/markdown_render.rb
+++ b/features/steps/project/source/markdown_render.rb
@@ -238,7 +238,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see new wiki page named test' do
     expect(current_path).to eq  namespace_project_wiki_path(@project.namespace, @project, "test")
-    expect(page).to have_content "Edit Page test"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Test"
+      expect(page).to have_content "Edit Page"
+    end
   end
 
   When 'I go back to wiki page home' do
@@ -252,7 +256,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see Gitlab API document' do
     expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "api")
-    expect(page).to have_content "Edit Page api"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Edit"
+      expect(page).to have_content "Api"
+    end
   end
 
   step 'I click on Rake tasks link' do
@@ -261,7 +269,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see Rake tasks directory' do
     expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "raketasks")
-    expect(page).to have_content "Edit Page raketasks"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Edit"
+      expect(page).to have_content "Rake"
+    end
   end
 
   step 'I go directory which contains README file' do
diff --git a/features/steps/project/wiki.rb b/features/steps/project/wiki.rb
index 2a735afbe7b..223b7277b51 100644
--- a/features/steps/project/wiki.rb
+++ b/features/steps/project/wiki.rb
@@ -120,7 +120,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
   step 'I should see the new wiki page form' do
     expect(current_path).to match('wikis/image.jpg')
     expect(page).to have_content('New Wiki Page')
-    expect(page).to have_content('Edit Page image.jpg')
+    expect(page).to have_content('Edit Page')
   end
 
   step 'I create a New page with paths' do
@@ -159,7 +159,9 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
   end
 
   step 'I should see the page history' do
-    expect(page).to have_content('History for')
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content('History')
+    end
   end
 
   step 'I search for Wiki content' do