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; return;
?> ?>
<li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section"> <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> <h3 class="customize-section-title"><?php echo esc_html( $this->title ); ?></h3>
<ul> <ul class="customize-section-content">
<?php if ( $this->description ) : ?> <?php if ( $this->description ) : ?>
<li><p class="howto"><?php echo $this->description; ?></p></li> <li><p class="howto"><?php echo $this->description; ?></p></li>
<?php endif; ?> <?php endif; ?>

View File

@ -2,17 +2,6 @@ body {
overflow: hidden; 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 { #customize-controls {
width: 300px; width: 300px;
height: 100%; height: 100%;
@ -26,6 +15,55 @@ body {
border-right: 1px solid rgba( 0, 0, 0, 0.2 ); 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 { #customize-controls .theme-name {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@ -54,45 +92,6 @@ body {
margin: 0; 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 { #customize-footer {
border-bottom: 0; border-bottom: 0;
border-top: 1px solid #dfdfdf; border-top: 1px solid #dfdfdf;

View File

@ -51,13 +51,15 @@ do_action( 'customize_controls_print_scripts' );
<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" /> <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
<div id="customize-info" class="customize-section"> <div id="customize-info" class="customize-section">
<p> <div class="customize-section-title">
<strong class="theme-name"><?php echo $theme['Name']; ?></strong> <strong class="theme-name"><?php echo $theme['Name']; ?></strong>
<span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span> <span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
</p> </div>
<?php if ( $screenshot ) : ?> <div class="customize-section-content">
<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" /> <?php if ( $screenshot ) : ?>
<?php endif; ?> <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
<?php endif; ?>
</div>
</div> </div>
<div id="customize-theme-controls"><ul> <div id="customize-theme-controls"><ul>

View File

@ -149,9 +149,8 @@
}); });
// Temporary accordion code. // Temporary accordion code.
$('.control-section h3').click( function() { $('.customize-section-title').click( function() {
$( this ).siblings('ul').slideToggle( 200 ); $( this ).parents('.customize-section').toggleClass( 'open' );
$( this ).toggleClass( 'open' );
return false; return false;
}); });