WordPress.org
Get WordPress

Make WordPress Core

Changeset 38912


Ignore:
Timestamp:
10/25/2016 05:28:40 PM (10 years ago)
Author:
afercia
Message:

Menus: Improve the HTML semantics of the "Menu Settings" section.

  • removes the previous markup based on a definition list
  • groups checkboxes in fieldset elements with a legend
  • simplifies the CSS lowering selectors specificity

Props xavortm.

Fixes #38023.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/nav-menus.css

    r38770 r38912  
    110110}
    111111
    112 .menu-settings dl {
     112.menu-settings-group {
    113113        margin: 0 0 10px;
    114114        overflow: hidden;
    115         padding-left: 18%;
    116 }
    117 
    118 .menu-settings dd {
     115        padding-left: 20%;
     116}
     117
     118.menu-settings-group:last-of-type {
     119        margin-bottom: 0;
     120}
     121
     122.menu-settings-input {
    119123        float: left;
    120124        margin: 0;
    … …  
    122126}
    123127
    124 .menu-settings dt {
     128.menu-settings-group-name {
    125129        float: left;
    126130        clear: both;
    127         width: 21.951%;
     131        width: 25%;
    128132        padding: 3px 0 0;
    129         margin-left: -21.951%;
     133        margin-left: -25%; /* 20 container left padding x ( 100 container % width / 80 this % width ) */
    130134}
    131135
    … …  
    870874        }
    871875
    872         .menu-settings dl {
     876        .menu-settings-group {
    873877                padding-left: 0;
    874878        }
    875879
    876         .menu-settings dd {
    877                 float: none;
    878                 width: 100%;
    879                 margin-bottom: 15px;
    880         }
    881 
    882         .menu-settings dt {
     880        .menu-settings-group-name {
    883881                float: none;
    884882                width: auto;
    … …  
    887885        }
    888886
     887        .menu-settings-input {
     888                float: none;
     889                margin-bottom: 15px;
     890        }
     891
     892        .menu-edit .checkbox-input {
     893            margin-top: 0;
     894        }
     895
    889896        .manage-menus select {
    890897                margin: 0.5em 0;

  • trunk/src/wp-admin/nav-menus.php

    r38725 r38912  
    799799                                                                } ?>
    800800
    801                                                                 <dl class="auto-add-pages">
    802                                                                         <dt class="howto"><?php _e( 'Auto add pages' ); ?></dt>
    803                                                                         <dd class="checkbox-input"><input type="checkbox"<?php checked( $auto_add ); ?> name="auto-add-pages" id="auto-add-pages" value="1" /> <label for="auto-add-pages"><?php printf( __('Automatically add new top-level pages to this menu' ), esc_url( admin_url( 'edit.php?post_type=page' ) ) ); ?></label></dd>
    804                                                                 </dl>
     801                                                                <fieldset class="menu-settings-group auto-add-pages">
     802                                                                        <legend class="menu-settings-group-name howto"><?php _e( 'Auto add pages' ); ?></legend>
     803                                                                        <div class="menu-settings-input checkbox-input">
     804                                                                                <input type="checkbox"<?php checked( $auto_add ); ?> name="auto-add-pages" id="auto-add-pages" value="1" /> <label for="auto-add-pages"><?php printf( __('Automatically add new top-level pages to this menu' ), esc_url( admin_url( 'edit.php?post_type=page' ) ) ); ?></label>
     805                                                                        </div>
     806                                                                </fieldset>
    805807
    806808                                                                <?php if ( current_theme_supports( 'menus' ) ) : ?>
    807809
    808                                                                         <dl class="menu-theme-locations">
    809                                                                                 <dt class="howto"><?php _e( 'Theme locations' ); ?></dt>
     810                                                                        <fieldset class="menu-settings-group menu-theme-locations">
     811                                                                                <legend class="menu-settings-group-name howto"><?php _e( 'Theme locations' ); ?></legend>
    810812                                                                                <?php foreach ( $locations as $location => $description ) : ?>
    811                                                                                 <dd class="checkbox-input">
     813                                                                                <div class="menu-settings-input checkbox-input">
    812814                                                                                        <input type="checkbox"<?php checked( isset( $menu_locations[ $location ] ) && $menu_locations[ $location ] == $nav_menu_selected_id ); ?> name="menu-locations[<?php echo esc_attr( $location ); ?>]" id="locations-<?php echo esc_attr( $location ); ?>" value="<?php echo esc_attr( $nav_menu_selected_id ); ?>" />
    813815                                                                                        <label for="locations-<?php echo esc_attr( $location ); ?>"><?php echo $description; ?></label>
    … …  
    820822                                                                                                ?></span>
    821823                                                                                        <?php endif; ?>
    822                                                                                 </dd>
     824                                                                                </div>
    823825                                                                                <?php endforeach; ?>
    824                                                                         </dl>
     826                                                                        </fieldset>
    825827
    826828                                                                <?php endif; ?>
Note: See TracChangeset for help on using the changeset viewer.