Skip to:
Content

BuddyPress.org

Changeset 11061


Ignore:
Timestamp:
09/06/2016 03:10:36 AM (7 years ago)
Author:
boonebgorges
Message:

XProfile: Improvements to markup for Date settings panel.

  • Improved appearance at narrow widths.
  • Add missing labels and aria attributes.

Props mercime.
See #5500.

Location:
trunk/src/bp-xprofile
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-xprofile/admin/css/admin-rtl.css

    r10030 r11061  
    285285    visibility: hidden;
    286286}
     287
     288/* xProfile Field Type - Date */
     289
     290.form-table.bp-date-options {
     291    margin: 0 8px;
     292}
     293
     294.form-table.bp-date-options th {
     295    width: 150px;
     296}
     297
     298.form-table td .date-format-section select {
     299    margin-top: -2px;
     300}
     301
     302.date-format-label {
     303    display: inline-block;
     304    width: 150px;
     305}
     306
     307.date-format-custom-value,
     308.date-range-numeric {
     309    width: 56px;
     310}
     311
     312.bp-date-range-type-label {
     313    float: right;
     314    font-style: italic;
     315    width: 80px;
     316}
     317
     318.bp-date-range-type-values {
     319    margin-left: 25px;
     320    padding-right: 100px;
     321}
     322
     323@media screen and (max-width: 782px) {
     324    .bp-date-formats .bp-date-format-option:first-of-type {
     325        margin-top: 1em;
     326    }
     327    .bp-range-types .bp-date-format-option {
     328        margin-bottom: 1em;
     329        margin-top: 1em;
     330    }
     331    .form-table td input.date-format-custom-value,
     332    .form-table td input.date-range-numeric {
     333        display: inline-block;
     334        margin-left: 10px;
     335        width: 56px;
     336    }
     337    .form-table td .bp-date-range-type-values select {
     338        display: inline-block;
     339        width: auto;
     340    }
     341    .bp-date-range-type-label {
     342        float: none;
     343        width: auto;
     344    }
     345    .bp-date-range-type-values {
     346        padding-right: 0;
     347        margin-right: 35px;
     348    }
     349}
     350
     351@media screen and (max-width: 480px) {
     352    .form-table .bp-range-types label {
     353        clear: both;
     354        display: block;
     355    }
     356}

  • trunk/src/bp-xprofile/admin/css/admin.css

    r11041 r11061  
    286286}
    287287
     288/* xProfile Field Type - Date */
     289
    288290.form-table.bp-date-options {
    289291    margin: 0 8px;
    … …  
    292294.form-table.bp-date-options th {
    293295    width: 150px;
     296}
     297
     298.form-table td .date-format-section select {
     299    margin-top: -2px;
    294300}
    295301
    … …  
    303309    width: 56px;
    304310}
     311
     312.bp-date-range-type-label {
     313    float: left;
     314    font-style: italic;
     315    width: 80px;
     316}
     317
     318.bp-date-range-type-values {
     319    margin-right: 25px;
     320    padding-left: 100px;
     321}
     322
     323@media screen and (max-width: 782px) {
     324    .bp-date-formats .bp-date-format-option:first-of-type {
     325        margin-top: 1em;
     326    }
     327    .bp-range-types .bp-date-format-option {
     328        margin-bottom: 1em;
     329        margin-top: 1em;
     330    }
     331    .form-table td input.date-format-custom-value,
     332    .form-table td input.date-range-numeric {
     333        display: inline-block;
     334        margin-right: 10px;
     335        width: 56px;
     336    }
     337    .form-table td .bp-date-range-type-values select {
     338        display: inline-block;
     339        width: auto;
     340    }
     341    .bp-date-range-type-label {
     342        float: none;
     343        width: auto;
     344    }
     345    .bp-date-range-type-values {
     346        padding-left: 0;
     347        margin-left: 35px;
     348    }
     349}
     350
     351@media screen and (max-width: 480px) {
     352    .form-table .bp-range-types label {
     353        clear: both;
     354        display: block;
     355    }
     356}

  • trunk/src/bp-xprofile/classes/class-bp-xprofile-field-type-datebox.php

    r11043 r11061  
    483483                    <div class="bp-date-format-option">
    484484                        <label for="date-format-elapsed">
    485                             <input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" />
    486                             <span class="date-format-label"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
     485                            <input type="radio" name="field_settings[date_format]" id="date-format-elapsed" <?php checked( 'elapsed', $settings['date_format'] ); ?> value="elapsed" aria-describedby="date-format-elapsed-setting" />
     486                            <span class="date-format-label" id="date-format-elapsed-setting"><?php esc_html_e( 'Time elapsed', 'buddypress' ); ?></span> <?php _e( '<code>4 years ago</code>, <code>4 years from now</code>', 'buddypress' ); ?>
    487487                        </label>
    488488                    </div>
    … …  
    492492                            <input type="radio" name="field_settings[date_format]" id="date-format-custom" <?php checked( 'custom', $settings['date_format'] ); ?> value="custom" />
    493493                            <span class="date-format-label"><?php esc_html_e( 'Custom:', 'buddypress' ); ?></span>
    494                             <input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner"></span>
    495494                        </label>
     495                        <label for="date-format-custom-value" class="screen-reader-text"><?php esc_html_e( 'Enter custom time format', 'buddypress' ); ?></label>
     496                        <input type="text" name="field_settings[date_format_custom]" id="date-format-custom-value" class="date-format-custom-value" value="<?php echo esc_attr( $settings['date_format_custom'] ); ?>" aria-describedby="date-format-custom-value-info" /> <span class="screen-reader-text"><?php esc_html_e( 'Example:', 'buddypress' ); ?></span><span class="date-format-custom-sample" id="date-format-custom-sample"><?php if ( $settings['date_format_custom'] ) : ?><?php echo esc_html( date( $settings['date_format_custom'] ) ); endif; ?></span><span class="spinner" id="date-format-custom-spinner" aria-hidden="true"></span>
     497
     498                        <p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
    496499                    </div>
     500
    497501                </fieldset>
    498 
    499                 <p><a href="https://codex.wordpress.org/Formatting_Date_and_Time"><?php esc_html_e( 'Documentation on date and time formatting', 'buddypress' ); ?></a></p>
    500502            </td>
    501503        </tr>
    … …  
    507509
    508510            <td>
    509                 <fieldset>
     511                <fieldset class="bp-range-types">
    510512                    <legend class="screen-reader-text">
    511513                        <?php esc_html_e( 'Range', 'buddypress' ); ?>
    … …  
    513515
    514516                    <div class="bp-date-format-option">
    515                         <label>
    516                             <input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
    517 
    518                             <?php
    519                             printf(
    520                                 /* translators: 1: Start year for date range, 2: End year for date range */
    521                                 __( 'From %1$s to %2$s', 'buddypress' ),
    522                                 sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ),
    523                                 sprintf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) )
    524                             );
     517                        <div class="bp-date-range-type-label">
     518                            <label for="range_type_absolute">
     519                                <input type="radio" name="field_settings[range_type]" id="range_type_absolute" value="absolute" <?php checked( 'absolute', $settings['range_type'] ); ?> />
     520                                <?php esc_html_e( 'Absolute', 'buddypress' ); ?>
     521                            </label>
     522                        </div>
     523
     524                        <div class="bp-date-range-type-values">
     525                            <label for="field_settings[range_absolute_start]" aria-label="Year"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
     526                            <?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_start]" id="field_settings[range_absolute_start]" value="%s" />', esc_attr( $settings['range_absolute_start'] ) ); ?>
     527                            <label for="field_settings[range_absolute_end]" aria-label="Year"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
     528                            <?php printf( '<input class="date-range-numeric" type="text" name="field_settings[range_absolute_end]" id="field_settings[range_absolute_end]" value="%s" />', esc_attr( $settings['range_absolute_end'] ) ); ?>
     529                        </div>
     530                    </div>
     531
     532                    <div class="bp-date-format-option">
     533                        <div class="bp-date-range-type-label">
     534                            <label for="range_type_relative">
     535                                <input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
     536                                <?php esc_html_e( 'Relative', 'buddypress' ); ?>
     537                            </label>
     538                        </div>
     539
     540                        <div class="bp-date-range-type-values">
     541                            <label for="field_settings[range_relative_start]"><?php esc_html_e( 'Start:', 'buddypress' ); ?></label>
     542                            <?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" id="field_settings[range_relative_start]" value="%s" />',
     543                                esc_attr( abs( $settings['range_relative_start'] ) )
     544                                );
    525545                            ?>
    526                         </label>
    527                     </div>
    528 
    529                     <div class="bp-date-format-option">
    530                         <label>
    531                             <input type="radio" name="field_settings[range_type]" id="range_type_relative" value="relative" <?php checked( 'relative', $settings['range_type'] ); ?> />
    532 
    533                             <?php
    534                             printf(
    535                                 /* translators: 1: "From" year count for date range, 2: "To" year count for date range */
    536                                 __( 'From %1$s to %2$s', 'buddypress' ),
    537                                 sprintf(
    538                                     '<input type="text" class="date-range-numeric" name="field_settings[range_relative_start]" value="%s" /> <select name="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    539                                     esc_attr( abs( $settings['range_relative_start'] ) ),
    540                                     selected( true, $settings['range_relative_start'] <= 0, false ),
    541                                     esc_attr__( 'years ago', 'buddypress' ),
    542                                     selected( true, $settings['range_relative_start'] > 0, false ),
    543                                     esc_attr__( 'years from now', 'buddypress' )
    544                                 ),
    545                                 sprintf(
    546                                     '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" value="%s" /> <select name="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    547                                     esc_attr( abs( $settings['range_relative_end'] ) ),
     546
     547                            <label class="screen-reader-text" for="field_settings[range_relative_start_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
     548                            <?php printf( '<select name="field_settings[range_relative_start_type]" id="field_settings[range_relative_start_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
     549                                selected( true, $settings['range_relative_start'] <= 0, false ),
     550                                esc_attr__( 'years ago', 'buddypress' ),
     551                                selected( true, $settings['range_relative_start'] > 0, false ),
     552                                esc_attr__( 'years from now', 'buddypress' )
     553                                );
     554                            ?>
     555
     556                            <label for="field_settings[range_relative_end]"><?php esc_html_e( 'End:', 'buddypress' ); ?></label>
     557                            <?php printf( '<input type="text" class="date-range-numeric" name="field_settings[range_relative_end]" id="field_settings[range_relative_end]" value="%s" />',
     558                                esc_attr( abs( $settings['range_relative_end'] ) )
     559                                );
     560                            ?>
     561                            <label class="screen-reader-text" for="field_settings[range_relative_end_type]"><?php esc_html_e( 'Select range', 'buddypress' ); ?></label>
     562                            <?php printf( '<select name="field_settings[range_relative_end_type]" id="field_settings[range_relative_end_type]"><option value="past" %s>%s</option><option value="future" %s>%s</option></select>',
    548563                                    selected( true, $settings['range_relative_end'] <= 0, false ),
    549564                                    esc_attr__( 'years ago', 'buddypress' ),
    550565                                    selected( true, $settings['range_relative_end'] > 0, false ),
    551566                                    esc_attr__( 'years from now', 'buddypress' )
    552                                 )
    553                             );
     567                                );
    554568                            ?>
    555                         </label>
     569                        </div>
    556570                    </div>
     571
    557572                </fieldset>
    558573            </td>
Note: See TracChangeset for help on using the changeset viewer.