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
sundeeprana · Mar 4, 2012 · 9523a90 · 9523a90
1 parent c973568
commit 9523a90
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 59 deletions.
diff --git 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
@@ -2,28 +2,66 @@ 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;
 }
 
 .customize-section:last-child {
 	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
@@ -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
@@ -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;
 		});