mirror of
https://github.com/WordPress/WordPress.git
synced 2025-01-03 06:57:35 +01:00
Use more generic, reusable CSS for the filter bar on Add Themes. This will allow us to reuse the UI in other places, such as the Media Library. props paulwilde. fixes #28794.
Built from https://develop.svn.wordpress.org/trunk@29217 git-svn-id: http://core.svn.wordpress.org/trunk@29001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
parent
47119960de
commit
c4b561bb6c
@ -923,6 +923,314 @@ th.action-links {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 12px 0 25px;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
border: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wp-filter a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-filter-count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.wp-filter-count .count {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
padding: 4px 10px;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-links {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-links li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-link {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 4px solid #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-links .current {
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.wp-filter-search {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
padding: 3px 5px;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:before {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
content: "\f111";
|
||||
margin: 0 0 0 5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #777;
|
||||
-webkit-transition: color .1s ease-in 0;
|
||||
transition: color .1s ease-in 0;
|
||||
font-family: "dashicons";
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-decoration: inherit;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
display: none;
|
||||
margin: 0 -20px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:hover,
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-link.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
margin: 0 0 0 1%;
|
||||
padding: 10px;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.wp-filter-group-wide {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.wp-filter-group-title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-drawer ol {
|
||||
margin: 20px 0 0;
|
||||
list-style-type: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wp-filter-drawer li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 5px 0;
|
||||
padding-left: 25px;
|
||||
width: 160px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-filter .wp-filter-drawer-buttons .button span {
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
}
|
||||
|
||||
.wp-filter .button.clear-filters {
|
||||
display: none;
|
||||
margin: 0 10px 20px 0;
|
||||
}
|
||||
|
||||
.wp-filter-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-by a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wp-filter-by .tag {
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-group,
|
||||
body.filters-applied .wp-filter-drawer a.button,
|
||||
body.filters-applied .wp-filter-drawer br {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-by {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-drawer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-content,
|
||||
body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer.filters-applied .wp-filter-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-content .wp-filter-content,
|
||||
.error .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-content .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.wp-filter-search {
|
||||
position: static;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.wp-filter-group,
|
||||
.wp-filter-group li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
4.0 - Notifications
|
||||
|
||||
@ -923,6 +923,314 @@ th.action-links {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 12px 0 25px;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
border: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.wp-filter a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-filter-count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.wp-filter-count .count {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
padding: 4px 10px;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-links {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-links li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-link {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 4px solid #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-links .current {
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.wp-filter-search {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
padding: 3px 5px;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:before {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
content: "\f111";
|
||||
margin: 0 5px 0 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #777;
|
||||
-webkit-transition: color .1s ease-in 0;
|
||||
transition: color .1s ease-in 0;
|
||||
font-family: "dashicons";
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-decoration: inherit;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-toggle.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
display: none;
|
||||
margin: 0 -20px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:hover,
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-link.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle {
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
background: #777;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-drawer-toggle:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin: 0 1% 0 0;
|
||||
padding: 10px;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
.wp-filter-group-wide {
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.wp-filter-group-title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-drawer ol {
|
||||
margin: 20px 0 0;
|
||||
list-style-type: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wp-filter-drawer li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 5px 0;
|
||||
padding-right: 25px;
|
||||
width: 160px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.wp-filter-drawer-buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-filter .wp-filter-drawer-buttons .button span {
|
||||
display: inline-block;
|
||||
opacity: 0.8;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
}
|
||||
|
||||
.wp-filter .button.clear-filters {
|
||||
display: none;
|
||||
margin: 0 0 20px 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-filter-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wp-filter-by a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.wp-filter-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.wp-filter-by .tag {
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-group,
|
||||
body.filters-applied .wp-filter-drawer a.button,
|
||||
body.filters-applied .wp-filter-drawer br {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-by {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.filters-applied .wp-filter-drawer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body.show-filter-drawer .wp-filter-content,
|
||||
body.show-filter-drawer.filters-applied.loading-content .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.show-filter-drawer.filters-applied .wp-filter-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-content .wp-filter-content,
|
||||
.error .wp-filter-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-content .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.wp-filter-search {
|
||||
position: static;
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-drawer {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.wp-filter-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-filter-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.wp-filter-group,
|
||||
.wp-filter-group li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
4.0 - Notifications
|
||||
|
||||
@ -25,23 +25,16 @@
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.themes-php .wrap .theme-count,
|
||||
.theme-navigation .theme-count {
|
||||
color: #fff;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
font-size: 14px;
|
||||
padding: 4px 10px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
margin-left: 20px;
|
||||
/* Search form */
|
||||
.themes-php .wp-filter-search {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.theme-navigation a {
|
||||
text-decoration:none;
|
||||
top: -2px;
|
||||
right: 20px;
|
||||
margin: 0;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Position admin messages */
|
||||
@ -401,19 +394,6 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*
|
||||
* The search form
|
||||
*/
|
||||
.themes-php .theme-search {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme Overlay
|
||||
* Shown when clicking a theme
|
||||
@ -1025,7 +1005,7 @@ body.folded .theme-overlay .theme-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.themes-php .theme-search {
|
||||
.themes-php .wp-filter-search {
|
||||
float: none;
|
||||
clear: both;
|
||||
right: 0;
|
||||
@ -1088,21 +1068,6 @@ body.folded .theme-overlay .theme-wrap {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-navigation {
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
margin: 20px 0 30px;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.theme-install-php a.upload,
|
||||
.theme-install-php a.browse-themes {
|
||||
cursor: pointer;
|
||||
@ -1119,7 +1084,7 @@ body.folded .theme-overlay .theme-wrap {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
margin: 0px 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -1144,191 +1109,11 @@ body.show-upload-theme .upload-theme {
|
||||
padding: 40px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
body.show-upload-theme .upload-theme + .theme-navigation,
|
||||
body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
||||
body.show-upload-theme .upload-theme + .wp-filter,
|
||||
body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
.theme-navigation .theme-count {
|
||||
margin-right: 0;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
.theme-count + .theme-section {
|
||||
margin-right: 60px;
|
||||
}
|
||||
.theme-section,
|
||||
.theme-filter {
|
||||
border-bottom: 4px solid #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.theme-section.current,
|
||||
.theme-filter.current {
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
.theme-top-filters {
|
||||
display: inline-block;
|
||||
}
|
||||
.theme-navigation .more-filters {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
body.more-filters-opened .more-filters {
|
||||
background: #777;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.more-filters-opened .more-filters:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.more-filters-opened .more-filters:hover,
|
||||
body.more-filters-opened .more-filters:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
.theme-install-php .theme-search {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 9px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
width: 280px;
|
||||
}
|
||||
.more-filters:before {
|
||||
color: #777;
|
||||
text-align: center;
|
||||
margin: 0 0 0 5px;
|
||||
content: "\f111";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
font-family: "dashicons";
|
||||
text-decoration: inherit;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: top;
|
||||
-webkit-transition: color .1s ease-in 0;
|
||||
transition: color .1s ease-in 0;
|
||||
text-align: center;
|
||||
}
|
||||
.more-filters.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
.more-filters-container {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 0 -20px;
|
||||
background: #fafafa;
|
||||
}
|
||||
body.more-filters-opened .more-filters-container {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.more-filters-opened .theme-section.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
body.more-filters-opened .theme-browser,
|
||||
body.more-filters-opened.filters-applied.loading-themes .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
body.more-filters-opened.filters-applied .theme-browser {
|
||||
display: block;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
margin: 0 0 0 1%;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
padding: 10px;
|
||||
}
|
||||
.more-filters-container .wide-filters-group {
|
||||
width: 38%;
|
||||
}
|
||||
.more-filters-container .feature-name {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.more-filters-container ol {
|
||||
list-style-type: none;
|
||||
margin: 20px 0 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.more-filters-container li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
list-style-type: none;
|
||||
margin: 5px 0;
|
||||
padding-left: 25px;
|
||||
width: 160px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .apply-filters {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .clear-filters {
|
||||
display: none;
|
||||
margin: 0 10px 20px 0;
|
||||
}
|
||||
.more-filters-container .apply-filters span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.more-filters-container .filtering-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.more-filters-container .filtering-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.more-filters-container .filtering-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
.more-filters-container .filtering-by .tag {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
font-size: 11px;
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.more-filters-container .filtering-by a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filters-group,
|
||||
body.filters-applied .more-filters-container a.button,
|
||||
body.filters-applied .more-filters-container br {
|
||||
display: none !important;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filtering-by {
|
||||
display: block;
|
||||
}
|
||||
body.filters-applied .more-filters-container {
|
||||
padding: 20px;
|
||||
}
|
||||
p.no-themes {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
@ -1345,20 +1130,11 @@ body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.theme-install-php .theme-search {
|
||||
margin: 20px 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.upload-theme .wp-upload-form {
|
||||
margin: 20px 0;
|
||||
max-width: 100%;
|
||||
@ -1368,23 +1144,6 @@ body.show-upload-theme p.no-themes {
|
||||
padding: 20px 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container .filters-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.more-filters-container .filters-group {
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container .filters-group li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
@ -1448,15 +1207,6 @@ body.show-upload-theme p.no-themes {
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
.loading-themes .theme-browser,
|
||||
.error .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
.loading-themes .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
16.3 - Custom Header Screen
|
||||
|
||||
@ -25,23 +25,16 @@
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.themes-php .wrap .theme-count,
|
||||
.theme-navigation .theme-count {
|
||||
color: #fff;
|
||||
-webkit-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
background: #777;
|
||||
font-size: 14px;
|
||||
padding: 4px 10px;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
margin-right: 20px;
|
||||
/* Search form */
|
||||
.themes-php .wp-filter-search {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.theme-navigation a {
|
||||
text-decoration:none;
|
||||
top: -2px;
|
||||
left: 20px;
|
||||
margin: 0;
|
||||
width: 280px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Position admin messages */
|
||||
@ -401,19 +394,6 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/*
|
||||
* The search form
|
||||
*/
|
||||
.themes-php .theme-search {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme Overlay
|
||||
* Shown when clicking a theme
|
||||
@ -1025,7 +1005,7 @@ body.folded .theme-overlay .theme-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.themes-php .theme-search {
|
||||
.themes-php .wp-filter-search {
|
||||
float: none;
|
||||
clear: both;
|
||||
left: 0;
|
||||
@ -1088,21 +1068,6 @@ body.folded .theme-overlay .theme-wrap {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.theme-navigation {
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
margin: 20px 0 30px;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.theme-install-php a.upload,
|
||||
.theme-install-php a.browse-themes {
|
||||
cursor: pointer;
|
||||
@ -1119,7 +1084,7 @@ body.folded .theme-overlay .theme-wrap {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
margin: 0px 0 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -1144,191 +1109,11 @@ body.show-upload-theme .upload-theme {
|
||||
padding: 40px 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
body.show-upload-theme .upload-theme + .theme-navigation,
|
||||
body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
|
||||
body.show-upload-theme .upload-theme + .wp-filter,
|
||||
body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
.theme-navigation .theme-count {
|
||||
margin-left: 0;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
.theme-count + .theme-section {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.theme-section,
|
||||
.theme-filter {
|
||||
border-bottom: 4px solid #fff;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.theme-section.current,
|
||||
.theme-filter.current {
|
||||
border-bottom: 4px solid #666;
|
||||
color: #222;
|
||||
}
|
||||
.theme-top-filters {
|
||||
display: inline-block;
|
||||
}
|
||||
.theme-navigation .more-filters {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
body.more-filters-opened .more-filters {
|
||||
background: #777;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.more-filters-opened .more-filters:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.more-filters-opened .more-filters:hover,
|
||||
body.more-filters-opened .more-filters:focus {
|
||||
background: rgb(46, 162, 204);
|
||||
}
|
||||
|
||||
.theme-install-php .theme-search {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
width: 280px;
|
||||
}
|
||||
.more-filters:before {
|
||||
color: #777;
|
||||
text-align: center;
|
||||
margin: 0 5px 0 0;
|
||||
content: "\f111";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
font-family: "dashicons";
|
||||
text-decoration: inherit;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
vertical-align: top;
|
||||
-webkit-transition: color .1s ease-in 0;
|
||||
transition: color .1s ease-in 0;
|
||||
text-align: center;
|
||||
}
|
||||
.more-filters.current:before {
|
||||
color: #fff;
|
||||
}
|
||||
.more-filters-container {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
margin: 0 -20px;
|
||||
background: #fafafa;
|
||||
}
|
||||
body.more-filters-opened .more-filters-container {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.more-filters-opened .theme-section.current {
|
||||
border-bottom: none;
|
||||
}
|
||||
body.more-filters-opened .theme-browser,
|
||||
body.more-filters-opened.filters-applied.loading-themes .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
body.more-filters-opened.filters-applied .theme-browser {
|
||||
display: block;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 19%;
|
||||
background: #fff;
|
||||
margin: 0 1% 0 0;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
padding: 10px;
|
||||
}
|
||||
.more-filters-container .wide-filters-group {
|
||||
width: 38%;
|
||||
}
|
||||
.more-filters-container .feature-name {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
.more-filters-container ol {
|
||||
list-style-type: none;
|
||||
margin: 20px 0 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.more-filters-container li {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
list-style-type: none;
|
||||
margin: 5px 0;
|
||||
padding-right: 25px;
|
||||
width: 160px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .apply-filters {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.theme-navigation .more-filters-container .clear-filters {
|
||||
display: none;
|
||||
margin: 0 0 20px 10px;
|
||||
}
|
||||
.more-filters-container .apply-filters span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
text-indent: 10px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.more-filters-container .filtering-by {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.more-filters-container .filtering-by > span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.more-filters-container .filtering-by .tags {
|
||||
display: inline;
|
||||
}
|
||||
.more-filters-container .filtering-by .tag {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
|
||||
font-size: 11px;
|
||||
margin: 0 5px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.more-filters-container .filtering-by a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filters-group,
|
||||
body.filters-applied .more-filters-container a.button,
|
||||
body.filters-applied .more-filters-container br {
|
||||
display: none !important;
|
||||
}
|
||||
body.filters-applied .more-filters-container .filtering-by {
|
||||
display: block;
|
||||
}
|
||||
body.filters-applied .more-filters-container {
|
||||
padding: 20px;
|
||||
}
|
||||
p.no-themes {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
@ -1345,20 +1130,11 @@ body.show-upload-theme p.no-themes {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.theme-install-php .add-new-theme {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.theme-install-php .theme-search {
|
||||
margin: 20px 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.upload-theme .wp-upload-form {
|
||||
margin: 20px 0;
|
||||
max-width: 100%;
|
||||
@ -1368,23 +1144,6 @@ body.show-upload-theme p.no-themes {
|
||||
padding: 20px 0 0;
|
||||
text-align: left;
|
||||
}
|
||||
.more-filters-container .filters-group {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container .filters-group li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 782px) {
|
||||
.more-filters-container .filters-group {
|
||||
width: 100%;
|
||||
}
|
||||
.more-filters-container .filters-group li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.rating {
|
||||
@ -1448,15 +1207,6 @@ body.show-upload-theme p.no-themes {
|
||||
line-height: 20px;
|
||||
color: #999;
|
||||
}
|
||||
.loading-themes .theme-browser,
|
||||
.error .theme-browser {
|
||||
display: none;
|
||||
}
|
||||
.loading-themes .spinner {
|
||||
display: block;
|
||||
margin: 40px auto 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
16.3 - Custom Header Screen
|
||||
|
||||
2
wp-admin/css/wp-admin-rtl.min.css
vendored
2
wp-admin/css/wp-admin-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
2
wp-admin/css/wp-admin.min.css
vendored
2
wp-admin/css/wp-admin.min.css
vendored
File diff suppressed because one or more lines are too long
@ -105,7 +105,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
|
||||
// Render and append after screen title
|
||||
view.render();
|
||||
this.searchContainer
|
||||
.append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
|
||||
.append( $.parseHTML( '<label class="screen-reader-text" for="wp-filter-search-input">' + l10n.search + '</label>' ) )
|
||||
.append( view.el );
|
||||
},
|
||||
|
||||
@ -342,7 +342,7 @@ themes.Collection = Backbone.Collection.extend({
|
||||
beforeSend: function() {
|
||||
if ( ! paginated ) {
|
||||
// Spin it
|
||||
$( 'body' ).addClass( 'loading-themes' ).removeClass( 'no-results' );
|
||||
$( 'body' ).addClass( 'loading-content' ).removeClass( 'no-results' );
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1080,8 +1080,8 @@ themes.view.Themes = wp.Backbone.View.extend({
|
||||
themes.view.Search = wp.Backbone.View.extend({
|
||||
|
||||
tagName: 'input',
|
||||
className: 'theme-search',
|
||||
id: 'theme-search-input',
|
||||
className: 'wp-filter-search',
|
||||
id: 'wp-filter-search-input',
|
||||
searching: false,
|
||||
|
||||
attributes: {
|
||||
@ -1168,11 +1168,11 @@ themes.Router = Backbone.Router.extend({
|
||||
},
|
||||
|
||||
search: function( query ) {
|
||||
$( '.theme-search' ).val( query );
|
||||
$( '.wp-filter-search' ).val( query );
|
||||
},
|
||||
|
||||
themes: function() {
|
||||
$( '.theme-search' ).val( '' );
|
||||
$( '.wp-filter-search' ).val( '' );
|
||||
},
|
||||
|
||||
navigate: function() {
|
||||
@ -1229,7 +1229,7 @@ themes.Run = {
|
||||
|
||||
// Handles search route event
|
||||
themes.router.on( 'route:search', function() {
|
||||
$( '.theme-search' ).trigger( 'keyup' );
|
||||
$( '.wp-filter-search' ).trigger( 'keyup' );
|
||||
});
|
||||
|
||||
this.extraRoutes();
|
||||
@ -1288,8 +1288,8 @@ themes.view.InstallerSearch = themes.view.Search.extend({
|
||||
request.tag = [ value.slice( 4 ) ];
|
||||
}
|
||||
|
||||
$( '.theme-section.current' ).removeClass( 'current' );
|
||||
$( 'body' ).removeClass( 'more-filters-opened filters-applied' );
|
||||
$( '.wp-filter-link.current' ).removeClass( 'current' );
|
||||
$( 'body' ).removeClass( 'show-filter-drawer filters-applied' );
|
||||
|
||||
// Get the themes by sending Ajax POST request to api.wordpress.org/themes
|
||||
// or searching the local cache
|
||||
@ -1306,14 +1306,14 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
|
||||
// Register events for sorting and filters in theme-navigation
|
||||
events: {
|
||||
'click .theme-section': 'onSort',
|
||||
'click .wp-filter-link': 'onSort',
|
||||
'click .theme-filter': 'onFilter',
|
||||
'click .more-filters': 'moreFilters',
|
||||
'click .apply-filters': 'applyFilters',
|
||||
'click [type="checkbox"]': 'addFilter',
|
||||
'click .clear-filters': 'clearFilters',
|
||||
'click .feature-name': 'filterSection',
|
||||
'click .filtering-by a': 'backToFilters'
|
||||
'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'
|
||||
},
|
||||
|
||||
// Initial render method
|
||||
@ -1343,12 +1343,12 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
});
|
||||
|
||||
this.listenTo( this.collection, 'query:success', function() {
|
||||
$( 'body' ).removeClass( 'loading-themes' );
|
||||
$( 'body' ).removeClass( 'loading-content' );
|
||||
$( '.theme-browser' ).find( 'div.error' ).remove();
|
||||
});
|
||||
|
||||
this.listenTo( this.collection, 'query:fail', function() {
|
||||
$( 'body' ).removeClass( 'loading-themes' );
|
||||
$( 'body' ).removeClass( 'loading-content' );
|
||||
$( '.theme-browser' ).find( 'div.error' ).remove();
|
||||
$( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p></div>' );
|
||||
});
|
||||
@ -1386,7 +1386,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
$( 'body' ).removeClass( 'filters-applied more-filters-opened' );
|
||||
$( 'body' ).removeClass( 'filters-applied show-filter-drawer' );
|
||||
|
||||
// Bail if this is already active
|
||||
if ( $el.hasClass( this.activeClass ) ) {
|
||||
@ -1402,7 +1402,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
sort: function( sort ) {
|
||||
this.clearSearch();
|
||||
|
||||
$( '.theme-section, .theme-filter' ).removeClass( this.activeClass );
|
||||
$( '.wp-filter-link, .theme-filter' ).removeClass( this.activeClass );
|
||||
$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
|
||||
|
||||
this.browse( sort );
|
||||
@ -1419,7 +1419,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
return;
|
||||
}
|
||||
|
||||
$( '.theme-filter, .theme-section' ).removeClass( this.activeClass );
|
||||
$( '.wp-filter-link, .theme-section' ).removeClass( this.activeClass );
|
||||
$el.addClass( this.activeClass );
|
||||
|
||||
if ( ! filter ) {
|
||||
@ -1446,18 +1446,18 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
var name,
|
||||
tags = this.filtersChecked(),
|
||||
request = { tag: tags },
|
||||
filteringBy = $( '.filtering-by .tags' );
|
||||
filteringBy = $( '.wp-filter-by .tags' );
|
||||
|
||||
if ( event ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$( 'body' ).addClass( 'filters-applied' );
|
||||
$( '.theme-section.current' ).removeClass( 'current' );
|
||||
$( '.wp-filter-link.current' ).removeClass( 'current' );
|
||||
filteringBy.empty();
|
||||
|
||||
_.each( tags, function( tag ) {
|
||||
name = $( 'label[for="feature-id-' + tag + '"]' ).text();
|
||||
name = $( 'label[for="filter-id-' + tag + '"]' ).text();
|
||||
filteringBy.append( '<span class="tag">' + name + '</span>' );
|
||||
});
|
||||
|
||||
@ -1469,7 +1469,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
// Get the checked filters
|
||||
// @return {array} of tags or false
|
||||
filtersChecked: function() {
|
||||
var items = $( '.feature-group' ).find( ':checkbox' ),
|
||||
var items = $( '.wp-filter-group' ).find( ':checkbox' ),
|
||||
tags = [];
|
||||
|
||||
_.each( items.filter( ':checked' ), function( item ) {
|
||||
@ -1478,14 +1478,14 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
|
||||
// When no filters are checked, restore initial state and return
|
||||
if ( tags.length === 0 ) {
|
||||
$( '.apply-filters' ).find( 'span' ).text( '' );
|
||||
$( '.clear-filters' ).hide();
|
||||
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( '' );
|
||||
$( '.wp-filter-drawer .clear-filters' ).hide();
|
||||
$( 'body' ).removeClass( 'filters-applied' );
|
||||
return false;
|
||||
}
|
||||
|
||||
$( '.apply-filters' ).find( 'span' ).text( tags.length );
|
||||
$( '.clear-filters' ).css( 'display', 'inline-block' );
|
||||
$( '.wp-filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
|
||||
$( '.wp-filter-drawer .clear-filters' ).css( 'display', 'inline-block' );
|
||||
|
||||
return tags;
|
||||
},
|
||||
@ -1494,7 +1494,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
|
||||
// Overwrite search container class to append search
|
||||
// in new location
|
||||
searchContainer: $( '.theme-navigation' ),
|
||||
searchContainer: $( '.wp-filter' ),
|
||||
|
||||
uploader: function() {
|
||||
$( 'a.upload' ).on( 'click', function( event ) {
|
||||
@ -1519,14 +1519,14 @@ 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( 'more-filters-opened' ) && this.filtersChecked() ) {
|
||||
if ( $( 'body' ).hasClass( 'show-filter-drawer' ) && this.filtersChecked() ) {
|
||||
return this.addFilter();
|
||||
}
|
||||
|
||||
this.clearSearch();
|
||||
|
||||
themes.router.navigate( themes.router.baseUrl( '' ) );
|
||||
$( 'body' ).toggleClass( 'more-filters-opened' );
|
||||
$( 'body' ).toggleClass( 'show-filter-drawer' );
|
||||
},
|
||||
|
||||
// Expand/collapse each individual filter section
|
||||
@ -1537,7 +1537,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
// Clears all the checked filters
|
||||
// @uses filtersChecked()
|
||||
clearFilters: function( event ) {
|
||||
var items = $( '.feature-group' ).find( ':checkbox' ),
|
||||
var items = $( '.wp-filter-group' ).find( ':checkbox' ),
|
||||
self = this;
|
||||
|
||||
event.preventDefault();
|
||||
@ -1557,7 +1557,7 @@ themes.view.Installer = themes.view.Appearance.extend({
|
||||
},
|
||||
|
||||
clearSearch: function() {
|
||||
$( '#theme-search-input').val( '' );
|
||||
$( '#wp-filter-search-input').val( '' );
|
||||
}
|
||||
});
|
||||
|
||||
@ -1575,7 +1575,7 @@ themes.InstallerRouter = Backbone.Router.extend({
|
||||
},
|
||||
|
||||
search: function( query ) {
|
||||
$( '.theme-search' ).val( query );
|
||||
$( '.wp-filter-search' ).val( query );
|
||||
},
|
||||
|
||||
navigate: function() {
|
||||
@ -1647,7 +1647,7 @@ themes.RunInstaller = {
|
||||
|
||||
// The `search` route event. The router populates the input field.
|
||||
themes.router.on( 'route:search', function() {
|
||||
$( '.theme-search' ).focus().trigger( 'keyup' );
|
||||
$( '.wp-filter-search' ).focus().trigger( 'keyup' );
|
||||
});
|
||||
|
||||
this.extraRoutes();
|
||||
|
||||
2
wp-admin/js/theme.min.js
vendored
2
wp-admin/js/theme.min.js
vendored
File diff suppressed because one or more lines are too long
@ -134,48 +134,52 @@ include(ABSPATH . 'wp-admin/admin-header.php');
|
||||
<?php install_themes_upload(); ?>
|
||||
</div>
|
||||
|
||||
<div class="theme-navigation">
|
||||
<span class="theme-count"></span>
|
||||
<a class="theme-section" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
|
||||
<a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
|
||||
<a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
|
||||
<div class="theme-top-filters">
|
||||
<!-- <span class="theme-filter" data-filter="photoblogging">Photography</span>
|
||||
<span class="theme-filter" data-filter="responsive-layout">Responsive</span> -->
|
||||
<a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
|
||||
<div class="wp-filter">
|
||||
<div class="wp-filter-count">
|
||||
<span class="count theme-count"></span>
|
||||
</div>
|
||||
<div class="more-filters-container">
|
||||
|
||||
<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>
|
||||
|
||||
<a class="wp-filter-drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
|
||||
|
||||
<div class="wp-filter-drawer">
|
||||
<div class="wp-filter-drawer-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>
|
||||
<br class="clear" />
|
||||
</div>
|
||||
<?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="filters-group wide-filters-group">';
|
||||
echo '<div class="wp-filter-group wp-filter-group-wide">';
|
||||
} else {
|
||||
echo '<div class="filters-group">';
|
||||
echo '<div class="wp-filter-group">';
|
||||
}
|
||||
$feature_name = esc_html( $feature_name );
|
||||
echo '<h4 class="feature-name">' . $feature_name . '</h4>';
|
||||
echo '<h4 class="wp-filter-group-title">' . $feature_name . '</h4>';
|
||||
echo '<ol class="feature-group">';
|
||||
foreach ( $features as $feature => $feature_name ) {
|
||||
$feature = esc_attr( $feature );
|
||||
echo '<li><input type="checkbox" id="feature-id-' . $feature . '" value="' . $feature . '" /> ';
|
||||
echo '<label for="feature-id-' . $feature . '">' . $feature_name . '</label></li>';
|
||||
echo '<li><input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
|
||||
echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label></li>';
|
||||
}
|
||||
echo '</ol>';
|
||||
echo '</div>';
|
||||
}
|
||||
?>
|
||||
<div class="filtering-by">
|
||||
<div class="wp-filter-by">
|
||||
<span><?php _e( 'Filtering by:' ); ?></span>
|
||||
<div class="tags"></div>
|
||||
<a href="#"><?php _e( 'Edit' ); ?></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-browser"></div>
|
||||
<div class="theme-browser wp-filter-content"></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="theme-count"><?php echo count( $themes ); ?></span>
|
||||
<span class="wp-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; ?>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.0-beta1-20140717';
|
||||
$wp_version = '4.0-beta1-20140718';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user