Page MenuHomePhabricator

Sign up page not applying mobile styles correctly
Closed, ResolvedPublic

Description

Various styles are shipped by MobileFrontend to provide a nice sign up screen:

These don't appear to be applied to the new sign up screen.

Event Timeline

Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptMay 19 2016, 9:29 PM
Tgr added a subscriber: Tgr.May 19 2016, 9:52 PM

WHere do those styles live? Some class names might have changed since the signup form is now a proper HTMLForm instead of a hand-crafted template.

The ResourceLoader module skins.minerva.special.userlogin.styles
Note that the .htmlform-tip help me log in link also breaks the rendering of the login form. Either hide it or if essential seek Design help.

Jdlrobson assigned this task to Tgr.May 24 2016, 5:08 PM
Jdlrobson triaged this task as High priority.
Jdlrobson added a project: Readers-Web-Backlog.

Change 290750 had a related patch set uploaded (by Gergő Tisza):
Restore Userlogin error/warning URL parameter

https://gerrit.wikimedia.org/r/290750

Change 290782 had a related patch set uploaded (by Gergő Tisza):
Fix various AuthManager style regressions

https://gerrit.wikimedia.org/r/290782

Change 290750 merged by jenkins-bot:
Restore Userlogin error/warning URL parameter

https://gerrit.wikimedia.org/r/290750

Change 290782 merged by jenkins-bot:
Fix various AuthManager style regressions

https://gerrit.wikimedia.org/r/290782

Tgr closed this task as Resolved.May 25 2016, 11:38 PM

Change 291311 had a related patch set uploaded (by Gergő Tisza):
Restore Userlogin error/warning URL parameter

https://gerrit.wikimedia.org/r/291311

Change 291311 merged by jenkins-bot:
Restore Userlogin error/warning URL parameter

https://gerrit.wikimedia.org/r/291311

bmansurov reopened this task as Open.Jun 6 2016, 10:18 PM
bmansurov added a subscriber: bmansurov.

Some more issues:

  1. See that password fields don't have border bottoms (Chrome 50.0.2661.89, Android 6.0.1 on Nexus 5x)

  1. Checkbox is on the far left (Firefox 8, Android 3.2.1 on Xoom Tablet)

  1. The "Create your account" button is not as wide as the other form elements (Firefox 8, Android 3.2.1 on Xoom Tablet). Same thing happens on Chrome 50.0.2661.102, Mac OS 10.11.4 too.

dr0ptp4kt added a subscriber: dr0ptp4kt.EditedJun 7 2016, 6:42 PM

#1 I think there's a short term simple CSS fix, and we should do that in MobileFrontend and SWAT it. This shouldn't be done in Core, and therefore doesn't block a group 0, 1, 2 progressive rollout.

#2, I'm going to try to reproduce with some other devices. So far, I haven't been able to observe it, but I'll check on a Nexus 7 and an iPad. As it is, the mobile styles normally seem to suppress the checkbox for sufficiently narrow viewports, in effect keeping users logged in, whereas sufficiently wide viewports show the checkbox below the password field. We should figure out a fix for what here appears to be an issue isolated to the specific browser, but unless I see this as an endemic issue (not likely), I think we can do this on a more relaxed timeline - @bmansurov, do you think you'd have a one liner to address this particular issue? We could SWAT a patch. I believe this one is for MFE as well.

#3, the element historically hasn't expanded to full width (although in phone form factor it fills the space). The historical version has been centered on tablet landscape, though (n.b., old and new are left aligned in portrait on a Nexus 7 as on a phone; on iPad portrait it's centered, it looks due to media selectors). This said, the new left alignment matches the existing left aligned sign on button (historically on both landscape and portrait). This one we should analyze if we want to left align both buttons (no active intervention required, although maybe stale styles), center align both buttons (something needs to be modified), or something different. I'm comfortable doing that on a more relaxed timeline. This one should arguably also be done in MFE.

Anomie added a subscriber: Anomie.Jun 7 2016, 6:43 PM
  1. See that password fields don't have border bottoms (Chrome 50.0.2661.89, Android 6.0.1 on Nexus 5x)

In the phone form factor styling, it appears that you're hiding all the labels and compressing the fields into one visual block. As part of this, you're hiding the bottom borders on the password fields and removing all margins.

The problem comes when HTMLForm inserts validation errors, you haven't removed the margins there so the missing bottom border becomes visible.

Possible solutions include removing this line or adding a CSS rule for #userlogin2 .mw-input .error { margin-top: 0; } to remove the space between the field and the error box.

Following up on my Firefox on Android check: Firefox on a Nexus 7 with Android 5 does not have the issue in #2. I believe what we're seeing in that screenshot is a symptom of the particular browser on the particular OS.

I think we can do this on a more relaxed timeline - @bmansurov, do you think you'd have a one liner to address this particular issue?

@dr0ptp4kt I haven't looked at the codebase, so I don't know.

Following up on my Firefox on Android check: Firefox on a Nexus 7 with Android 5 does not have the issue in #2. I believe what we're seeing in that screenshot is a symptom of the particular browser on the particular OS.

Yes looks about right. I used the Firefox version I had on the tablet, which seems really old.

I guess the only remaining issue is #1 and we can apply @Anomie's suggested fix.

Change 293349 had a related patch set uploaded (by Gergő Tisza):
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/293349

Tgr added a comment.Jun 8 2016, 6:38 PM

https://gerrit.wikimedia.org/r/#/c/293349/ is the quick fix for #1 but eventually a designer should look at it; the concept of collapsing the fields together just doesn't work very well with error messages placed between the fields.

bmansurov closed this task as Resolved.Jun 9 2016, 9:05 AM

Change 293349 merged by jenkins-bot:
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/293349

Change 293638 had a related patch set uploaded (by Gergő Tisza):
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/293638

Change 293638 merged by jenkins-bot:
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/293638

Change 296525 had a related patch set uploaded (by Gergő Tisza):
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/296525

Change 296525 merged by jenkins-bot:
Do not remove bottom border of fields in signup form

https://gerrit.wikimedia.org/r/296525