WordPress.org
Get WordPress

Make WordPress Core

Changeset 29596


Ignore:
Timestamp:
08/25/2014 03:57:34 PM (12 years ago)
Author:
helen
Message:

Make filter bar CSS less verbose and redundant.

Also removes an unused handler in the theme feature filter.

see #28794.

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

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r29591 r29596  
    935935
    936936/* Filter bar */
    937 
    938 .wp-title-count {
    939         display: inline;
    940         position: relative;
    941         top: -3px;
    942         margin-left: 5px;
    943         margin-right: 20px;
    944         padding: 4px 10px;
    945         -webkit-border-radius: 30px;
    946         border-radius: 30px;
    947         background: #777;
    948         color: #fff;
    949         font-size: 14px;
    950         font-weight: 600;
    951 }
    952 
    953937.wp-filter {
    954938        display: inline-block;
    … …  
    972956}
    973957
    974 .wp-filter-count {
     958.filter-count {
    975959        display: inline-block;
    976960        vertical-align: middle;
    … …  
    978962}
    979963
    980 .wp-filter-count .count {
     964.title-count,
     965.filter-count .count {
    981966        display: inline-block;
    982967        position: relative;
    … …  
    991976}
    992977
    993 .wp-filter-links {
     978/* not a part of filter bar, but derived from it, so here for now */
     979.title-count {
     980        display: inline;
     981        top: -3px;
     982        margin-left: 5px;
     983        margin-right: 20px;
     984}
     985
     986.filter-links {
    994987        display: inline-block;
    995988        margin: 0;
    996989}
    997990
    998 .wp-filter-links li {
     991.filter-links li {
    999992        display: inline-block;
    1000993        margin: 0;
    1001994}
    1002995
    1003 .wp-filter-link {
     996.filter-links li > a {
    1004997        display: inline-block;
    1005998        margin: 0 10px;
    … …  
    10101003}
    10111004
    1012 .wp-filter-links .current {
     1005.filter-links .current {
     1006        box-shadow: none;
    10131007        border-bottom: 4px solid #666;
    10141008        color: #222;
    10151009}
    10161010
    1017 .wp-filter-search {
    1018         position: absolute;
    1019         top: 9px;
    1020         right: 10px;
    1021         left: auto;
     1011.filter-links li > a:hover,
     1012.filter-links li > a:focus,
     1013.show-filters .filter-links a.current:hover,
     1014.show-filters .filter-links a.current:focus {
     1015        color: #2ea2cc;
     1016}
     1017
     1018.wp-filter .search-form {
     1019        float: right;
     1020        margin-top: 9px;
     1021}
     1022
     1023.wp-filter .search-form input[type="search"] {
    10221024        padding: 3px 5px;
    10231025        width: 280px;
    … …  
    10271029}
    10281030
    1029 .wp-filter-no-results {
    1030         color: #999;
    1031         font-size: 18px;
    1032         font-style: normal;
    1033         margin: 0;
    1034         padding: 100px 0 0;
    1035         text-align: center;
    1036 }
    1037 
    1038 .wp-filter-drawer-toggle {
     1031.wp-filter .search-form select {
     1032        height: 33px;
     1033        vertical-align: top;
     1034}
     1035
     1036.wp-filter .drawer-toggle {
    10391037        display: inline-block;
    10401038        margin: 0 10px;
    … …  
    10441042}
    10451043
    1046 .wp-filter-drawer-toggle:before {
     1044.wp-filter .drawer-toggle:before {
    10471045        display: inline-block;
    10481046        vertical-align: top;
    … …  
    10641062}
    10651063
    1066 .wp-filter-drawer-toggle:hover {
    1067         color: #777;
    1068 }
    1069 
    1070 .wp-filter-drawer-toggle.current:before {
     1064.wp-filter .drawer-toggle:hover,
     1065.wp-filter .drawer-toggle:hover:before {
     1066        color: #2ea2cc;
     1067}
     1068
     1069.wp-filter .drawer-toggle.current:before {
    10711070        color: #fff;
    10721071}
    10731072
    1074 .wp-filter-drawer {
     1073.filter-drawer {
    10751074        display: none;
    10761075        margin: 0 -20px;
    … …  
    10801079}
    10811080
    1082 body.show-filter-drawer .wp-filter-drawer {
     1081.show-filters .filter-drawer {
    10831082        display: block;
    10841083        overflow: hidden;
    10851084}
    10861085
    1087 body.show-filter-drawer .wp-filter-drawer-toggle:hover,
    1088 body.show-filter-drawer .wp-filter-drawer-toggle:focus {
     1086.show-filters .wp-filter .drawer-toggle:hover,
     1087.show-filters .wp-filter .drawer-toggle:focus {
    10891088        background: rgb(46, 162, 204);
    10901089}
    10911090
    1092 body.show-filter-drawer .wp-filter-link.current {
     1091.show-filters .filter-links a.current {
    10931092        border-bottom: none;
    10941093}
    10951094
    1096 body.show-filter-drawer .wp-filter-drawer-toggle {
     1095.show-filters .wp-filter .drawer-toggle {
    10971096        -webkit-border-radius: 2px;
    10981097        border-radius: 2px;
    … …  
    11021101}
    11031102
    1104 body.show-filter-drawer .wp-filter-drawer-toggle:before {
     1103.show-filters .wp-filter .drawer-toggle:before {
    11051104        color: #fff;
    11061105}
    11071106
    1108 .wp-filter-group {
     1107.filter-group {
    11091108        -webkit-box-sizing: border-box;
    11101109        -moz-box-sizing: border-box;
    … …  
    11201119}
    11211120
    1122 .wp-filter-group-wide {
     1121.filter-group.wide {
    11231122        width: 38%;
    11241123}
    11251124
    1126 .wp-filter-group-title {
     1125.filter-group h4 {
    11271126        position: relative;
    11281127        margin: 0;
    11291128}
    11301129
    1131 .wp-filter-drawer ol {
     1130.filter-drawer ol {
    11321131        margin: 20px 0 0;
    11331132        list-style-type: none;
    … …  
    11351134}
    11361135
    1137 .wp-filter-drawer li {
     1136.filter-drawer li {
    11381137        display: inline-block;
    11391138        vertical-align: top;
    … …  
    11441143}
    11451144
    1146 .wp-filter-drawer-buttons {
     1145.filter-drawer .buttons {
    11471146        margin-bottom: 20px;
    11481147}
    11491148
    1150 .wp-filter .wp-filter-drawer-buttons .button span {
     1149.filter-drawer .buttons .button span {
    11511150        display: inline-block;
    11521151        opacity: 0.8;
    … …  
    11601159}
    11611160
    1162 .wp-filter-by {
     1161.filtered-by {
    11631162        display: none;
    11641163        margin: 0;
    11651164}
    11661165
    1167 .wp-filter-by > span {
     1166.filtered-by > span {
    11681167        font-weight: 600;
    11691168}
    11701169
    1171 .wp-filter-by a {
     1170.filtered-by a {
    11721171        margin-left: 10px;
    11731172}
    11741173
    1175 .wp-filter-by .tags {
     1174.filtered-by .tags {
    11761175        display: inline;
    11771176}
    11781177
    1179 .wp-filter-by .tag {
     1178.filtered-by .tag {
    11801179        margin: 0 5px;
    11811180        padding: 4px 8px;
    … …  
    11871186}
    11881187
    1189 body.filters-applied .wp-filter-group,
    1190 body.filters-applied .wp-filter-drawer a.button,
    1191 body.filters-applied .wp-filter-drawer br {
     1188.filters-applied .filter-group,
     1189.filters-applied .filter-drawer .buttons,
     1190.filters-applied .filter-drawer br {
    11921191        display: none !important;
    11931192}
    11941193
    1195 body.filters-applied .wp-filter-by {
     1194.filters-applied .filtered-by {
    11961195        display: block;
    11971196}
    11981197
    1199 body.filters-applied .wp-filter-drawer {
     1198.filters-applied .filter-drawer {
    12001199        padding: 20px;
    12011200}
    12021201
    1203 body.show-filter-drawer .wp-filter-content,
    1204 body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
     1202.show-filters .content-filterable,
     1203.show-filters.filters-applied.loading-content .content-filterable,
     1204.loading-content .content-filterable,
     1205.error .content-filterable {
    12051206        display: none;
    12061207}
    12071208
    1208 body.show-filter-drawer.filters-applied .wp-filter-content {
     1209.show-filters.filters-applied .content-filterable {
    12091210        display: block;
    1210 }
    1211 
    1212 .loading-content .wp-filter-content,
    1213 .error .wp-filter-content {
    1214         display: none;
    12151211}
    12161212
    … …  
    12221218
    12231219@media only screen and (max-width: 1120px) {
    1224         .wp-filter-search {
    1225                 position: static;
     1220        .wp-filter .search-form {
     1221                float: none;
    12261222                margin: 20px 0;
    1227                 width: 100%;
    1228         }
    1229 
    1230         .wp-filter-drawer {
     1223        }
     1224
     1225        .filter-drawer {
    12311226                border-bottom: 1px solid #eee;
    12321227        }
    12331228
    1234         .wp-filter-group {
     1229        .filter-group {
    12351230                margin-bottom: 0;
    12361231                margin-top: 5px;
    … …  
    12381233        }
    12391234
    1240         .wp-filter-group li {
     1235        .filter-group li {
    12411236                margin: 10px 0;
    12421237        }
    … …  
    12441239
    12451240@media only screen and (max-width: 782px) {
    1246         .wp-filter-group,
    1247         .wp-filter-group li {
     1241        .filter-group,
     1242        .filter-group li {
    12481243                width: 100%;
    12491244        }

  • trunk/src/wp-admin/js/theme.js

    r29346 r29596  
    12891289                }
    12901290
    1291                 $( '.wp-filter-link.current' ).removeClass( 'current' );
    1292                 $( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
     1291                $( '.filter-links li > a.current' ).removeClass( 'current' );
     1292                $( 'body' ).removeClass( 'show-filters filters-applied' );
    12931293
    12941294                // Get the themes by sending Ajax POST request to api.wordpress.org/themes
    … …  
    13071307        // Register events for sorting and filters in theme-navigation
    13081308        events: {
    1309                 'click .wp-filter-link': 'onSort',
     1309                'click .filter-links li > a': 'onSort',
    13101310                'click .theme-filter': 'onFilter',
    1311                 'click .wp-filter-drawer-toggle': 'moreFilters',
    1312                 'click .wp-filter-drawer .apply-filters': 'applyFilters',
    1313                 'click .wp-filter-group [type="checkbox"]': 'addFilter',
    1314                 'click .wp-filter-drawer .clear-filters': 'clearFilters',
    1315                 'click .wp-filter-group-title': 'filterSection',
    1316                 'click .wp-filter-by a': 'backToFilters'
     1311                'click .drawer-toggle': 'moreFilters',
     1312                'click .filter-drawer .apply-filters': 'applyFilters',
     1313                'click .filter-group [type="checkbox"]': 'addFilter',
     1314                'click .filter-drawer .clear-filters': 'clearFilters',
     1315                'click .filtered-by': 'backToFilters'
    13171316        },
    13181317
    … …  
    13871386                event.preventDefault();
    13881387
    1389                 $( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
     1388                $( 'body' ).removeClass( 'filters-applied show-filters' );
    13901389
    13911390                // Bail if this is already active
    … …  
    14031402                this.clearSearch();
    14041403
    1405                 $( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
     1404                $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
    14061405                $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
    14071406
    … …  
    14201419                }
    14211420
    1422                 $( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass );
     1421                $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
    14231422                $el.addClass( this.activeClass );
    14241423
    … …  
    14471446                        tags = this.filtersChecked(),
    14481447                        request = { tag: tags },
    1449                         filteringBy = $( '.wp-filter-by .tags' );
     1448                        filteringBy = $( '.filtered-by .tags' );
    14501449
    14511450                if ( event ) {
    … …  
    14541453
    14551454                $( 'body' ).addClass( 'filters-applied' );
    1456                 $( '.wp-filter-link.current' ).removeClass( 'current' );
     1455                $( '.filter-links li > a.current' ).removeClass( 'current' );
    14571456                filteringBy.empty();
    14581457
    … …  
    14701469        // @return {array} of tags or false
    14711470        filtersChecked: function() {
    1472                 var items = $( '.wp-filter-group' ).find( ':checkbox' ),
     1471                var items = $( '.filter-group' ).find( ':checkbox' ),
    14731472                        tags = [];
    14741473
    … …  
    14791478                // When no filters are checked, restore initial state and return
    14801479                if ( tags.length === 0 ) {
    1481                         $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' );
    1482                         $( '.wp-filter-drawer .clear-filters' ).hide();
     1480                        $( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
     1481                        $( '.filter-drawer .clear-filters' ).hide();
    14831482                        $( 'body' ).removeClass( 'filters-applied' );
    14841483                        return false;
    14851484                }
    14861485
    1487                 $( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
    1488                 $( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
     1486                $( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
     1487                $( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
    14891488
    14901489                return tags;
    … …  
    14951494        // Overwrite search container class to append search
    14961495        // in new location
    1497         searchContainer: $( '.wp-filter' ),
     1496        searchContainer: $( '.wp-filter .search-form' ),
    14981497
    14991498        uploader: function() {
    … …  
    15201519                // If the filters section is opened and filters are checked
    15211520                // run the relevant query collapsing to filtered-by state
    1522                 if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
     1521                if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
    15231522                        return this.addFilter();
    15241523                }
    … …  
    15271526
    15281527                themes.router.navigate( themes.router.baseUrl( '' ) );
    1529                 $( 'body' ).toggleClass( 'show-filter-drawer' );
    1530         },
    1531 
    1532         // Expand/collapse each individual filter section
    1533         filterSection: function() {
    1534                 $( event.target ).parent().toggleClass( 'open' );
     1528                $( 'body' ).toggleClass( 'show-filters' );
    15351529        },
    15361530
    … …  
    15381532        // @uses filtersChecked()
    15391533        clearFilters: function( event ) {
    1540                 var items = $( '.wp-filter-group' ).find( ':checkbox' ),
     1534                var items = $( '.filter-group' ).find( ':checkbox' ),
    15411535                        self = this;
    15421536

  • trunk/src/wp-admin/theme-install.php

    r29217 r29596  
    136136
    137137        <div class="wp-filter">
    138                 <div class="wp-filter-count">
     138                <div class="filter-count">
    139139                        <span class="count theme-count"></span>
    140140                </div>
    141141
    142                 <ul class="wp-filter-links">
    143                         <li><a class="wp-filter-link" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
    144                         <li><a class="wp-filter-link" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
    145                         <li><a class="wp-filter-link" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
     142                <ul class="filter-links">
     143                        <li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
     144                        <li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
     145                        <li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
    146146                </ul>
    147147
    148                 <a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
    149 
    150                 <div class="wp-filter-drawer">
    151                         <div class="wp-filter-drawer-buttons">
     148                <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     149
     150                <div class="search-form"></div>
     151
     152                <div class="filter-drawer">
     153                        <div class="buttons">
    152154                                <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
    153155                                <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
    … …  
    157159                foreach ( $feature_list as $feature_name => $features ) {
    158160                        if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
    159                                 echo '<div class="wp-filter-group wp-filter-group-wide">';
     161                                echo '<div class="filter-group wide">';
    160162                        } else {
    161                                 echo '<div class="wp-filter-group">';
     163                                echo '<div class="filter-group">';
    162164                        }
    163165                        $feature_name = esc_html( $feature_name );
    164                         echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
     166                        echo '<h4>' . $feature_name . '</h4>';
    165167                        echo '<ol class="feature-group">';
    166168                        foreach ( $features as $feature => $feature_name ) {
    … …  
    173175                }
    174176                ?>
    175                         <div class="wp-filter-by">
     177                        <div class="filtered-by">
    176178                                <span><?php _e( 'Filtering by:' ); ?></span>
    177179                                <div class="tags"></div>
    … …  
    180182                </div>
    181183        </div>
    182         <div class="theme-browser wp-filter-content"></div>
     184        <div class="theme-browser content-filterable"></div>
    183185        <div class="theme-install-overlay wp-full-overlay expanded"></div>
    184186

  • trunk/src/wp-admin/themes.php

    r29324 r29596  
    118118<div class="wrap">
    119119        <h2><?php esc_html_e( 'Themes' ); ?>
    120                 <span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span>
     120                <span class="title-count theme-count"><?php echo count( $themes ); ?></span>
    121121        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    122122                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="hide-if-no-js add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
Note: See TracChangeset for help on using the changeset viewer.