Problem/Motivation

The focus style of the password field overlaps the password strength indicator bar and distorts the sharpness and colours of the indicator.


Proposed resolution

A fix with CSS, some suggestions:
- Add a small margin above the indicator which clears it of the focus area.
- Increase the height of the indicator bar.
- Position the indicator on the z-index so it sits ontop of the focus (not recommended).

Remaining tasks

Discuss solution
Write a patch
Test patch + upload patch and Screenshots.
Patch review + screenshots.

User interface changes

Improves visibility of password strength indicator.

API changes

n/a

CommentFileSizeAuthor
#14 stark.png18.21 KBByronNorris
#13 Screenshot 2014-09-08 22.24.37.jpg454.42 KBLewisNyman
#13 Screenshot 2014-09-08 22.24.37.jpg454.42 KBLewisNyman
#9 password-focus-margin-2318677-margin-height-9.patch401 bytesByronNorris
#5 password-focus-margin-2318677-margin-height-5.diff400 bytesByronNorris
#5 password-focus-margin-2318677-52em-margin-5.diff379 bytesByronNorris
#5 password-focus-margin-2318677-45em-margin-5.diff379 bytesByronNorris
#5 password-focus-margin-2318677-5.png54.31 KBByronNorris
#1 password-focus-margin-2318677-1.diff378 bytesByronNorris
#1 password-focus-height-2318677-1.diff379 bytesByronNorris
#1 password-focus.png40.01 KBByronNorris
Screen Shot 2014-08-10 at 15.12.33.png18.78 KBemma.maria
Screen Shot 2014-08-10 at 15.12.20.png19.69 KBemma.maria
Screen Shot 2014-08-10 at 15.12.39.png18 KBemma.maria
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ByronNorris’s picture

ByronNorris CreditAttribution: ByronNorris commented
Status: Active » Needs review
FileSize
password-focus.png40.01 KB
password-focus-height-2318677-1.diff379 bytes
password-focus-margin-2318677-1.diff378 bytes

Here's a quick mockup of the password strength bar:

  • Shifted down .5 em
  • Height raised to .75 em

mockup of password strength bar shifted down and height increased

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria commented
Issue tags: +Needs usability review

I prefer the margin solution, I can't stand the blue focus bleeding into the colours even with the height increase. Having a space makes both parties crisper. Also I only just noticed from my original screenshots that the text field has slight rounded corners and the password is square and they don't look good touching in my opinion.

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Issue tags: -Needs usability review

I agree. Could you try playing a bit with the margin though - I am not sure if 0.45 or 0.52 work better (random values I tried).

astrocling’s picture

astrocling CreditAttribution: astrocling commented

I agree with @emma.maria. I like the Margin option better, it looks a bit cleaner. As for the amount of margin, it seems like more of a personal preference to me. What you have looks fine, personally a little more, like @bohan's .52 recommendation looks a little bit better. But again that is just a personal eye thing at that point. I do like it broken up a bit, and the .52em does that well.

ByronNorris’s picture

ByronNorris CreditAttribution: ByronNorris commented
FileSize
password-focus-margin-2318677-5.png54.31 KB
password-focus-margin-2318677-45em-margin-5.diff379 bytes
password-focus-margin-2318677-52em-margin-5.diff379 bytes
password-focus-margin-2318677-margin-height-5.diff400 bytes

From right to left:

  • 1) .45em margin-top
  • 2) .52em margin-top
  • 3) .50em margin-top, .75em height

mockup of password strength bar with .45em, .52em top margin, and .5em top margin with .75em height

I've attached diffs of each change as well.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

@bluegriff Thanks this is awesome, I like the increased height of patch 3. I think we should go with that.

peterjlord’s picture

peterjlord CreditAttribution: peterjlord commented

Just tested the patch on a clean install. Great UI improvement. Little things like this make for a great release

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Needs review » Needs work

Ok, let's go with the third patch. We need to rename the file type to .patch and change .5em to 0.5em

ByronNorris’s picture

ByronNorris CreditAttribution: ByronNorris commented
FileSize
password-focus-margin-2318677-margin-height-9.patch401 bytes

Excellent! Here's the updated patch file for the third option.

astrocling’s picture

astrocling CreditAttribution: astrocling commented
Status: Needs work » Reviewed & tested by the community

I agree with this option, I think it looks nice. The patch appears correct for me and tests correctly when I applied it, and is in the right format.

G-raph’s picture

G-raph CreditAttribution: G-raph commented
Issue tags: +FUDK

Looks good and is fine by me. Good work!

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
CreditAttribution: webchick commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs manual testing

Wow, great work and great testing on this!

Now the only problem is this is modifying user.css (meaning, all themes) but I only see testing in Seven. Could we get a quick run-through in Stark and Bartik as well? (Doesn't have to be super comprehensive like #5; just enough to show it doesn't mess up the display.)

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
FileSize
Screenshot 2014-09-08 22.24.37.jpg454.42 KB
Screenshot 2014-09-08 22.24.37.jpg454.42 KB

Good point, here are the screenshots.

The user edit screen in Bartik

Bartik looks good to me, Stark looks a little weird but not broken.

ByronNorris’s picture

ByronNorris CreditAttribution: ByronNorris commented
FileSize
stark.png18.21 KB

Bartik looks a-ok. Stark does indeed look weird, but it was weird pre-patch :D

screenshot comparing password strength indicator with stark screen active

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Needs review » Reviewed & tested by the community

That's true, let's go!

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
CreditAttribution: webchick commented
Status: Reviewed & tested by the community » Fixed

Awesome, thanks for the testing! Sorry that this dropped off my radar for a week there. :(

Committed and pushed to 8.x. Thanks!

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Fixed » Reviewed & tested by the community

No push?

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Assigned: Unassigned » webchick

I don't know what the correct process is here but I'll assign it to Angie in case she misses it :)

webchick’s picture

webchick
she/they
Primary language English
Location Vancouver 🇨🇦
CreditAttribution: webchick commented
Status: Reviewed & tested by the community » Fixed

Bah! Thanks. Got it this time. :)

  • webchick committed b0ce906 on 8.0.x 
    Issue #2318677 by bluegriff | emma.maria: Fixed Password field focus is...
LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Assigned: webchick » Unassigned

Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.