Changeset 36907

Timestamp:

03/09/2016 09:18:53 PM (9 years ago)

Author:

obenland

Message:

Customize: Reduce vertical space of site icon control.

Makes the control easier to find, reduces visual clutter, and is more
consistent with Customizer UI conventions.

Props celloexpressions.
Fixes #35943.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-admin/css/site-icon.css (modified) (2 diffs)
• wp-includes/customize/class-wp-customize-site-icon-control.php (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -957 +957 @@
 .customize-control-background img,
 .customize-control-cropped_image img,
-.customize-control-site_icon img,
 .customize-control-header img {
     width: 100%;

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

@@ -25 +25 @@
 .site-icon-preview .browser-title {
     left: 109px;
+    width: 72px;
+    white-space: nowrap;
 }
 
@@ -36 +38 @@
     margin-top: 5px;
 }
+
+.customize-control-site_icon .favicon-preview {
+    float: left;
+    margin-right: 12px;
+    margin-bottom: 0;
+}
+
+.customize-control-site_icon .app-icon-preview {
+    margin-top: 9px;
+}

trunk/src/wp-includes/customize/class-wp-customize-site-icon-control.php

@@ -62 +62 @@
         <div class="current">
             <div class="container">
-                <div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }} site-icon-preview">
-                    <strong><?php _e( 'As a browser icon' ); ?></strong>
+                <div class="site-icon-preview">
                     <div class="favicon-preview">
-                        <img src="images/browser.png" class="browser-preview" width="182" height="" alt="" />
+                        <img src="images/browser.png" class="browser-preview" width="182" alt="<?php esc_attr_e( 'Browser interface preview' ); ?>" />
 
                         <div class="favicon">
@@ -72 +71 @@
                         <span class="browser-title"><?php bloginfo( 'name' ); ?></span>
                     </div>
-
-                    <strong><?php _e( 'As an app icon' ); ?></strong>
-                    <p class="app-icon-preview">
-                        <img id="preview-app-icon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
-                    </p>
+                    <img class="app-icon-preview" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
                 </div>
             </div>