Changeset 33072

Timestamp:

07/03/2015 08:46:54 PM (8 years ago)

Author:

boonebgorges

Message:

Improve the display of my-sites.php on small screens.

Props tryon.
Fixes #31685.

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (2 diffs)
• my-sites.php (modified) (3 diffs)

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

@@ -648 +648 @@
 
 .striped > tbody > :nth-child(odd),
+ul.striped > :nth-child(odd),
 .alternate {
     background-color: #f9f9f9;
@@ -3040 +3041 @@
 }
 
+/* My Sites */
+.my-sites {
+    display: block;
+    overflow: auto;
+    zoom: 1;
+    border: 1px solid #e5e5e5;
+}
+
+.my-sites li {
+    display: block;
+    padding: 8px 1%;
+    margin: 0;
+}
+
+@media only screen and (min-width: 600px) {
+    .my-sites.striped li {
+        background-color: #fff;
+        position: relative;
+    }
+    .my-sites.striped li:after {
+        content: "";
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: #ccc;
+    }
+
+}
+@media only screen and (min-width: 600px) and (max-width: 699px) {
+    .my-sites li{
+        float: left;
+        width: 48%;
+    }
+    .my-sites.striped li {
+        background-color: #fff;
+    }
+    .my-sites.striped li:nth-of-type(2n+2):after {
+        content: none;
+    }
+    .my-sites li:nth-of-type(4n+1),
+    .my-sites li:nth-of-type(4n+2) {
+        background-color: #f9f9f9;
+    }
+
+}
+
+@media only screen and (min-width: 700px) and (max-width: 1199px) {
+    .my-sites li {
+        float: left;
+        width: 31.333333%;
+        background-color: #fff;
+    }
+    .my-sites.striped li:nth-of-type(3n+3):after {
+        content: none;
+    }
+    .my-sites li:nth-of-type(6n+1),
+    .my-sites li:nth-of-type(6n+2),
+    .my-sites li:nth-of-type(6n+3) {
+        background-color: #f9f9f9;
+    }
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+    .my-sites li {
+        float: left;
+        width: 23%;
+        background-color: #fff;
+    }
+    .my-sites.striped li:nth-of-type(4n+4):after {
+        content: none;
+    }
+    .my-sites li:nth-of-type(8n+1),
+    .my-sites li:nth-of-type(8n+2),
+    .my-sites li:nth-of-type(8n+3),
+    .my-sites li:nth-of-type(8n+4) {
+        background-color: #f9f9f9;
+    }
+}
+
+@media only screen and (min-width: 1400px) and (max-width: 1599px) {
+    .my-sites li {
+        float: left;
+        width: 18%;
+        background-color: #fff;
+    }
+    .my-sites.striped li:nth-of-type(5n+5):after {
+        content: none;
+    }
+    .my-sites li:nth-of-type(10n+1),
+    .my-sites li:nth-of-type(10n+2),
+    .my-sites li:nth-of-type(10n+3),
+    .my-sites li:nth-of-type(10n+4),
+    .my-sites li:nth-of-type(10n+5) {
+        background-color: #f9f9f9;
+    }
+}
+
+@media only screen and (min-width: 1600px) {
+    .my-sites li {
+        float: left;
+        width: 14.666666%;
+        background-color: #fff;
+    }
+    .my-sites.striped li:nth-of-type(6n+6):after {
+        content: none;
+    }
+    .my-sites li:nth-of-type(12n+1),
+    .my-sites li:nth-of-type(12n+2),
+    .my-sites li:nth-of-type(12n+3),
+    .my-sites li:nth-of-type(12n+4),
+    .my-sites li:nth-of-type(12n+5),
+    .my-sites li:nth-of-type(12n+6) {
+        background-color: #f9f9f9;
+    }
+}
+
+.my-sites li a {
+    text-decoration: none;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */

trunk/src/wp-admin/my-sites.php

@@ -69 +69 @@
     choose_primary_blog();
     /**
-     * Fires before the sites table on the My Sites screen.
+     * Fires before the sites list on the My Sites screen.
      *
      * @since 3.0.0
@@ -76 +76 @@
     ?>
     <br clear="all" />
-    <table class="widefat fixed striped">
+    <ul class="my-sites striped">
     <?php
     /**
@@ -92 +92 @@
     $settings_html = apply_filters( 'myblogs_options', '', 'global' );
     if ( $settings_html != '' ) {
-        echo '<tr><td><h3>' . __( 'Global Settings' ) . '</h3></td><td>';
+        echo '<h3>' . __( 'Global Settings' ) . '</h3>';
         echo $settings_html;
-        echo '</td></tr>';
     }
     reset( $blogs );
-    $num = count( $blogs );
-    $cols = 1;
-    if ( $num >= 20 )
-        $cols = 4;
-    elseif ( $num >= 10 )
-        $cols = 2;
-    $num_rows = ceil( $num / $cols );
-    $split = 0;
-    for ( $i = 1; $i <= $num_rows; $i++ ) {
-        $rows[] = array_slice( $blogs, $split, $cols );
-        $split = $split + $cols;
-    }
 
-    foreach ( $rows as $row ) {
-        echo "<tr>";
-        $i = 0;
-        foreach ( $row as $user_blog ) {
-            $s = $i == 3 ? '' : 'border-right: 1px solid #ccc;';
-            echo "<td style='$s'>";
-            echo "<h3>{$user_blog->blogname}</h3>";
-            /**
-             * Filter the row links displayed for each site on the My Sites screen.
-             *
-             * @since MU
-             *
-             * @param string $string    The HTML site link markup.
-             * @param object $user_blog An object containing the site data.
-             */
-            echo "<p>" . apply_filters( 'myblogs_blog_actions', "<a href='" . esc_url( get_home_url( $user_blog->userblog_id ) ). "'>" . __( 'Visit' ) . "</a> | <a href='" . esc_url( get_admin_url( $user_blog->userblog_id ) ) . "'>" . __( 'Dashboard' ) . "</a>", $user_blog ) . "</p>";
-            /** This filter is documented in wp-admin/my-sites.php */
-            echo apply_filters( 'myblogs_options', '', $user_blog );
-            echo "</td>";
-            $i++;
-        }
-        echo "</tr>";
+    foreach ( $blogs as $user_blog ) {
+        echo "<li>";
+        echo "<h3>{$user_blog->blogname}</h3>";
+        /**
+         * Filter the row links displayed for each site on the My Sites screen.
+         *
+         * @since MU
+         *
+         * @param string $string    The HTML site link markup.
+         * @param object $user_blog An object containing the site data.
+         */
+        echo "<p class='my-sites-actions'>" . apply_filters( 'myblogs_blog_actions', "<a href='" . esc_url( get_home_url( $user_blog->userblog_id ) ). "'>" . __( 'Visit' ) . "</a> | <a href='" . esc_url( get_admin_url( $user_blog->userblog_id ) ) . "'>" . __( 'Dashboard' ) . "</a>", $user_blog ) . "</p>";
+        /** This filter is documented in wp-admin/my-sites.php */
+        echo apply_filters( 'myblogs_options', '', $user_blog );
+        echo "</li>";
     }?>
-    </table>
+    </ul>
     <input type="hidden" name="action" value="updateblogsettings" />
     <?php wp_nonce_field( 'update-my-sites' ); ?>