From 326806a961500c53a3980f02e2567304a0451b0a Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@git.wordpress.org>
Date: Wed, 9 Mar 2016 21:18:53 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@36907 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css              |  1 -
 src/wp-admin/css/site-icon.css                       | 12 ++++++++++++
 .../class-wp-customize-site-icon-control.php         | 11 +++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 941279d1c6..e42f5ed409 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -956,7 +956,6 @@ p.customize-section-description {
 .customize-control-image img,
 .customize-control-background img,
 .customize-control-cropped_image img,
-.customize-control-site_icon img,
 .customize-control-header img {
 	width: 100%;
 	-webkit-border-radius: 2px;
diff --git a/src/wp-admin/css/site-icon.css b/src/wp-admin/css/site-icon.css
index a612e0eaaa..77b8425323 100644
--- a/src/wp-admin/css/site-icon.css
+++ b/src/wp-admin/css/site-icon.css
@@ -24,6 +24,8 @@
 
 .site-icon-preview .browser-title {
 	left: 109px;
+	width: 72px;
+	white-space: nowrap;
 }
 
 .site-icon-preview .app-icon-preview {
@@ -35,3 +37,13 @@
 	width: 64px;
 	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;
+}
diff --git a/src/wp-includes/customize/class-wp-customize-site-icon-control.php b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
index 4d20f8f817..ee2504e834 100644
--- a/src/wp-includes/customize/class-wp-customize-site-icon-control.php
+++ b/src/wp-includes/customize/class-wp-customize-site-icon-control.php
@@ -61,21 +61,16 @@ class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control
 		<# if ( data.attachment && data.attachment.id ) { #>
 		<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">
 							<img id="preview-favicon" src="{{ data.attachment.sizes.full.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
 						</div>
 						<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>
 		</div>