Improve mobile view of the BuddyPress Components panel

[mercime]

Will be attaching an image which shows the current mobile view of the Components panel and what we're going for in the first pass to improve the layout. To do: add some list table classes, remove some hard-coded styles, and adjust style as needed per check with WP 3.8.

[DJPaul]

Absolutely. Nice spot.

[mercime]

First pass at improving the mobile view of the Components screen. The attached patch:

• Uses WP_List_Table responsive goodness
• Removes inline styles
• Removes unused table markup
• Moves the label tags into the same table cells of the associated input fields
• Adds checked/disabled checkbox input fields
• Adds dashicons back to the Core and Member components
• Adds style support to improve the new look

Also attached are the before and after screenshots of the desktop and mobile views.

[DJPaul]

Looks fantastic! Patch is also great, there is one small improvement you could make here:

<label for="bp_components[<?php echo esc_attr( $name ); ?>]" class="screen-reader-text"

To

<label for="<?php echo esc_attr( "bp_components[$name]" ); ?>" class="screen-reader-text"

It's slightly easier to read if the entire property is being escaped, rather than just the dynamic part.

[mercime]

Thank you @DJPaul :) Changed all instances per your advice. Will commit in a few minutes.

[mercime]

In 10465:

Improve mobile view of the Settings > Components panel.

• Use WP_List_Table responsive goodness.
• Move label tags into the same table cells of the associated input fields.
• Remove inline styles.
• Remove unused table markup.
• Add checked/disabled checkbox input fields.
• Add dashicons back to the Core and Member components.
• Add style support to improve the new look.

Props @DJPaul.
Fixes #6803.