Fix Layout in wp-admin User > Extended Profile screen

[mercime]

Markup improvements in #6678 for the front end - notably using fieldsets for checkbox, datebox, and radio buttons fields - has affected the styles in our w-admin User > Extended Profiles screen in the back end.

In addition, the datebox, the screen reader labels for date, month, and year are showing up because class="bp-screen-reader-text" is hardcoded in in class-bp-xprofile-field-type-datebox.php

To do:

1. Add style support for the new legend element in the Extended Profiles screen.
2. Add is_admin() conditional inside the class attribute to render screen-reader-text value for WP admin screen and render bp-screen-reader-text for the front-end Profile screen.

Patch and screenshots coming up.

[mercime]

Screen before patch

[mercime]

Screen after patch

[johnjamesjacoby]

This is great. Thanks for being on top of this.

How does this look for older versions of WordPress once we have the newer markup & styling support?

[mercime]

@johnjamesjacoby :) I applied the patch to test install - BP Trunk / WP 4.0.11 - and layout is fixed there as well. I need to increase the spacing between the "clear" link below the radio input fields and will upload revised patch for that in a little while.

Also just noticed that I will need to improve styles for this screen's mobile view, yikes. Will create a new ticket for this.

[mercime]

Screenshot BP Trunk - WP 4.0.11

[johnjamesjacoby]

Also just noticed that I will need to improve styles for this screen's mobile view, yikes

Mobile UI/UX on this page has never been great, so we are okay to make incremental improvements here.

Keep up the great work!

[mercime]

In 10798:

xProfiles A11y: Use correct value for screen reader class.

Generate "bp-screen-reader-text" for the front-end xProfile screens
and "screen-reader-text" in and wp-admin xProfile screens.

See #7080.

[mercime]

In 10799:

xProfiles: Fix layouts of checkbox, datebox, radio fieldsets in wp-admin.

Provide style support in wp-admin > User > Extended Profile screen
after the introduction of fieldset wrappers for the xProfile field
types mentioned above in #6678.

Fixes #7080.

[dcavins]

In 10856:

Xprofile: Fix layout issues with input types in wp-admin.

Align input fields on the extended profile
pane of a user’s profile in wp-admin.

See #7080.

Props mercime, dcavins.