Skip to:
Content

BuddyPress.org

Changeset 11620


Ignore:
Timestamp:
06/24/2017 02:09:40 AM (7 years ago)
Author:
mercime
Message:

xProfile: Update markup and styles for User > Extended Profiles.

After accessibility upgrades for the Profile > Edit screen in #7348, we need to
update the wp-admin Extended Profiles screen as well.

Fixes #7439.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-members/admin/css/admin-rtl.css

    r11587 r11620  
    118118}
    119119
    120 .bp-profile-field > label {  /* label takes on left side 200px */
    121     display: inline-block;
    122     font-weight: 600;
    123     text-align: right;
    124     vertical-align: middle;
    125     width: 200px;
    126 }
    127 
    128 .field_type_textarea > label,
    129 .field_type_multiselectbox > label,
    130 .field_type_radio .radio > label,
    131 .field_type_checkbox .checkbox > label {  /* these fields are usually pretty tall, so align the label for better consistency */
     120.field_type_textarea legend,
     121.field_type_multiselectbox legend,
     122.field_type_radio .radio legend,
     123.field_type_checkbox .checkbox legend {  /* these fields are usually pretty tall, so align the label for better consistency */
    132124    vertical-align: top;
    133125}
     
    138130}
    139131
     132.bp-profile-field .wp-editor-wrap {
     133    margin-right: 200px;
     134}
     135
     136.field_type_checkbox .description,
     137.field_type_datebox .description,
     138.field_type_radio .description {
     139    margin-top: 0;
     140}
     141
    140142.clear-value {  /* 'clear value' option also sits in the right side column */
    141143    display: block;
     
    144146}
    145147
    146 .field_type_checkbox .checkbox > label + label {  /* force checkboxes to new lines, in the right side column */
    147     display: block;
     148/* force checkboxes to new lines, in the right side column */
     149.field_type_checkbox label,
     150.field_type_radio label {
     151    display: block;
     152    margin-bottom: 1em;
    148153    margin-right: 200px;
    149154    width: auto;
     155}
     156
     157.field_type_datebox select:nth-of-type(1) {
     158    margin-right: 200px;
    150159}
    151160
     
    181190}
    182191
     192.field-visibility-settings label {
     193    clear: right;
     194    display: block;
     195    margin-bottom: 1em;
     196}
     197
    183198#normal-sortables .field-visibility-settings legend {  /* id required for css selector weight */
    184199    font-size: 14px;
     
    186201}
    187202
    188 #your-profile .bp-profile-field .checkbox legend,
    189 #your-profile .bp-profile-field .datebox legend,
    190 #your-profile .bp-profile-field .radio legend {
     203#your-profile .bp-profile-field legend {
    191204    float: right; /* Firefox will not apply display: inline-block to legends */
    192205    font-size: 14px;
    193206    font-weight: 600;
    194207    line-height: 1.4;
     208    margin-bottom: 1em;
    195209    text-align: right;
    196210    vertical-align: middle;
    197211    width: 192px;
    198 }
    199 
    200 #your-profile .bp-profile-field .radio legend,
    201 #your-profile .bp-profile-field .checkbox legend {
    202     margin-bottom: 20px;
    203212}
    204213
  • trunk/src/bp-members/admin/css/admin.css

    r11587 r11620  
    118118}
    119119
    120 .bp-profile-field > label {  /* label takes on left side 200px */
    121     display: inline-block;
    122     font-weight: 600;
    123     text-align: left;
    124     vertical-align: middle;
    125     width: 200px;
    126 }
    127 
    128 .field_type_textarea > label,
    129 .field_type_multiselectbox > label,
    130 .field_type_radio .radio > label,
    131 .field_type_checkbox .checkbox > label {  /* these fields are usually pretty tall, so align the label for better consistency */
     120.field_type_textarea legend,
     121.field_type_multiselectbox legend,
     122.field_type_radio .radio legend,
     123.field_type_checkbox .checkbox legend {  /* these fields are usually pretty tall, so align the label for better consistency */
    132124    vertical-align: top;
    133125}
     
    138130}
    139131
     132.bp-profile-field .wp-editor-wrap {
     133    margin-left: 200px;
     134}
     135
     136.field_type_checkbox .description,
     137.field_type_datebox .description,
     138.field_type_radio .description {
     139    margin-top: 0;
     140}
     141
    140142.clear-value {  /* 'clear value' option also sits in the right side column */
    141143    display: block;
     
    144146}
    145147
    146 .field_type_checkbox .checkbox > label + label {  /* force checkboxes to new lines, in the right side column */
    147     display: block;
     148/* force checkboxes to new lines, in the right side column */
     149.field_type_checkbox label,
     150.field_type_radio label {
     151    display: block;
     152    margin-bottom: 1em;
    148153    margin-left: 200px;
    149154    width: auto;
     155}
     156
     157.field_type_datebox select:nth-of-type(1) {
     158    margin-left: 200px;
    150159}
    151160
     
    181190}
    182191
     192.field-visibility-settings label {
     193    clear: left;
     194    display: block;
     195    margin-bottom: 1em;
     196}
     197
    183198#normal-sortables .field-visibility-settings legend {  /* id required for css selector weight */
    184199    font-size: 14px;
     
    186201}
    187202
    188 #your-profile .bp-profile-field .checkbox legend,
    189 #your-profile .bp-profile-field .datebox legend,
    190 #your-profile .bp-profile-field .radio legend {
     203#your-profile .bp-profile-field legend {
    191204    float: left; /* Firefox will not apply display: inline-block to legends */
    192205    font-size: 14px;
    193206    font-weight: 600;
    194207    line-height: 1.4;
     208    margin-bottom: 1em;
    195209    text-align: left;
    196210    vertical-align: middle;
    197211    width: 192px;
    198 }
    199 
    200 #your-profile .bp-profile-field .radio legend,
    201 #your-profile .bp-profile-field .checkbox legend {
    202     margin-bottom: 20px;
    203212}
    204213
  • trunk/src/bp-members/admin/js/admin.js

    r10149 r11620  
    77        event.preventDefault();
    88
    9         $( this ).parent().hide()
     9        $( this ).attr( 'aria-expanded', 'true' ).parent().hide()
    1010            .siblings( '.field-visibility-settings' ).show();
    1111    } );
     
    1313    $( '.field-visibility-settings-close' ).on( 'click', function( event ) {
    1414        event.preventDefault();
     15
     16         $( '.visibility-toggle-link' ).attr( 'aria-expanded', 'false' );
    1517
    1618        var settings_div = $(this).parent(),
  • trunk/src/bp-xprofile/classes/class-bp-xprofile-user-admin.php

    r11447 r11620  
    358358
    359359                <div<?php bp_field_css_class( 'bp-profile-field' ); ?>>
     360                    <fieldset>
    360361
    361362                    <?php
     
    363364                    $field_type = bp_xprofile_create_field_type( bp_get_the_profile_field_type() );
    364365                    $field_type->edit_field_html( array( 'user_id' => $r['user_id'] ) );
    365 
    366                     if ( bp_get_the_profile_field_description() ) : ?>
    367 
    368                         <p class="description"><?php bp_the_profile_field_description(); ?></p>
    369 
    370                     <?php endif;
    371366
    372367                    /**
     
    379374                    $can_change_visibility = bp_current_user_can( 'bp_xprofile_change_field_visibility' ); ?>
    380375
    381                     <p class="field-visibility-settings-<?php echo $can_change_visibility ? 'toggle' : 'notoggle'; ?>" id="field-visibility-settings-toggle-<?php bp_the_profile_field_id(); ?>">
     376                    <p class="field-visibility-settings-<?php echo $can_change_visibility ? 'toggle' : 'notoggle'; ?>" id="field-visibility-settings-toggle-<?php bp_the_profile_field_id(); ?>"><span id="<?php bp_the_profile_field_input_name(); ?>-2">
    382377
    383378                        <?php
     
    387382                        );
    388383                        ?>
     384                        </span>
    389385
    390386                        <?php if ( $can_change_visibility ) : ?>
    391387
    392                             <button type="button" class="button visibility-toggle-link"><?php esc_html_e( 'Change', 'buddypress' ); ?></button>
     388                            <button type="button" class="button visibility-toggle-link" aria-describedby="<?php bp_the_profile_field_input_name(); ?>-2" aria-expanded="false"><?php esc_html_e( 'Change', 'buddypress' ); ?></button>
    393389
    394390                        <?php endif; ?>
     
    418414                    do_action( 'bp_custom_profile_edit_fields' ); ?>
    419415
     416                    </fieldset>
    420417                </div>
    421418
Note: See TracChangeset for help on using the changeset viewer.