Changeset 33135

Timestamp:

07/08/2015 09:01:40 PM (9 years ago)

Author:

boonebgorges

Message:

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.

File:

• trunk/src/wp-admin/css/common.css (modified) (6 diffs)

trunk/src/wp-admin/css/common.css

@@ -3043 +3043 @@
     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;
+    }
 }
 
@@ -3071 +3077 @@
     .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 {
@@ -3089 +3098 @@
     .my-sites li {
         float: left;
-        width: 31.333333%;
+        width: 27.333333%;
         background-color: #fff;
     }
@@ -3105 +3114 @@
     .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 {
@@ -3122 +3135 @@
     .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 {
@@ -3140 +3157 @@
     .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 {