sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Settings: Widen image size input fields on Media Settings page.

Browse Source 
On narrower devices, input fields are too short to fit the number of default digits they contain. This widens the fields and also breaks each height and width attribute onto a new line for better usability, using some terrible CSS trickery. My apologies.

Props: Toru, Presskopp, desrosj, xkon, ryelle, melchoyce.
Fixes #34539.


git-svn-id: https://develop.svn.wordpress.org/trunk@41836 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mel Choyce 2017-10-12 03:47:29 +00:00
parent b57742018a
commit cf7cba3194
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/wp-admin/css/common.css
View File

@ -3716,6 +3716,23 @@ 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. */

2
src/wp-admin/css/forms.css
View File

@ -1220,7 +1220,7 @@ table.form-table td .updated p {
input[type="number"].small-text,
.form-table input[type="text"].small-text {
width: auto;
max-width: 55px;
max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
display: inline;
padding: 3px 6px;
margin: 0 3px;

8
src/wp-admin/options-media.php
View File

@ -55,9 +55,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<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" /><br />
<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>
<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>
</tr>
@ -66,6 +66,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Medium size'); ?></span></legend>
<label for="medium_size_w"><?php _e('Max Width'); ?></label>
<input name="medium_size_w" type="number" step="1" min="0" id="medium_size_w" value="<?php form_option('medium_size_w'); ?>" class="small-text" />
<br />
<label for="medium_size_h"><?php _e('Max Height'); ?></label>
<input name="medium_size_h" type="number" step="1" min="0" id="medium_size_h" value="<?php form_option('medium_size_h'); ?>" class="small-text" />
</fieldset></td>
@ -76,6 +77,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
<td><fieldset><legend class="screen-reader-text"><span><?php _e('Large size'); ?></span></legend>
<label for="large_size_w"><?php _e('Max Width'); ?></label>
<input name="large_size_w" type="number" step="1" min="0" id="large_size_w" value="<?php form_option('large_size_w'); ?>" class="small-text" />
<br />
<label for="large_size_h"><?php _e('Max Height'); ?></label>
<input name="large_size_h" type="number" step="1" min="0" id="large_size_h" value="<?php form_option('large_size_h'); ?>" class="small-text" />
</fieldset></td>