Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Meta Issue:#1870944: [Meta] Mobile friendly admin pages
Problem/Motivation
Password Strength indicator overlaps with Password input field in Narrow screens.
There is a scroll in narrow screens.
Admin URL: admin/people/create
Proposed resolution
To be determined.
Remaining tasks
To be determined.
Comment | File | Size | Author |
---|---|---|---|
#12 | password_strength_in_narrowscreens.PNG | 369.8 KB | Shyamala |
#10 | beforepatch.png | 418.92 KB | Shyamala |
#10 | after-patch.png | 397.01 KB | Shyamala |
#5 | password-field-narrow-1887558-5.patch | 831 bytes | echoz |
#5 | password-narrow.png | 80 KB | echoz |
Comments
Comment #1
echoz CreditAttribution: echoz commentedHere's a start since user.css is in need of a rewrite for both selector specificity and property alphabetizing issues.
This matches seven's media query, max-width: 600px, for other form elements.
Comment #2
rteijeiro CreditAttribution: rteijeiro commentedHi echoz.
Reviewed with Chrome, Firefox, Safari, Opera and on my iPhone.
Now it looks great.
CSS syntax is right too ;)
Comment #3
Dries CreditAttribution: Dries commentedIt feels like the strength indicator should be below the password field, closer to the instruction on how to make the password stronger. Feels a bit disconnected.
I also note that 'Password strength' floats left, but 'Password match' floats right in the after screenshot.
While this is good progress, it needs some extra UI love, me thinks. Keep up the good work!
Comment #4
Dries CreditAttribution: Dries commentedComment #5
echoz CreditAttribution: echoz commentedBelow the password field was the obvious choice but that would entail switching the order of the dom where the strength indicator comes first, so at wide viewports it can float right without the password field needing to float left, where it wasn't needed before...
but I like this better! The password strength indicator matches the confirm below. Screenshot attached.
Comment #6
moshe weitzman CreditAttribution: moshe weitzman commentedThat works for me. Thanks echoz.
Comment #8
echoz CreditAttribution: echoz commented#5: password-field-narrow-1887558-5.patch queued for re-testing.
Comment #9
echoz CreditAttribution: echoz commented#6 set status to RTBC when it was still yellow, then after going red (silly bot) and retested to green, status is back to needs review. Can we get another RTBC please?
Comment #10
Shyamala CreditAttribution: Shyamala commentedAttached screenshots before & after patch. The password indicator positions beautifully.
The page has a scroll in NARROW screens. It will be good to address the scroll on the page in smaller resolutions in this issue as well.
Comment #11
echoz CreditAttribution: echoz commented@Shyamala, I can not reproduce. I get no scrollbar.
Oh, it seems you are getting a scrollbar from the overlay. If you load this from an already narrow viewport, there is no overlay, and it should look like my screenshot in #5.
Comment #12
Shyamala CreditAttribution: Shyamala commentedRTBC, works well. Thanks @echoz
Comment #13
Dries CreditAttribution: Dries commentedCommitted to 8.x. Thanks.