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
This commit is contained in:
koopersmith 2012-03-04 02:06:11 +00:00
parent c973568e76
commit 9523a9037c
4 changed files with 60 additions and 60 deletions

View File

@ -65,8 +65,8 @@ class WP_Customize_Section {
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; ?>

View File

@ -2,17 +2,6 @@ body {
overflow: hidden;
}
.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%;
@ -26,6 +15,55 @@ body {
border-right: 1px solid rgba( 0, 0, 0, 0.2 );
}
.customize-section {
border-top: 1px solid #fff;
border-bottom: 1px solid #dfdfdf;
margin: 0;
}
.customize-section:last-child {
box-shadow: 0 1px 0 0px #fff;
}
.customize-section-title {
margin: 0;
padding: 15px 20px;
position: relative;
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 {
font-size: 16px;
font-weight: bold;
@ -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;

View File

@ -51,14 +51,16 @@ do_action( 'customize_controls_print_scripts' );
<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>
</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>
<?php

View File

@ -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;
});