Make filter bar CSS less verbose and redundant.
Also removes an unused handler in the theme feature filter. see #28794. Built from https://develop.svn.wordpress.org/trunk@29596 git-svn-id: http://core.svn.wordpress.org/trunk@29370 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
4261ce75a6
commit
713857625e
|
|
@ -934,22 +934,6 @@ th.action-links {
|
|||
}
|
||||
|
||||
/* Filter bar */
|
||||
|
||||
.wp-title-count {
|
||||
display: inline;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-right: 5px;
|
||||
margin-left: 20px;
|
||||
padding: 4px 10px;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -971,13 +955,14 @@ th.action-links {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-filter-count {
|
||||
.filter-count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.wp-filter-count .count {
|
||||
.title-count,
|
||||
.filter-count .count {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
|
@ -990,17 +975,25 @@ th.action-links {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-links {
|
||||
/* not a part of filter bar, but derived from it, so here for now */
|
||||
.title-count {
|
||||
display: inline;
|
||||
top: -3px;
|
||||
margin-right: 5px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.filter-links {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-links li {
|
||||
.filter-links li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-link {
|
||||
.filter-links li > a {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
|
|
@ -1009,16 +1002,25 @@ th.action-links {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-links .current {
|
||||
.filter-links .current {
|
||||
box-shadow: none;
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.wp-filter-search {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
.filter-links li > a:hover,
|
||||
.filter-links li > a:focus,
|
||||
.show-filters .filter-links a.current:hover,
|
||||
.show-filters .filter-links a.current:focus {
|
||||
color: #2ea2cc;
|
||||
}
|
||||
|
||||
.wp-filter .search-form {
|
||||
float: left;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.wp-filter .search-form input[type="search"] {
|
||||
padding: 3px 5px;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
|
|
@ -1026,16 +1028,12 @@ th.action-links {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wp-filter-no-results {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 100px 0 0;
|
||||
text-align: center;
|
||||
.wp-filter .search-form select {
|
||||
height: 33px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle {
|
||||
.wp-filter .drawer-toggle {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
|
|
@ -1043,7 +1041,7 @@ th.action-links {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:before {
|
||||
.wp-filter .drawer-toggle:before {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
content: "\f111";
|
||||
|
|
@ -1063,15 +1061,16 @@ th.action-links {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:hover {
|
||||
color: #777;
|
||||
.wp-filter .drawer-toggle:hover,
|
||||
.wp-filter .drawer-toggle:hover:before {
|
||||
color: #2ea2cc;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle.current:before {
|
||||
.wp-filter .drawer-toggle.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
.filter-drawer {
|
||||
display: none;
|
||||
margin: 0 -20px;
|
||||
padding: 20px;
|
||||
|
|
@ -1079,21 +1078,21 @@ th.action-links {
|
|||
background: #fafafa;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer {
|
||||
.show-filters .filter-drawer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:hover,
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:focus {
|
||||
.show-filters .wp-filter .drawer-toggle:hover,
|
||||
.show-filters .wp-filter .drawer-toggle:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-link.current {
|
||||
.show-filters .filter-links a.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle {
|
||||
.show-filters .wp-filter .drawer-toggle {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
|
@ -1101,11 +1100,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
||||
.show-filters .wp-filter .drawer-toggle:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
.filter-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1119,22 +1118,22 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.wp-filter-group-wide {
|
||||
.filter-group.wide {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.wp-filter-group-title {
|
||||
.filter-group h4 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-drawer ol {
|
||||
.filter-drawer ol {
|
||||
margin: 20px 0 0;
|
||||
list-style-type: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wp-filter-drawer li {
|
||||
.filter-drawer li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 5px 0;
|
||||
|
|
@ -1143,11 +1142,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-buttons {
|
||||
.filter-drawer .buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-filter .wp-filter-drawer-buttons .button span {
|
||||
.filter-drawer .buttons .button span {
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
|
|
@ -1159,24 +1158,24 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
margin: 0 10px 20px 0;
|
||||
}
|
||||
|
||||
.wp-filter-by {
|
||||
.filtered-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-by > span {
|
||||
.filtered-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-by a {
|
||||
.filtered-by a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by .tags {
|
||||
.filtered-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wp-filter-by .tag {
|
||||
.filtered-by .tag {
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
|
@ -1186,34 +1185,31 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-group,
|
||||
body.filters-applied .wp-filter-drawer a.button,
|
||||
body.filters-applied .wp-filter-drawer br {
|
||||
.filters-applied .filter-group,
|
||||
.filters-applied .filter-drawer .buttons,
|
||||
.filters-applied .filter-drawer br {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-by {
|
||||
.filters-applied .filtered-by {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-drawer {
|
||||
.filters-applied .filter-drawer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-content,
|
||||
body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
|
||||
.show-filters .content-filterable,
|
||||
.show-filters.filters-applied.loading-content .content-filterable,
|
||||
.loading-content .content-filterable,
|
||||
.error .content-filterable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer.filters-applied .wp-filter-content {
|
||||
.show-filters.filters-applied .content-filterable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-content .wp-filter-content,
|
||||
.error .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-content .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
|
|
@ -1221,30 +1217,29 @@ body.show-filter-drawer.filters-applied .wp-filter-content {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.wp-filter-search {
|
||||
position: static;
|
||||
.wp-filter .search-form {
|
||||
float: none;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
.filter-drawer {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
.filter-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-group li {
|
||||
.filter-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.wp-filter-group,
|
||||
.wp-filter-group li {
|
||||
.filter-group,
|
||||
.filter-group li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -934,22 +934,6 @@ th.action-links {
|
|||
}
|
||||
|
||||
/* Filter bar */
|
||||
|
||||
.wp-title-count {
|
||||
display: inline;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 5px;
|
||||
margin-right: 20px;
|
||||
padding: 4px 10px;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -971,13 +955,14 @@ th.action-links {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-filter-count {
|
||||
.filter-count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.wp-filter-count .count {
|
||||
.title-count,
|
||||
.filter-count .count {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
|
@ -990,17 +975,25 @@ th.action-links {
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-links {
|
||||
/* not a part of filter bar, but derived from it, so here for now */
|
||||
.title-count {
|
||||
display: inline;
|
||||
top: -3px;
|
||||
margin-left: 5px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.filter-links {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-links li {
|
||||
.filter-links li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-link {
|
||||
.filter-links li > a {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
|
|
@ -1009,16 +1002,25 @@ th.action-links {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-links .current {
|
||||
.filter-links .current {
|
||||
box-shadow: none;
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.wp-filter-search {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
.filter-links li > a:hover,
|
||||
.filter-links li > a:focus,
|
||||
.show-filters .filter-links a.current:hover,
|
||||
.show-filters .filter-links a.current:focus {
|
||||
color: #2ea2cc;
|
||||
}
|
||||
|
||||
.wp-filter .search-form {
|
||||
float: right;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.wp-filter .search-form input[type="search"] {
|
||||
padding: 3px 5px;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
|
|
@ -1026,16 +1028,12 @@ th.action-links {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wp-filter-no-results {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
padding: 100px 0 0;
|
||||
text-align: center;
|
||||
.wp-filter .search-form select {
|
||||
height: 33px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle {
|
||||
.wp-filter .drawer-toggle {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
|
|
@ -1043,7 +1041,7 @@ th.action-links {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:before {
|
||||
.wp-filter .drawer-toggle:before {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
content: "\f111";
|
||||
|
|
@ -1063,15 +1061,16 @@ th.action-links {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:hover {
|
||||
color: #777;
|
||||
.wp-filter .drawer-toggle:hover,
|
||||
.wp-filter .drawer-toggle:hover:before {
|
||||
color: #2ea2cc;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle.current:before {
|
||||
.wp-filter .drawer-toggle.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
.filter-drawer {
|
||||
display: none;
|
||||
margin: 0 -20px;
|
||||
padding: 20px;
|
||||
|
|
@ -1079,21 +1078,21 @@ th.action-links {
|
|||
background: #fafafa;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer {
|
||||
.show-filters .filter-drawer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:hover,
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:focus {
|
||||
.show-filters .wp-filter .drawer-toggle:hover,
|
||||
.show-filters .wp-filter .drawer-toggle:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-link.current {
|
||||
.show-filters .filter-links a.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle {
|
||||
.show-filters .wp-filter .drawer-toggle {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
|
|
@ -1101,11 +1100,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
||||
.show-filters .wp-filter .drawer-toggle:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
.filter-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1119,22 +1118,22 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.wp-filter-group-wide {
|
||||
.filter-group.wide {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.wp-filter-group-title {
|
||||
.filter-group h4 {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-drawer ol {
|
||||
.filter-drawer ol {
|
||||
margin: 20px 0 0;
|
||||
list-style-type: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wp-filter-drawer li {
|
||||
.filter-drawer li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 5px 0;
|
||||
|
|
@ -1143,11 +1142,11 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-buttons {
|
||||
.filter-drawer .buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-filter .wp-filter-drawer-buttons .button span {
|
||||
.filter-drawer .buttons .button span {
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
|
|
@ -1159,24 +1158,24 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
margin: 0 0 20px 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by {
|
||||
.filtered-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-by > span {
|
||||
.filtered-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-by a {
|
||||
.filtered-by a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by .tags {
|
||||
.filtered-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wp-filter-by .tag {
|
||||
.filtered-by .tag {
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
|
|
@ -1186,34 +1185,31 @@ body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-group,
|
||||
body.filters-applied .wp-filter-drawer a.button,
|
||||
body.filters-applied .wp-filter-drawer br {
|
||||
.filters-applied .filter-group,
|
||||
.filters-applied .filter-drawer .buttons,
|
||||
.filters-applied .filter-drawer br {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-by {
|
||||
.filters-applied .filtered-by {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-drawer {
|
||||
.filters-applied .filter-drawer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-content,
|
||||
body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
|
||||
.show-filters .content-filterable,
|
||||
.show-filters.filters-applied.loading-content .content-filterable,
|
||||
.loading-content .content-filterable,
|
||||
.error .content-filterable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer.filters-applied .wp-filter-content {
|
||||
.show-filters.filters-applied .content-filterable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-content .wp-filter-content,
|
||||
.error .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-content .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
|
|
@ -1221,30 +1217,29 @@ body.show-filter-drawer.filters-applied .wp-filter-content {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.wp-filter-search {
|
||||
position: static;
|
||||
.wp-filter .search-form {
|
||||
float: none;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
.filter-drawer {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
.filter-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-group li {
|
||||
.filter-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.wp-filter-group,
|
||||
.wp-filter-group li {
|
||||
.filter-group,
|
||||
.filter-group li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1288,8 +1288,8 @@ themes.view.InstallerSearch = themes.view.Search.extend({
|
|||
request.tag = [ value.slice( 4 ) ];
|
||||
}
|
||||
|
||||
$( '.wp-filter-link.current' ).removeClass( 'current' );
|
||||
$( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
|
||||
$( '.filter-links li > a.current' ).removeClass( 'current' );
|
||||
$( 'body' ).removeClass( 'show-filters filters-applied' );
|
||||
|
||||
// Get the themes by sending Ajax POST request to api.wordpress.org/themes
|
||||
// or searching the local cache
|
||||
|
|
@ -1306,14 +1306,13 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
// Register events for sorting and filters in theme-navigation
|
||||
events: {
|
||||
'click .wp-filter-link': 'onSort',
|
||||
'click .filter-links li > a': 'onSort',
|
||||
'click .theme-filter': 'onFilter',
|
||||
'click .wp-filter-drawer-toggle': 'moreFilters',
|
||||
'click .wp-filter-drawer .apply-filters': 'applyFilters',
|
||||
'click .wp-filter-group [type="checkbox"]': 'addFilter',
|
||||
'click .wp-filter-drawer .clear-filters': 'clearFilters',
|
||||
'click .wp-filter-group-title': 'filterSection',
|
||||
'click .wp-filter-by a': 'backToFilters'
|
||||
'click .drawer-toggle': 'moreFilters',
|
||||
'click .filter-drawer .apply-filters': 'applyFilters',
|
||||
'click .filter-group [type="checkbox"]': 'addFilter',
|
||||
'click .filter-drawer .clear-filters': 'clearFilters',
|
||||
'click .filtered-by': 'backToFilters'
|
||||
},
|
||||
|
||||
// Initial render method
|
||||
|
|
@ -1386,7 +1385,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
event.preventDefault();
|
||||
|
||||
$( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
|
||||
$( 'body' ).removeClass( 'filters-applied show-filters' );
|
||||
|
||||
// Bail if this is already active
|
||||
if ( $el.hasClass( this.activeClass ) ) {
|
||||
|
|
@ -1402,7 +1401,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
sort: function( sort ) {
|
||||
this.clearSearch();
|
||||
|
||||
$( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
|
||||
$( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
|
||||
$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
|
||||
|
||||
this.browse( sort );
|
||||
|
|
@ -1419,7 +1418,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
return;
|
||||
}
|
||||
|
||||
$( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass );
|
||||
$( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
|
||||
$el.addClass( this.activeClass );
|
||||
|
||||
if ( ! filter ) {
|
||||
|
|
@ -1446,14 +1445,14 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
var name,
|
||||
tags = this.filtersChecked(),
|
||||
request = { tag: tags },
|
||||
filteringBy = $( '.wp-filter-by .tags' );
|
||||
filteringBy = $( '.filtered-by .tags' );
|
||||
|
||||
if ( event ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$( 'body' ).addClass( 'filters-applied' );
|
||||
$( '.wp-filter-link.current' ).removeClass( 'current' );
|
||||
$( '.filter-links li > a.current' ).removeClass( 'current' );
|
||||
filteringBy.empty();
|
||||
|
||||
_.each( tags, function( tag ) {
|
||||
|
|
@ -1469,7 +1468,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
// Get the checked filters
|
||||
// @return {array} of tags or false
|
||||
filtersChecked: function() {
|
||||
var items = $( '.wp-filter-group' ).find( ':checkbox' ),
|
||||
var items = $( '.filter-group' ).find( ':checkbox' ),
|
||||
tags = [];
|
||||
|
||||
_.each( items.filter( ':checked' ), function( item ) {
|
||||
|
|
@ -1478,14 +1477,14 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
// When no filters are checked, restore initial state and return
|
||||
if ( tags.length === 0 ) {
|
||||
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' );
|
||||
$( '.wp-filter-drawer .clear-filters' ).hide();
|
||||
$( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
|
||||
$( '.filter-drawer .clear-filters' ).hide();
|
||||
$( 'body' ).removeClass( 'filters-applied' );
|
||||
return false;
|
||||
}
|
||||
|
||||
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
|
||||
$( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
|
||||
$( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
|
||||
$( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
|
||||
|
||||
return tags;
|
||||
},
|
||||
|
|
@ -1494,7 +1493,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
// Overwrite search container class to append search
|
||||
// in new location
|
||||
searchContainer: $( '.wp-filter' ),
|
||||
searchContainer: $( '.wp-filter .search-form' ),
|
||||
|
||||
uploader: function() {
|
||||
$( 'a.upload' ).on( 'click', function( event ) {
|
||||
|
|
@ -1519,25 +1518,20 @@ themes.view.Installer = themes.view.Appearance.extend({
|
|||
|
||||
// If the filters section is opened and filters are checked
|
||||
// run the relevant query collapsing to filtered-by state
|
||||
if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
|
||||
if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
|
||||
return this.addFilter();
|
||||
}
|
||||
|
||||
this.clearSearch();
|
||||
|
||||
themes.router.navigate( themes.router.baseUrl( '' ) );
|
||||
$( 'body' ).toggleClass( 'show-filter-drawer' );
|
||||
},
|
||||
|
||||
// Expand/collapse each individual filter section
|
||||
filterSection: function() {
|
||||
$( event.target ).parent().toggleClass( 'open' );
|
||||
$( 'body' ).toggleClass( 'show-filters' );
|
||||
},
|
||||
|
||||
// Clears all the checked filters
|
||||
// @uses filtersChecked()
|
||||
clearFilters: function( event ) {
|
||||
var items = $( '.wp-filter-group' ).find( ':checkbox' ),
|
||||
var items = $( '.filter-group' ).find( ':checkbox' ),
|
||||
self = this;
|
||||
|
||||
event.preventDefault();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -135,20 +135,22 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
|||
</div>
|
||||
|
||||
<div class="wp-filter">
|
||||
<div class="wp-filter-count">
|
||||
<div class="filter-count">
|
||||
<span class="count theme-count"></span>
|
||||
</div>
|
||||
|
||||
<ul class="wp-filter-links">
|
||||
<li><a class="wp-filter-link" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
|
||||
<li><a class="wp-filter-link" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
|
||||
<li><a class="wp-filter-link" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
|
||||
<ul class="filter-links">
|
||||
<li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
|
||||
<li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
|
||||
<li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
|
||||
</ul>
|
||||
|
||||
<a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
|
||||
<a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
|
||||
|
||||
<div class="wp-filter-drawer">
|
||||
<div class="wp-filter-drawer-buttons">
|
||||
<div class="search-form"></div>
|
||||
|
||||
<div class="filter-drawer">
|
||||
<div class="buttons">
|
||||
<a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
|
||||
<a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
|
||||
</div>
|
||||
|
|
@ -156,12 +158,12 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
|||
$feature_list = get_theme_feature_list();
|
||||
foreach ( $feature_list as $feature_name => $features ) {
|
||||
if ( $feature_name === 'Features' || $feature_name === __( 'Features' ) ) { // hack hack hack
|
||||
echo '<div class="wp-filter-group wp-filter-group-wide">';
|
||||
echo '<div class="filter-group wide">';
|
||||
} else {
|
||||
echo '<div class="wp-filter-group">';
|
||||
echo '<div class="filter-group">';
|
||||
}
|
||||
$feature_name = esc_html( $feature_name );
|
||||
echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
|
||||
echo '<h4>' . $feature_name . '</h4>';
|
||||
echo '<ol class="feature-group">';
|
||||
foreach ( $features as $feature => $feature_name ) {
|
||||
$feature = esc_attr( $feature );
|
||||
|
|
@ -172,14 +174,14 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
|||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
<div class="wp-filter-by">
|
||||
<div class="filtered-by">
|
||||
<span><?php _e( 'Filtering by:' ); ?></span>
|
||||
<div class="tags"></div>
|
||||
<a href="#"><?php _e( 'Edit' ); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-browser wp-filter-content"></div>
|
||||
<div class="theme-browser content-filterable"></div>
|
||||
<div class="theme-install-overlay wp-full-overlay expanded"></div>
|
||||
|
||||
<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
|
||||
<div class="wrap">
|
||||
<h2><?php esc_html_e( 'Themes' ); ?>
|
||||
<span class="wp-title-count theme-count"><?php echo count( $themes ); ?></span>
|
||||
<span class="title-count theme-count"><?php echo count( $themes ); ?></span>
|
||||
<?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
|
||||
<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>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue