Ticket #16434: 16434-responsive.patch

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

@@ -17 +17 @@
         max-width: 720px;
 }
 
+.site-icon-crop-wrapper {
+        float: left;
+}
+
 .site-icon-crop-preview-shell {
         float: right;
         overflow: hidden;
@@ -56 +60 @@
         overflow: hidden;
         width: 64px;
 } 
+
+@media only screen and (max-width: 768px) {
+        .site-icon-crop-wrapper,
+        .site-icon-crop-preview-shell {
+                float: none;
+        }
+
+        .site-icon-crop-wrapper {
+                max-width: 100%;
+                margin-bottom: 20px;
+        }
+
+        .site-icon-crop-wrapper img {
+                max-width: 100%;
+                height: auto;
+        }
+}

src/wp-admin/includes/class-wp-site-icon.php

@@ -267 +267 @@
                                         <p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
                                         <p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
 
+                                        <div class="site-icon-crop-wrapper">
+                                                <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' ); ?>"/>
+                                        </div>
+
                                         <div class="site-icon-crop-preview-shell hide-if-no-js">
                                                 <h3><?php _e( 'Preview' ); ?></h3>
                                                 <strong><?php _e( 'As your favicon' ); ?></strong>
@@ -284 +288 @@
                                                         <img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
                                                 </div>
                                         </div>
-                                        <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' ); ?>"/>
+                                        <div class="clear"></div>
 
                                         <input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" />
                                         <input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" />

src/wp-admin/js/site-icon-crop.js

@@ -37 +37 @@
                 },
 
                 ready: function() {
+                        $cropImage = $( '#crop-image' );
                         jcrop_api = $.Jcrop( '#crop-image' );
                         jcrop_api.setOptions({
                                 bgColor: 'transparent',
@@ -43 +44 @@
                                 aspectRatio: 1,
                                 onSelect: siteIconCrop.updateCoords,
                                 onChange: siteIconCrop.updateCoords,
-                                minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
+                                minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ],
+                                trueSize: [ $cropImage.attr( 'width' ), $cropImage.attr( 'height' ) ]
                         });
                         jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);
                 }