Ticket #31685: 31685.3.diff

src/wp-admin/css/common.css

@@ -632 +632 @@
 }
 
 .striped > tbody > :nth-child(odd),
+ul.striped > :nth-child(odd),
 .alternate {
         background-color: #f9f9f9;
 }
@@ -3038 +3039 @@
         border-bottom: 1px solid #dfdfdf;
 }
 
+/* My Sites */
+.my-sites {
+        background: #fff;
+        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
 -------------------------------------------------------------- */
 

src/wp-admin/my-sites.php

@@ -68 +68 @@
         <?php
         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
          */
@@ -75 +75 @@
         do_action( 'myblogs_allblogs_options' );
         ?>
         <br clear="all" />
-        <table class="widefat fixed striped">
+        <ul class="my-sites striped">
         <?php
         /**
          * Enable the Global Settings section on the My Sites screen.
@@ -91 +91 @@
          */
         $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' ); ?>
         <?php submit_button(); ?>