WordPress.org

Make WordPress Core

Changeset 20106


Ignore:
Timestamp:
03/04/12 02:06:11 (2 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.