Skip to:
Content

BuddyPress.org

Changeset 10465


Ignore:
Timestamp:
01/25/2016 09:37:22 PM (5 years ago)
Author:
mercime
Message:

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.

Location:
trunk/src/bp-core/admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/admin/bp-core-admin-components.php

    r10433 r10465  
    161161    <h3 class="screen-reader-text"><?php _e( 'Components list', 'buddypress' ); ?></h3>
    162162
    163     <table class="widefat fixed plugins" cellspacing="0">
     163    <table class="wp-list-table widefat plugins">
    164164        <thead>
    165165            <tr>
    166                 <th scope="col" id="cb" class="manage-column column-cb check-column">&nbsp;</th>
    167                 <th scope="col" id="name" class="manage-column column-name" style="width: 190px;"><?php _e( 'Component', 'buddypress' ); ?></th>
     166                <td id="cb" class="manage-column column-cb check-column"><input id="cb-select-all-1" type="checkbox" disabled><label class="screen-reader-text" for="cb-select-all-1"><?php _e( 'Bulk selection is disabled', 'buddypress' ); ?></label></td>
     167                <th scope="col" id="name" class="manage-column column-title column-primary"><?php _e( 'Component', 'buddypress' ); ?></th>
    168168                <th scope="col" id="description" class="manage-column column-description"><?php _e( 'Description', 'buddypress' ); ?></th>
    169169            </tr>
    170170        </thead>
    171 
    172         <tfoot>
    173             <tr>
    174                 <th scope="col" class="manage-column column-cb check-column">&nbsp;</th>
    175                 <th scope="col" class="manage-column column-name" style="width: 190px;"><?php _e( 'Component', 'buddypress' ); ?></th>
    176                 <th scope="col" class="manage-column column-description"><?php _e( 'Description', 'buddypress' ); ?></th>
    177             </tr>
    178         </tfoot>
    179171
    180172        <tbody id="the-list">
     
    191183
    192184                    <tr id="<?php echo esc_attr( $name ); ?>" class="<?php echo esc_attr( $name ) . ' ' . esc_attr( $class ); ?>">
    193                         <th scope="row">
     185                        <th scope="row" class="check-column">
    194186
    195187                            <?php if ( !in_array( $name, array( 'core', 'members' ) ) ) : ?>
    196188
    197                                 <input type="checkbox" id="bp_components[<?php echo esc_attr( $name ); ?>]" name="bp_components[<?php echo esc_attr( $name ); ?>]" value="1"<?php checked( isset( $active_components[esc_attr( $name )] ) ); ?> />
     189                                <input type="checkbox" id="<?php echo esc_attr( "bp_components[$name]" ); ?>" name="<?php echo esc_attr( "bp_components[$name]" ); ?>" value="1"<?php checked( isset( $active_components[esc_attr( $name )] ) ); ?> /><label for="<?php echo esc_attr( "bp_components[$name]" ); ?>" class="screen-reader-text"><?php printf( __( 'Select %s', 'buddypress' ), esc_html( $labels['title'] ) ); ?></label>
     190
     191                            <?php else : ?>
     192
     193                                <input type="checkbox" id="<?php echo esc_attr( "bp_components[$name]" ); ?>" name="<?php echo esc_attr( "bp_components[$name]" ); ?>" value="1" checked="checked" disabled><label for="<?php echo esc_attr( "bp_components[$name]" ); ?>" class="screen-reader-text"><?php printf( __( '%s is a required component', 'buddypress' ), esc_html( $labels['title'] ) ); ?></label>
    198194
    199195                            <?php endif; ?>
    200196
    201197                        </th>
    202                         <td class="plugin-title" style="width: 190px;">
     198                        <td class="plugin-title column-primary">
    203199                            <span></span>
    204                             <label for="bp_components[<?php echo esc_attr( $name ); ?>]">
    205                                 <strong><?php echo esc_html( $labels['title'] ); ?></strong>
    206                             </label>
    207 
    208                             <div class="row-actions-visible">
    209 
    210                             </div>
     200                            <strong><?php echo esc_html( $labels['title'] ); ?></strong>
    211201                        </td>
    212202
     
    215205                                <p><?php echo $labels['description']; ?></p>
    216206                            </div>
    217                             <div class="active second plugin-version-author-uri">
    218 
    219                             </div>
     207
    220208                        </td>
    221209                    </tr>
     
    232220
    233221        </tbody>
     222
     223        <tfoot>
     224            <tr>
     225                <td class="manage-column column-cb check-column"><input id="cb-select-all-2" type="checkbox" disabled><label class="screen-reader-text" for="cb-select-all-2"><?php _e( 'Bulk selection is disabled', 'buddypress' ); ?></label></td>
     226                <th class="manage-column column-title column-primary"><?php _e( 'Component', 'buddypress' ); ?></th>
     227                <th class="manage-column column-description"><?php _e( 'Description', 'buddypress' ); ?></th>
     228            </tr>
     229        </tfoot>
     230
    234231    </table>
    235232
  • trunk/src/bp-core/admin/css/common-rtl.css

    r10318 r10465  
    127127/* Tools */
    128128#adminmenu .toplevel_page_network-tools div.wp-menu-image:before {
    129     content: "";
     129    content: "";
    130130}
    131131
     
    224224}
    225225
    226 #bp-admin-component-form .widefat th {
    227     display: table-cell;
    228     vertical-align: top;
    229 }
     226.settings_page_bp-components tr.core td.plugin-title span:before {
     227    content: "\f448";
     228}
     229
     230.settings_page_bp-components tr.members td.plugin-title span:before {
     231    content: "\f307";
     232}
     233
     234#bp-admin-component-form .wp-list-table.plugins .plugin-title {
     235    width: 25%;
     236}
     237
     238@media screen and ( max-width: 782px ) {
     239    .settings_page_bp-components td.plugin-title span {
     240        margin-top: 5px;
     241    }
     242    #bp-admin-component-form .wp-list-table.plugins .plugin-title {
     243        display: block;
     244        width: auto;
     245    }
     246    #bp-admin-component-form .subsubsub {
     247        margin-bottom: 0;
     248        padding-bottom: 35px;
     249    }
     250}
     251
    230252
    231253/* Version Badge */
  • trunk/src/bp-core/admin/css/common.css

    r10318 r10465  
    127127/* Tools */
    128128#adminmenu .toplevel_page_network-tools div.wp-menu-image:before {
    129     content: "";
     129    content: "";
    130130}
    131131
     
    224224}
    225225
    226 #bp-admin-component-form .widefat th {
    227     display: table-cell;
    228     vertical-align: top;
    229 }
     226.settings_page_bp-components tr.core td.plugin-title span:before {
     227    content: "\f448";
     228}
     229
     230.settings_page_bp-components tr.members td.plugin-title span:before {
     231    content: "\f307";
     232}
     233
     234#bp-admin-component-form .wp-list-table.plugins .plugin-title {
     235    width: 25%;
     236}
     237
     238@media screen and ( max-width: 782px ) {
     239    .settings_page_bp-components td.plugin-title span {
     240        margin-top: 5px;
     241    }
     242    #bp-admin-component-form .wp-list-table.plugins .plugin-title {
     243        display: block;
     244        width: auto;
     245    }
     246    #bp-admin-component-form .subsubsub {
     247        margin-bottom: 0;
     248        padding-bottom: 35px;
     249    }
     250}
     251
    230252
    231253/* Version Badge */
Note: See TracChangeset for help on using the changeset viewer.