Theme Installer fixes:

* Better more filters section. props sonjanyc for some mockups.
 * Better handling of no results.
 * Use # for hrefs.

props matveb.
see #27055.

Built from https://develop.svn.wordpress.org/trunk@27896


git-svn-id: http://core.svn.wordpress.org/trunk@27727 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin
2014-04-01 22:20:14 +00:00
parent 6ec61c7506
commit d330c402c8
7 changed files with 277 additions and 32 deletions

View File

@@ -1150,8 +1150,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
display: inline-block;
margin: 0 10px;
padding: 15px 0;
-webkit-transition: border-color .1s ease-in;
transition: border-color .1s ease-in;
}
.theme-section.current,
.theme-filter.current {
@@ -1167,8 +1165,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
display: inline-block;
margin: 0 10px;
padding: 4px 6px;
-webkit-transition: color .1s ease-in, background .1s ease-in;
transition: color .1s ease-in, background .1s ease-in;
}
body.more-filters-opened .more-filters,
body.more-filters-opened .more-filters:before {
@@ -1177,8 +1173,6 @@ body.more-filters-opened .more-filters:before {
border-radius: 2px;
border: none;
color: #fff;
-webkit-transition: color .1s ease-in, background .1s ease-in;
transition: color .1s ease-in, background .1s ease-in;
}
body.more-filters-opened .more-filters:hover,
@@ -1230,20 +1224,97 @@ body.more-filters-opened .more-filters:focus:before {
body.more-filters-opened .more-filters-container {
display: block;
}
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: 20%;
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 .feature-name {
margin-top: 0;
margin: 0;
position: relative;
}
.more-filters-container ol {
list-style-type: none;
margin: 20px 0 0;
display: block;
font-size: 12px;
}
.theme-navigation .more-filters-container .apply-filters {
margin: 20px 0 0;
}
.theme-navigation .more-filters-container .clear-filters {
display: none;
margin: 20px 10px 0 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;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
font-size: 11px;
margin: 0 5px;
padding: 4px 8px;
}
body.filters-applied .more-filters-container .filters-group,
body.filters-applied .more-filters-container a,
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;
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
display: none;
}
body.no-results p.no-themes {
display: block;
}
body.show-upload-theme p.no-themes {
display: none !important;
}
.theme-install-php .add-new-theme {
display: none !important;
@@ -1268,13 +1339,21 @@ body.more-filters-opened .more-filters-container {
text-align: right;
}
.more-filters-container .filters-group {
width: 50%;
margin-bottom: 0;
margin-top: 5px;
width: 49%;
}
.more-filters-container .filters-group:nth-child(3n) {
clear: right;
}
}
@media only screen and (max-width: 782px) {
.more-filters-container .filters-group {
width: 100%;
}
}
.rating {
margin: 30px 0;
}
@@ -1717,6 +1796,7 @@ body.full-overlay-active {
float: right;
color: #777;
line-height: 20px;
max-width: 100%;
}
#theme-installer .wp-full-overlay-header {

View File

@@ -1150,8 +1150,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
display: inline-block;
margin: 0 10px;
padding: 15px 0;
-webkit-transition: border-color .1s ease-in;
transition: border-color .1s ease-in;
}
.theme-section.current,
.theme-filter.current {
@@ -1167,8 +1165,6 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
display: inline-block;
margin: 0 10px;
padding: 4px 6px;
-webkit-transition: color .1s ease-in, background .1s ease-in;
transition: color .1s ease-in, background .1s ease-in;
}
body.more-filters-opened .more-filters,
body.more-filters-opened .more-filters:before {
@@ -1177,8 +1173,6 @@ body.more-filters-opened .more-filters:before {
border-radius: 2px;
border: none;
color: #fff;
-webkit-transition: color .1s ease-in, background .1s ease-in;
transition: color .1s ease-in, background .1s ease-in;
}
body.more-filters-opened .more-filters:hover,
@@ -1230,20 +1224,97 @@ body.more-filters-opened .more-filters:focus:before {
body.more-filters-opened .more-filters-container {
display: block;
}
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: 20%;
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 .feature-name {
margin-top: 0;
margin: 0;
position: relative;
}
.more-filters-container ol {
list-style-type: none;
margin: 20px 0 0;
display: block;
font-size: 12px;
}
.theme-navigation .more-filters-container .apply-filters {
margin: 20px 0 0;
}
.theme-navigation .more-filters-container .clear-filters {
display: none;
margin: 20px 0 0 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;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
font-size: 11px;
margin: 0 5px;
padding: 4px 8px;
}
body.filters-applied .more-filters-container .filters-group,
body.filters-applied .more-filters-container a,
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;
font-style: normal;
margin: 0;
padding: 0;
text-align: center;
display: none;
}
body.no-results p.no-themes {
display: block;
}
body.show-upload-theme p.no-themes {
display: none !important;
}
.theme-install-php .add-new-theme {
display: none !important;
@@ -1268,13 +1339,21 @@ body.more-filters-opened .more-filters-container {
text-align: left;
}
.more-filters-container .filters-group {
width: 50%;
margin-bottom: 0;
margin-top: 5px;
width: 49%;
}
.more-filters-container .filters-group:nth-child(3n) {
clear: left;
}
}
@media only screen and (max-width: 782px) {
.more-filters-container .filters-group {
width: 100%;
}
}
.rating {
margin: 30px 0;
}
@@ -1717,6 +1796,7 @@ body.full-overlay-active {
float: left;
color: #777;
line-height: 20px;
max-width: 100%;
}
#theme-installer .wp-full-overlay-header {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long