WordPress.org
Get WordPress

Make WordPress Core

Changeset 29596


Ignore:
Timestamp:
08/25/2014 03:57:34 PM (10 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.