WordPress.org

Make WordPress Core

Ticket #16434: 16434-responsive.patch

File 16434-responsive.patch, 3.2 KB (added by tyxla, 3 years ago)

Responsive improvements for the Site Icon, making the feature more friendly for mobile devices with smaller screen size.

  • src/wp-admin/css/site-icon.css

     
    1717        max-width: 720px;
    1818}
    1919
     20.site-icon-crop-wrapper {
     21        float: left;
     22}
     23
    2024.site-icon-crop-preview-shell {
    2125        float: right;
    2226        overflow: hidden;
     
    5660        overflow: hidden;
    5761        width: 64px;
    5862}
     63
     64@media only screen and (max-width: 768px) {
     65        .site-icon-crop-wrapper,
     66        .site-icon-crop-preview-shell {
     67                float: none;
     68        }
     69
     70        .site-icon-crop-wrapper {
     71                max-width: 100%;
     72                margin-bottom: 20px;
     73        }
     74
     75        .site-icon-crop-wrapper img {
     76                max-width: 100%;
     77                height: auto;
     78        }
     79}
  • src/wp-admin/includes/class-wp-site-icon.php

     
    267267                                        <p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
    268268                                        <p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
    269269
     270                                        <div class="site-icon-crop-wrapper">
     271                                                <img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="<?php echo esc_attr( $cropped_size[0] ); ?>" height="<?php echo esc_attr( $cropped_size[1] ); ?>" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
     272                                        </div>
     273
    270274                                        <div class="site-icon-crop-preview-shell hide-if-no-js">
    271275                                                <h3><?php _e( 'Preview' ); ?></h3>
    272276                                                <strong><?php _e( 'As your favicon' ); ?></strong>
     
    284288                                                        <img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
    285289                                                </div>
    286290                                        </div>
    287                                         <img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="<?php echo esc_attr( $cropped_size[0] ); ?>" height="<?php echo esc_attr( $cropped_size[1] ); ?>" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/>
     291                                        <div class="clear"></div>
    288292
    289293                                        <input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" />
    290294                                        <input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" />
  • src/wp-admin/js/site-icon-crop.js

     
    3737                },
    3838
    3939                ready: function() {
     40                        $cropImage = $( '#crop-image' );
    4041                        jcrop_api = $.Jcrop( '#crop-image' );
    4142                        jcrop_api.setOptions({
    4243                                bgColor: 'transparent',
     
    4344                                aspectRatio: 1,
    4445                                onSelect: siteIconCrop.updateCoords,
    4546                                onChange: siteIconCrop.updateCoords,
    46                                 minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
     47                                minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ],
     48                                trueSize: [ $cropImage.attr( 'width' ), $cropImage.attr( 'height' ) ]
    4749                        });
    4850                        jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);
    4951                }