WordPress.org

Make WordPress Core

Ticket #16434: 16434-responsive.patch

File 16434-responsive.patch, 3.2 KB (added by tyxla, 21 months 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                }