WordPress.org

Making WordPress.org

Changeset 8910


Ignore:
Timestamp:
06/03/2019 08:46:22 PM (9 months ago)
Author:
coffee2code
Message:

Developer: Add ability for second-level handbook sidebar menu items with sub-items to be collapsible/expandable.

Nested menu items are all initially collapsed.

Props welcher.
Fixes #4476.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/chapters.js

    r8689 r8910  
    11// Mobile Subnav open/close
    2 jQuery(document).ready(function() {
     2jQuery( document ).ready( function () {
    33
    44    jQuery( document ).on( 'click', '.code-tab', function ( e ) {
     
    1313    } );
    1414
    15     var tocContainer = jQuery( 'div[class*="-table-of-contents-container"]').first();
     15    var tocContainer = jQuery( 'div[class*="-table-of-contents-container"]' ).first();
    1616
    1717    if ( 0 === tocContainer.length ) {
     
    2020
    2121    // Add our expandable button
    22     tocContainer.find( '> ul > .menu-item-has-children > a' )
     22    tocContainer.find( '> ul .menu-item-has-children > a' )
    2323        .wrap( '<div class="expandable"></div>' )
    2424        .after( '<button class="dashicons dashicons-arrow-down-alt2" aria-expanded="false"></button>' );
    2525
    26     // Invisibly open all of the submenus
    27     jQuery( '.menu-item-has-children > ul ul' ).addClass( 'default-open' );
     26    // Invisibly hide all of the submenus
     27    jQuery( '.menu-item-has-children > ul ul' ).hide();
    2828
    2929    // Open the current menu
     
    3131        .addClass( 'active' )
    3232        .parents( '.menu-item-has-children' )
    33             .toggleClass( 'open' )
     33        .toggleClass( 'open' )
    3434        .find( '> div > .dashicons' )
    35             .attr( 'aria-expanded', true );
     35        .attr( 'aria-expanded', true );
    3636
     37    // Open the current submenu
     38    $secondary_menu = tocContainer.find( '.current-menu-item > ul' );
     39    if ( $secondary_menu.length ) {
     40        $secondary_menu.show();
     41    } else {
     42        tocContainer.find( '.current-menu-item' ).parents( 'ul' ).show();
     43    }
    3744    // Or if wrapped in a div.expandable
    38     jQuery( '.menu-item-has-children > div > .dashicons' ).click( function() {
     45    jQuery( '.menu-item-has-children > div > .dashicons' ).click( function () {
    3946        var menuToggle = jQuery( this ).closest( '.menu-item-has-children' );
    4047
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r8801 r8910  
    546546            margin: 0 auto;
    547547        }
    548        
     548
    549549    }
    550550    .color.section {
     
    737737    }
    738738
    739         div#inner-search {
    740             background-color: #666;
    741             margin-bottom: 1em;
    742             padding-top: 2px;
    743             .section.search-section {
     739    div#inner-search {
     740        background-color: #666;
     741        margin-bottom: 1em;
     742        padding-top: 2px;
     743        .section.search-section {
     744            color: #ffffff;
     745        }
     746        div#inner-search-icon-container {
     747            margin: 0 auto;
     748            max-width: 60em;
     749            cursor: pointer;
     750            div#inner-search-icon {
     751                background-color: #666;
    744752                color: #ffffff;
    745             }
    746             div#inner-search-icon-container {
    747                 margin: 0 auto;
    748                 max-width: 60em;
    749                 cursor: pointer;
    750                 div#inner-search-icon {
    751                     background-color: #666;
    752                     color: #ffffff;
    753                     text-align: center;
    754                     margin-right: 26px;
    755                     margin-left: 4px;
    756                     float: right;
    757                     padding: 5px;
    758                     -webkit-border-bottom-right-radius: 5px;
    759                     -webkit-border-bottom-left-radius: 5px;
    760                     -moz-border-radius-bottomright: 5px;
    761                     -moz-border-radius-bottomleft: 5px;
    762                     border-bottom-right-radius: 5px;
    763                     border-bottom-left-radius: 5px;
    764                     .dashicons-search {
    765                         height: auto;
    766                         width: auto;
    767                         &:before {
    768                             font-size: 36px;
    769                             line-height: 36px;
    770                         }
     753                text-align: center;
     754                margin-right: 26px;
     755                margin-left: 4px;
     756                float: right;
     757                padding: 5px;
     758                -webkit-border-bottom-right-radius: 5px;
     759                -webkit-border-bottom-left-radius: 5px;
     760                -moz-border-radius-bottomright: 5px;
     761                -moz-border-radius-bottomleft: 5px;
     762                border-bottom-right-radius: 5px;
     763                border-bottom-left-radius: 5px;
     764                .dashicons-search {
     765                    height: auto;
     766                    width: auto;
     767                    &:before {
     768                        font-size: 36px;
     769                        line-height: 36px;
    771770                    }
    772771                }
    773772            }
    774773        }
     774    }
    775775
    776776    .archive-filter-form {
     
    12831283        #comment-preview {
    12841284            border: 1px solid #dfdfdf;
    1285             border-radius: 2px; 
     1285            border-radius: 2px;
    12861286            width: 100%;
    12871287        }
     
    16971697            font-size: 68.6646px;
    16981698            font-size: 6.86646rem;
    1699        
     1699
    17001700            @media (max-width: 500px) {
    17011701                font-size: 50px;
     
    21322132    }
    21332133    .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
    2134     .current-menu-item .expandable .dashicons:not(:focus) {
     2134    .current-menu-item > .expandable .dashicons:not(:focus) {
    21352135        background: #fff;
    21362136        color: #0073aa;
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r8801 r8910  
    25182518
    25192519div[class*="-table-of-contents-container"] .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
    2520 div[class*="-table-of-contents-container"] .current-menu-item .expandable .dashicons:not(:focus) {
     2520div[class*="-table-of-contents-container"] .current-menu-item > .expandable .dashicons:not(:focus) {
    25212521  background: #fff;
    25222522  color: #0073aa;
Note: See TracChangeset for help on using the changeset viewer.