Changeset 42865

Timestamp:

03/20/2018 10:48:42 PM (6 years 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:

• . (modified) (1 prop)
• src/wp-admin/css/common.css (modified) (1 diff)
• src/wp-admin/css/forms.css (modified) (1 diff)
• src/wp-admin/options-media.php (modified) (1 diff)

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

@@ -3944 +3944 @@
 }
 
-.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

branches/4.9/src/wp-admin/css/forms.css

@@ -439 +439 @@
 }
 
-.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;

branches/4.9/src/wp-admin/options-media.php

@@ -52 +52 @@
 <tr>
 <th scope="row"><?php _e('Thumbnail size') ?></th>
-<td>
-<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" />
-<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>
+<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" />
+</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>