Make WordPress Core

Changeset 38912


Ignore:
Timestamp:
10/25/2016 05:28:40 PM (7 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.