Add section login field above Oauth links #17276
Conversation
|
Working on UI tests now |
| %strong= Rails.env | ||
| %a{href: 'http://wiki.code.org/display/PROD/Developer+Oauth+setup'} | ||
| check the wiki. | ||
| - if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' |
There was a problem hiding this comment.
Is there a controller we could hoist such complex code out into?
There was a problem hiding this comment.
This is unedited in this PR, from the original file which I think was brought over from https://github.com/plataformatec/devise/blob/master/app/views/devise/shared/_links.html.erb - I'm not entirely against pulling things out, but I'm a bit hesitant to do it here because I don't really know what that code is doing or how to properly test it.
| .vertical_bar { | ||
| width: 2px; | ||
| height: 100%; | ||
| background-color: $black; |
There was a problem hiding this comment.
The screenshot looks like it's pure black, too, but we rarely use pure black for such a piece of UI. Probably $dark_charcoal will be the colour to use.
There was a problem hiding this comment.
As discussed online, probably lighter grey will work better. We can interate.
| = link_to t('auth.need_unlock'), new_unlock_path(resource_name) | ||
| %br/ | ||
| %br/ | ||
| %div{style: "display: block;"} |
There was a problem hiding this comment.
The diff got mangled here, what's really happening is everything that was previously here is put inside an enclosing div without edits (everything down to line 71 is essentially untouched apart from indentation).
…ithub.com/code-dot-org/code-dot-org into join-section-from-sign-in
…s where oauth panel is shown)
…ithub.com/code-dot-org/code-dot-org into join-section-from-sign-in
| .devise_link_section { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; |
There was a problem hiding this comment.
Not sure if I mentioned before, but some of the earliest browsers we support have some limitations on their flexbox support and we should test explicitly. I think @islemaster knows the most about this.
There was a problem hiding this comment.
I've found http://caniuse.com/#feat=flexbox to be fairly accurate. Only IE11 is likely to cause issues for us, only in the following scenarios:
- IE 11 requires a unit to be added to the third argument, the flex-basis property
- IE 11 does not vertically align items correctly when min-height is used
- In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
So generally flex-direction: column and min-height together is a red flag. I don't see that here, so this is likely to work fine. Worth testing though 👍.
| And I type "9999999999" into "#section_code" | ||
| And I click selector "#section_form .btn-primary" | ||
| Then I wait until I am on "http://studio.code.org/courses" | ||
| And I wait for 10 seconds |
There was a problem hiding this comment.
Can we replace this timed wait for a wait for a specific element to be visible instead?
There was a problem hiding this comment.
Oops, that was for local testing only as I was developing the test. My bad, good catch!
…ithub.com/code-dot-org/code-dot-org into join-section-from-sign-in
Also adds "OR" bar on the left side of the links section when on the sign in page (excluded from the new registration page):
(Updated with $light_gray instead of $black):
(In-context, old color):