WordPress.org

Make WordPress Core

Changeset 41836


Ignore:
Timestamp:
10/12/2017 03:47:29 AM (8 months ago)
Author:
melchoyce
Message:

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

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.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r41808 r41836  
    37173717}
    37183718
     3719.options-media-php br {
     3720    display: none;
     3721}
     3722
     3723@media screen and (max-width: 375px) {
     3724    .options-media-php input[type="number"][name*="_size_"] {
     3725        margin: 5px 0;
     3726    }
     3727    .options-media-php label[for*="_size_h"]:before {
     3728        content: '';
     3729        display: block;
     3730    }
     3731    .options-media-php br {
     3732        display: block;
     3733    }
     3734}
     3735
    37193736@media screen and (max-width: 320px) {
    37203737    /* Prevent default center alignment and larger font for the Right Now widget when
  • trunk/src/wp-admin/css/forms.css

    r41182 r41836  
    12211221    .form-table input[type="text"].small-text {
    12221222        width: auto;
    1223         max-width: 55px;
     1223        max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
    12241224        display: inline;
    12251225        padding: 3px 6px;
  • trunk/src/wp-admin/options-media.php

    r40823 r41836  
    5656<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" />
    5757<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" /><br />
    59 <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>
     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>
    6161</td>
    6262</tr>
     
    6767<label for="medium_size_w"><?php _e('Max Width'); ?></label>
    6868<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" />
     69<br />
    6970<label for="medium_size_h"><?php _e('Max Height'); ?></label>
    7071<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" />
     
    7778<label for="large_size_w"><?php _e('Max Width'); ?></label>
    7879<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" />
     80<br />
    7981<label for="large_size_h"><?php _e('Max Height'); ?></label>
    8082<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" />
Note: See TracChangeset for help on using the changeset viewer.