WordPress.org

Make WordPress Core

Changeset 42865


Ignore:
Timestamp:
03/20/2018 10:48:42 PM (2 months ago)
Author:
SergeyBiryukov
Message:

Media: On Media Settings screen, make the pairs of labels and inputs always stacked vertically, on both mobile and desktop screens.

Make <br /> tags on the screen behave as line breaks again after [41836]. Add a missing fieldset + legend for better accessibility.

Props afercia, RavanH, obenland, garrett-eclipse.
Merges [42864] to the 4.9 branch.
Fixes #42724. See #34539.

Location:
branches/4.9
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/4.9

  • branches/4.9/src/wp-admin/css/common.css

    r42448 r42865  
    39443944}
    39453945
    3946 .options-media-php br {
    3947     display: none;
    3948 }
    3949 
    3950 @media screen and (max-width: 375px) {
    3951     .options-media-php input[type="number"][name*="_size_"] {
    3952         margin: 5px 0;
    3953     }
    3954     .options-media-php label[for*="_size_h"]:before {
    3955         content: '';
    3956         display: block;
    3957     }
    3958     .options-media-php br {
    3959         display: block;
    3960     }
    3961 }
    3962 
    39633946@media screen and (max-width: 320px) {
    39643947    /* Prevent default center alignment and larger font for the Right Now widget when
  • branches/4.9/src/wp-admin/css/forms.css

    r42135 r42865  
    439439}
    440440
    441 .options-media-php label[for*="_size_"],
     441.options-media-php [for*="_size_"] {
     442    min-width: 10em;
     443    vertical-align: baseline;
     444}
     445
     446.options-media-php .small-text[name*="_size_"] {
     447    margin: 0 0 1em;
     448}
     449
    442450#misc-publishing-actions label {
    443451    vertical-align: baseline;
  • branches/4.9/src/wp-admin/options-media.php

    r41836 r42865  
    5252<tr>
    5353<th scope="row"><?php _e('Thumbnail size') ?></th>
    54 <td>
    55 <label for="thumbnail_size_w"><?php _e('Width'); ?></label>
    56 <input name="thumbnail_size_w" type="number" step="1" min="0" id="thumbnail_size_w" value="<?php form_option('thumbnail_size_w'); ?>" class="small-text" />
    57 <label for="thumbnail_size_h"><?php _e('Height'); ?></label>
    58 <input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option('thumbnail_size_h'); ?>" class="small-text" />
    59 <p><input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked('1', get_option('thumbnail_crop')); ?>/>
    60 <label for="thumbnail_crop"><?php _e('Crop thumbnail to exact dimensions (normally thumbnails are proportional)'); ?></label></p>
     54<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Thumbnail size' ); ?></span></legend>
     55<label for="thumbnail_size_w"><?php _e( 'Width' ); ?></label>
     56<input name="thumbnail_size_w" type="number" step="1" min="0" id="thumbnail_size_w" value="<?php form_option( 'thumbnail_size_w' ); ?>" class="small-text" />
     57<br />
     58<label for="thumbnail_size_h"><?php _e( 'Height' ); ?></label>
     59<input name="thumbnail_size_h" type="number" step="1" min="0" id="thumbnail_size_h" value="<?php form_option( 'thumbnail_size_h' ); ?>" class="small-text" />
     60</fieldset>
     61<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked( '1', get_option( 'thumbnail_crop' ) ); ?>/>
     62<label for="thumbnail_crop"><?php _e( 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ); ?></label>
    6163</td>
    6264</tr>
Note: See TracChangeset for help on using the changeset viewer.