Improvements to responsive styling on my-sites.php.

* Ensure that floated elements break to a new line at the end of a row.
* Allow enough vertical space for long site titles.
* Give more breathing room to cells at narrow widths.

Fixes #31685.
Built from https://develop.svn.wordpress.org/trunk@33135


git-svn-id: http://core.svn.wordpress.org/trunk@33106 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Boone Gorges 2015-07-08 21:02:24 +00:00
parent 3f64c0ee9e
commit e8c6340f67
5 changed files with 59 additions and 17 deletions

View File

@ -3042,15 +3042,21 @@ img {
display: block;
overflow: auto;
zoom: 1;
border: 1px solid #e5e5e5;
}
.my-sites li {
display: block;
padding: 8px 1%;
padding: 8px 3%;
min-height: 130px;
margin: 0;
}
@media only screen and (max-width: 599px) {
.my-sites li {
min-height: 0;
}
}
@media only screen and (min-width: 600px) {
.my-sites.striped li {
background-color: #fff;
@ -3070,11 +3076,14 @@ img {
@media only screen and (min-width: 600px) and (max-width: 699px) {
.my-sites li{
float: right;
width: 48%;
width: 44%;
}
.my-sites.striped li {
background-color: #fff;
}
.my-sites.striped li:nth-of-type(2n+1) {
clear: right;
}
.my-sites.striped li:nth-of-type(2n+2):after {
content: none;
}
@ -3088,7 +3097,7 @@ img {
@media only screen and (min-width: 700px) and (max-width: 1199px) {
.my-sites li {
float: right;
width: 31.333333%;
width: 27.333333%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(3n+3):after {
@ -3104,9 +3113,13 @@ img {
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.my-sites li {
float: right;
width: 23%;
width: 21%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(4n+1) {
clear: right;
}
.my-sites.striped li:nth-of-type(4n+4):after {
content: none;
}
@ -3121,9 +3134,13 @@ img {
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.my-sites li {
float: right;
width: 18%;
width: 16%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(5n+1) {
clear: right;
}
.my-sites.striped li:nth-of-type(5n+5):after {
content: none;
}
@ -3139,9 +3156,13 @@ img {
@media only screen and (min-width: 1600px) {
.my-sites li {
float: right;
width: 14.666666%;
width: 12.666666%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(6n+1) {
clear: right;
}
.my-sites.striped li:nth-of-type(6n+6):after {
content: none;
}

View File

@ -3042,15 +3042,21 @@ img {
display: block;
overflow: auto;
zoom: 1;
border: 1px solid #e5e5e5;
}
.my-sites li {
display: block;
padding: 8px 1%;
padding: 8px 3%;
min-height: 130px;
margin: 0;
}
@media only screen and (max-width: 599px) {
.my-sites li {
min-height: 0;
}
}
@media only screen and (min-width: 600px) {
.my-sites.striped li {
background-color: #fff;
@ -3070,11 +3076,14 @@ img {
@media only screen and (min-width: 600px) and (max-width: 699px) {
.my-sites li{
float: left;
width: 48%;
width: 44%;
}
.my-sites.striped li {
background-color: #fff;
}
.my-sites.striped li:nth-of-type(2n+1) {
clear: left;
}
.my-sites.striped li:nth-of-type(2n+2):after {
content: none;
}
@ -3088,7 +3097,7 @@ img {
@media only screen and (min-width: 700px) and (max-width: 1199px) {
.my-sites li {
float: left;
width: 31.333333%;
width: 27.333333%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(3n+3):after {
@ -3104,9 +3113,13 @@ img {
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.my-sites li {
float: left;
width: 23%;
width: 21%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(4n+1) {
clear: left;
}
.my-sites.striped li:nth-of-type(4n+4):after {
content: none;
}
@ -3121,9 +3134,13 @@ img {
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.my-sites li {
float: left;
width: 18%;
width: 16%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(5n+1) {
clear: left;
}
.my-sites.striped li:nth-of-type(5n+5):after {
content: none;
}
@ -3139,9 +3156,13 @@ img {
@media only screen and (min-width: 1600px) {
.my-sites li {
float: left;
width: 14.666666%;
width: 12.666666%;
padding: 8px 2%;
background-color: #fff;
}
.my-sites.striped li:nth-of-type(6n+1) {
clear: left;
}
.my-sites.striped li:nth-of-type(6n+6):after {
content: none;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta1-33134';
$wp_version = '4.3-beta1-33135';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.