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.
Fixes #42724. See #34539.

git-svn-id: https://develop.svn.wordpress.org/trunk@42864 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2018-03-20 22:43:58 +00:00
parent 3bb3d7a6c7
commit f9b33fb524
3 changed files with 14 additions and 21 deletions

View File

@ -3952,23 +3952,6 @@ img {
}
}
.options-media-php br {
display: none;
}
@media screen and (max-width: 375px) {
.options-media-php input[type="number"][name*="_size_"] {
margin: 5px 0;
}
.options-media-php label[for*="_size_h"]:before {
content: "";
display: block;
}
.options-media-php br {
display: block;
}
}
@media screen and (max-width: 320px) {
/* Prevent default center alignment and larger font for the Right Now widget when
the network dashboard is viewed on a small mobile device. */

View File

@ -438,7 +438,15 @@ fieldset label,
vertical-align: middle;
}
.options-media-php label[for*="_size_"],
.options-media-php [for*="_size_"] {
min-width: 10em;
vertical-align: baseline;
}
.options-media-php .small-text[name*="_size_"] {
margin: 0 0 1em;
}
#misc-publishing-actions label {
vertical-align: baseline;
}

View File

@ -54,13 +54,15 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<table class="form-table">
<tr>
<th scope="row"><?php _e( 'Thumbnail size' ); ?></th>
<td>
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Thumbnail size' ); ?></span></legend>
<label for="thumbnail_size_w"><?php _e( 'Width' ); ?></label>
<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" />
<br />
<label for="thumbnail_size_h"><?php _e( 'Height' ); ?></label>
<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" />
<p><input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked( '1', get_option( 'thumbnail_crop' ) ); ?>/>
<label for="thumbnail_crop"><?php _e( 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ); ?></label></p>
</fieldset>
<input name="thumbnail_crop" type="checkbox" id="thumbnail_crop" value="1" <?php checked( '1', get_option( 'thumbnail_crop' ) ); ?>/>
<label for="thumbnail_crop"><?php _e( 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' ); ?></label>
</td>
</tr>