WordPress.org

Make WordPress Core

Changeset 20106


Ignore:
Timestamp:
03/04/2012 02:06:11 AM (7 years ago)
Author:
koopersmith
Message:

Theme Customizer: Improve form markup. Make the theme title/author a section. Prevent section arrows from blocking clicks. see #19910.

Location:
trunk/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-section.php

    r19995 r20106  
    6666        ?>
    6767        <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
    68             <h3 class="customize-theme-title"><?php echo esc_html( $this->title ); ?></h3>
    69             <ul>
     68            <h3 class="customize-section-title"><?php echo esc_html( $this->title ); ?></h3>
     69            <ul class="customize-section-content">
    7070                <?php if ( $this->description ) : ?>
    7171                    <li><p class="howto"><?php echo $this->description; ?></p></li>
  • trunk/wp-includes/css/customize-controls.dev.css

    r19995 r20106  
    11body {
    22    overflow: hidden;
    3 }
    4 
    5 .customize-section {
    6     border-top: 1px solid #fff;
    7     border-bottom: 1px solid #dfdfdf;
    8     padding: 15px 20px;
    9     margin: 0;
    10 }
    11 
    12 .customize-section:last-child {
    13     box-shadow: 0 1px 0 0px #fff;
    143}
    154
     
    2716}
    2817
     18.customize-section {
     19    border-top: 1px solid #fff;
     20    border-bottom: 1px solid #dfdfdf;
     21    margin: 0;
     22}
     23
     24.customize-section:last-child {
     25    box-shadow: 0 1px 0 0px #fff;
     26}
     27
     28.customize-section-title {
     29    margin: 0;
     30    padding: 15px 20px;
     31    position: relative;
     32
     33    cursor: pointer;
     34
     35    -webkit-user-select: none;
     36    -moz-user-select: none;
     37    user-select: none;
     38}
     39
     40.customize-section-content {
     41    display: none;
     42    padding: 0 20px 15px;
     43}
     44
     45.customize-section.open .customize-section-content {
     46    display: block;
     47}
     48
     49.customize-section-title:after {
     50    content: '';
     51    width: 0;
     52    height: 0;
     53    border-color: #ccc transparent transparent transparent;
     54    border-style: solid;
     55    border-width: 6px;
     56    position: absolute;
     57    top: 20px;
     58    right: 20px;
     59    z-index: 1;
     60}
     61
     62.customize-section.open .customize-section-title:after {
     63    top: 13px;
     64    border-color: transparent transparent #ccc transparent;
     65}
     66
    2967#customize-controls .theme-name {
    3068    font-size: 16px;
     
    5391#customize-theme-controls ul {
    5492    margin: 0;
    55 }
    56 
    57 #customize-theme-controls ul ul {
    58     margin-top: 1em;
    59     display: none;
    60 }
    61 
    62 #customize-theme-controls ul h3 {
    63     margin: 0;
    64     -webkit-user-select: none;
    65     -moz-user-select: none;
    66     user-select: none;
    67 }
    68 
    69 #customize-theme-controls ul h3:hover {
    70     cursor: pointer;
    71 }
    72 
    73 #customize-theme-controls ul h3:after {
    74     content: '';
    75     border-color: #ccc transparent transparent transparent;
    76     border-style: solid;
    77     border-width: 6px;
    78     float: right;
    79     margin-top: 5px;
    80     margin-left: 5px;
    81 }
    82 
    83  #customize-theme-controls ul h3.open:after {
    84     -moz-transform: rotate(180deg);
    85     -webkit-transform: rotate(180deg);
    86     -o-transform: rotate(180deg);
    87     -ms-transform: rotate(180deg);
    88     transform: rotate(180deg);
    89     -moz-transform-origin: center 3px;
    90     -webkit-transform-origin: center 3px;
    91     -o-transform-origin: center 3px;
    92     -ms-transform-origin: center 3px;
    93     transform-origin: center 3px;
    9493}
    9594
  • trunk/wp-includes/customize-controls.php

    r20057 r20106  
    5252
    5353        <div id="customize-info" class="customize-section">
    54             <p>
     54            <div class="customize-section-title">
    5555                <strong class="theme-name"><?php echo $theme['Name']; ?></strong>
    5656                <span class="theme-by"><?php printf( __( 'By %s' ), $theme['Author'] ); ?></span>
    57             </p>
    58             <?php if ( $screenshot ) : ?>
    59                 <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
    60             <?php endif; ?>
     57            </div>
     58            <div class="customize-section-content">
     59                <?php if ( $screenshot ) : ?>
     60                    <img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
     61                <?php endif; ?>
     62            </div>
    6163        </div>
    6264
  • trunk/wp-includes/js/customize-controls.dev.js

    r20049 r20106  
    150150
    151151        // Temporary accordion code.
    152         $('.control-section h3').click( function() {
    153             $( this ).siblings('ul').slideToggle( 200 );
    154             $( this ).toggleClass( 'open' );
     152        $('.customize-section-title').click( function() {
     153            $( this ).parents('.customize-section').toggleClass( 'open' );
    155154            return false;
    156155        });
Note: See TracChangeset for help on using the changeset viewer.