Commit 2510345e authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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

![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
parents 8e218edb 8815748f
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
margin: 0 0 10px; margin: 0 0 10px;
} }
.login-footer { .login-footer {
margin-top: 10px; margin-top: 10px;
...@@ -246,3 +247,19 @@ ...@@ -246,3 +247,19 @@
padding: 65px; // height of footer + bottom padding of email confirmation link 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;
}
}
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
%div.form-group %div.form-group
= f.label :password = f.label :password
= f.password_field :password, class: "form-control bottom", required: true, title: "This field is required." = 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? - if devise_mapping.rememberable?
.remember-me.checkbox .remember-me.checkbox
%label{for: "user_remember_me"} %label{for: "user_remember_me"}
...@@ -12,5 +14,3 @@ ...@@ -12,5 +14,3 @@
%span Remember me %span Remember me
.pull-right .pull-right
= link_to "Forgot your password?", new_password_path(resource_name) = link_to "Forgot your password?", new_password_path(resource_name)
%div.submit-container
= f.submit "Sign in", class: "btn btn-save"
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment