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

Props tryon.
Fixes #31685.

git-svn-id: https://develop.svn.wordpress.org/trunk@33072 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -647,6 +647,7 @@ div#widgets-right .widget-top:hover,
 }
 
 .striped > tbody > :nth-child(odd),
+ul.striped > :nth-child(odd),
 .alternate {
 	background-color: #f9f9f9;
 }
@@ -3039,6 +3040,128 @@ img {
 	border-bottom: 1px solid #dfdfdf;
 }
 
+/* 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
 -------------------------------------------------------------- */
 

src/wp-admin/my-sites.php

@@ -68,14 +68,14 @@ else :
 	<?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
 	 */
 	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,30 +91,13 @@ else :
 	 */
 	$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 ) {
+	foreach ( $blogs as $user_blog ) {
-		echo "<tr>";
+		echo "<li>";
-		$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.
@@ -124,15 +107,12 @@ else :
 		 * @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>";
+		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 "</td>";
+		echo "</li>";
-			$i++;
-		}
-		echo "</tr>";
 	}?>
-	</table>
+	</ul>
 	<input type="hidden" name="action" value="updateblogsettings" />
 	<?php wp_nonce_field( 'update-my-sites' ); ?>
 	<?php submit_button(); ?>