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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

echoz’s picture

Status: Active » Needs review
FileSize
86.55 KB
87.08 KB
86.04 KB
794 bytes

Here'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.

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

Hi echoz.

Reviewed with Chrome, Firefox, Safari, Opera and on my iPhone.

Now it looks great.

CSS syntax is right too ;)

Dries’s picture

It 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!

Dries’s picture

Status: Reviewed & tested by the community » Needs work
echoz’s picture

Status: Needs work » Needs review
FileSize
80 KB
831 bytes

Below 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.

moshe weitzman’s picture

Status: Needs review » Reviewed & tested by the community

That works for me. Thanks echoz.

Status: Reviewed & tested by the community » Needs work
Issue tags: -Usability, -mobile, -Responsive Design, -d8mux, -d8mux-admin

The last submitted patch, password-field-narrow-1887558-5.patch, failed testing.

echoz’s picture

Status: Needs work » Needs review
Issue tags: +Usability, +mobile, +Responsive Design, +d8mux, +d8mux-admin
echoz’s picture

#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?

Shyamala’s picture

Status: Needs review » Needs work
FileSize
397.01 KB
418.92 KB

Attached 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.

echoz’s picture

Status: Needs work » Needs review

@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.

Shyamala’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
369.8 KB

RTBC, works well. Thanks @echoz

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to 8.x. Thanks.

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