Merge branch 'unrevert-tab-order-MR' into 'master'

Change input order on Sign In form for better tabbing.

## What does this MR do?

This unreverts 8751491b, which was mistakenly reverted in !6328. It also changes the implementation of the original commit to work with the new login styling and markup.

cc: @ClemMakesApps

## Screenshots (if relevant)

(Disregard the grey borders on invalid inputs -- for some reason, Gifox isn't picking up some colors for me :shrug: )

![2016-10-17_11.32.05](/uploads/f395b2d77fb47cac3f9d4fa1bc3d7d71/2016-10-17_11.32.05.gif)

## Does this MR meet the acceptance criteria?

- [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?
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6867

See merge request !6928

2 files changed, 19 insertions, 2 deletions

diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index e6d9be5185d..bdb13bee178 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -53,6 +53,7 @@
       margin: 0 0 10px;
     }
 
+
     .login-footer {
       margin-top: 10px;
 
@@ -246,3 +247,19 @@
     padding: 65px; // height of footer + bottom padding of email confirmation link
   }
 }
+
+// For sign in pane only, to improve tab order, the following removes the submit button from
+// normal document flow and pins it to the bottom of the form. For context, see !6867 & !6928
+
+.login-box {
+  .new_user {
+    position: relative;
+    padding-bottom: 35px;
+  }
+
+  .move-submit-down {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+  }
+}
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index a96b579c593..525e7d99d71 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -5,6 +5,8 @@
   %div.form-group
     = f.label :password
     = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
+  %div.submit-container.move-submit-down
+    = f.submit "Sign in", class: "btn btn-save"
   - if devise_mapping.rememberable?
     .remember-me.checkbox
       %label{for: "user_remember_me"}
@@ -12,5 +14,3 @@
         %span Remember me
       .pull-right
         = link_to "Forgot your password?", new_password_path(resource_name)
-  %div.submit-container
-    = f.submit "Sign in", class: "btn btn-save"