From 9523a9037c2902e26456994b305d0d3970e900b9 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
Date: Sun, 4 Mar 2012 02:06:11 +0000
Subject: [PATCH] Theme Customizer: Improve form markup. Make the theme
 title/author a section. Prevent section arrows from blocking clicks. see
 #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20106 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 wp-includes/class-wp-customize-section.php |  4 +-
 wp-includes/css/customize-controls.dev.css | 97 +++++++++++-----------
 wp-includes/customize-controls.php         | 12 +--
 wp-includes/js/customize-controls.dev.js   |  5 +-
 4 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/wp-includes/class-wp-customize-section.php b/wp-includes/class-wp-customize-section.php
index ca8f1da6257e..73525ce41e79 100644
--- a/wp-includes/class-wp-customize-section.php
+++ b/wp-includes/class-wp-customize-section.php
@@ -65,8 +65,8 @@ function render() {
 			return;
 		?>
 		<li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
-			<h3 class="customize-theme-title"><?php echo esc_html( $this->title ); ?></h3>
-			<ul>
+			<h3 class="customize-section-title"><?php echo esc_html( $this->title ); ?></h3>
+			<ul class="customize-section-content">
 				<?php if ( $this->description ) : ?>
 					<li><p class="howto"><?php echo $this->description; ?></p></li>
 				<?php endif; ?>
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 295d2e47a641..6b7530494b12 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -2,10 +2,22 @@ body {
 	overflow: hidden;
 }
 
+#customize-controls {
+	width: 300px;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	z-index: 10;
+	position: relative;
+	overflow: auto;
+	background: #f5f5f5;
+	box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
+	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+
 .customize-section {
 	border-top: 1px solid #fff;
 	border-bottom: 1px solid #dfdfdf;
-	padding: 15px 20px;
 	margin: 0;
 }
 
@@ -13,17 +25,43 @@ body {
 	box-shadow: 0 1px 0 0px #fff;
 }
 
-#customize-controls {
-	width: 300px;
-	height: 100%;
-	padding: 0;
+.customize-section-title {
 	margin: 0;
-	z-index: 10;
+	padding: 15px 20px;
 	position: relative;
-	overflow: auto;
-	background: #f5f5f5;
-	box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
-	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+
+	cursor: pointer;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.customize-section-content {
+	display: none;
+	padding: 0 20px 15px;
+}
+
+.customize-section.open .customize-section-content {
+	display: block;
+}
+
+.customize-section-title:after {
+	content: '';
+	width: 0;
+	height: 0;
+	border-color: #ccc transparent transparent transparent;
+	border-style: solid;
+	border-width: 6px;
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	z-index: 1;
+}
+
+.customize-section.open .customize-section-title:after {
+	top: 13px;
+	border-color: transparent transparent #ccc transparent;
 }
 
 #customize-controls .theme-name {
@@ -54,45 +92,6 @@ body {
 	margin: 0;
 }
 
-#customize-theme-controls ul ul {
-	margin-top: 1em;
-	display: none;
-}
-
-#customize-theme-controls ul h3 {
-	margin: 0;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-#customize-theme-controls ul h3:hover {
-	cursor: pointer;
-}
-
-#customize-theme-controls ul h3:after {
-	content: '';
-	border-color: #ccc transparent transparent transparent;
-	border-style: solid;
-	border-width: 6px;
-	float: right;
-	margin-top: 5px;
-	margin-left: 5px;
-}
-
- #customize-theme-controls ul h3.open:after {
-	-moz-transform: rotate(180deg);
-	-webkit-transform: rotate(180deg);
-	-o-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
-	-moz-transform-origin: center 3px;
-	-webkit-transform-origin: center 3px;
-	-o-transform-origin: center 3px;
-	-ms-transform-origin: center 3px;
-	transform-origin: center 3px;
-}
-
 #customize-footer {
 	border-bottom: 0;
 	border-top: 1px solid #dfdfdf;
diff --git a/wp-includes/customize-controls.php b/wp-includes/customize-controls.php
index 5beaacd39f7b..63508db24a26 100644
--- a/wp-includes/customize-controls.php
+++ b/wp-includes/customize-controls.php
@@ -51,13 +51,15 @@
 		<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
 
 		<div id="customize-info" class="customize-section">
-			<p>
+			<div class="customize-section-title">
 				<strong class="theme-name"><?php echo $theme['Name']; ?></strong>
 				<span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
-			</p>
-			<?php if ( $screenshot ) : ?>
-				<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
-			<?php endif; ?>
+			</div>
+			<div class="customize-section-content">
+				<?php if ( $screenshot ) : ?>
+					<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+				<?php endif; ?>
+			</div>
 		</div>
 
 		<div id="customize-theme-controls"><ul>
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index cfe66bb4d376..2f3309cfde2e 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -149,9 +149,8 @@
 		});
 
 		// Temporary accordion code.
-		$('.control-section h3').click( function() {
-			$( this ).siblings('ul').slideToggle( 200 );
-			$( this ).toggleClass( 'open' );
+		$('.customize-section-title').click( function() {
+			$( this ).parents('.customize-section').toggleClass( 'open' );
 			return false;
 		});