WordPress.org

Make WordPress Core

Changeset 41672


Ignore:
Timestamp:
10/02/2017 05:33:10 PM (8 months ago)
Author:
westonruter
Message:

Customize: Improve styling of date/time Customizer control.

  • Let date legend be screen reader text when time is not included.
  • Skip rendering containers for label (title) and description when not supplied in registered control.
  • Fix margins and padding.

Amends [41670].
Props westonruter, afercia, sayedwp.
Fixes #42022.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r41670 r41672  
    271271}
    272272
    273 .date-time-fields {
    274     padding-top: 10px;
    275     padding-bottom:10px;
     273.customize-control-date_time .customize-control-description + .date-time-fields.includes-time {
     274    margin-top: 10px;
    276275}
    277276
     
    280279    float: left;
    281280    margin-right: 5px;
     281}
     282.customize-control.customize-control-date_time .date-time-fields .date-input.day {
     283    margin-right: 0;
    282284}
    283285
  • trunk/src/wp-includes/customize/class-wp-customize-date-time-control.php

    r41670 r41672  
    113113        <# var idPrefix = _.uniqueId( 'el' ) + '-'; #>
    114114
    115         <span class="customize-control-title">
    116             {{ data.label }}
    117         </span>
     115        <# if ( data.label ) { #>
     116            <span class="customize-control-title">
     117                {{ data.label }}
     118            </span>
     119        <# } #>
    118120        <div class="customize-control-notifications-container"></div>
    119         <span class="description customize-control-description">{{ data.description }}</span>
    120         <div class="date-time-fields">
     121        <# if ( data.description ) { #>
     122            <span class="description customize-control-description">{{ data.description }}</span>
     123        <# } #>
     124        <div class="date-time-fields {{ data.includeTime ? 'includes-time' : '' }}">
    121125            <fieldset class="day-row">
    122                 <legend class="title-day"><?php esc_html_e( 'Date' ); ?></legend>
     126                <legend class="title-day {{ ! data.includeTime ? 'screen-reader-text' : '' }}"><?php esc_html_e( 'Date' ); ?></legend>
    123127                <div class="day-fields clear">
    124128                    <label for="{{ idPrefix }}date-time-month" class="screen-reader-text"><?php esc_html_e( 'Month' ); ?></label>
Note: See TracChangeset for help on using the changeset viewer.