Auto-column switching for the dashboard (js based), see #18198

git-svn-id: http://svn.automattic.com/wordpress/trunk@18667 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/admin-header.php

@@ -98,6 +98,9 @@ if ( is_admin_bar_showing() )
 if ( is_rtl() )
 	$admin_body_class .= ' rtl';
 
+if ( get_user_setting('responsive') )
+	$admin_body_class .= ' responsive';
+
 $admin_body_class .= ' branch-' . str_replace( array( '.', ',' ), '-', floatval( $wp_version ) );
 $admin_body_class .= ' version-' . str_replace( '.', '-', preg_replace( '/^([.0-9]+).*/', '$1', $wp_version ) );
 $admin_body_class .= ' admin-color-' . sanitize_html_class( get_user_option( 'admin_color' ), 'fresh' );

wp-admin/css/wp-admin.dev.css

@@ -117,7 +117,7 @@ TABLE OF CONTENTS:
 	position: relative;
 }
 
-.wide-window .responsive .inner-sidebar {
+.wide-window.responsive .inner-sidebar {
     margin-right: -870px;
     width: 100%;
     display: block;
@@ -128,7 +128,7 @@ TABLE OF CONTENTS:
 	min-height: 300px;
 }
 
-.wide-window .responsive .inner-sidebar #side-sortables {
+.wide-window.responsive .inner-sidebar #side-sortables {
 	min-width: 280px;
 	max-width: 480px;
 	width: auto;
@@ -251,12 +251,7 @@ body {
 	font-family: sans-serif;
 	font-size: 12px;
 	line-height: 1.4em;
-	min-width: 950px; /* to do, responsive admin */
+	min-width: 600px; /* to do, responsive admin */
-}
-
-body.post-php,
-body.index-php {
-	min-width: 560px;
 }
 
 td,
@@ -2106,8 +2101,11 @@ body.admin-bar #adminmenu {
 	float: left;
 }
 
-.postbox-container .meta-box-sortables {
+#postbox-container-1 .meta-box-sortables:first-child,
-	min-height: 300px;
+#postbox-container-2 .meta-box-sortables:first-child,
+#postbox-container-3 .meta-box-sortables:first-child,
+#postbox-container-4 .meta-box-sortables:first-child {
+	min-height: 200px;
 }
 
 .postbox .hndle {

wp-admin/edit-form-advanced.php

@@ -193,7 +193,7 @@ if ( 'post' == $post_type ) {
 require_once('./admin-header.php');
 ?>
 
-<div class="wrap<?php if ( $screen_layout_columns == 'auto' ) echo ' responsive'; ?>">
+<div class="wrap">
 <?php screen_icon(); ?>
 <h2><?php echo esc_html( $title ); ?><?php if ( isset( $post_new_file ) ) : ?> <a href="<?php echo esc_url( $post_new_file ) ?>" class="add-new-h2"><?php echo esc_html($post_type_object->labels->add_new); ?></a><?php endif; ?></h2>
 <?php if ( $notice ) : ?>

wp-admin/index.php

@@ -52,7 +52,7 @@ include (ABSPATH . 'wp-admin/admin-header.php');
 $today = current_time('mysql', 1);
 ?>
 
-<div class="wrap<?php if ( $screen_layout_columns == 'auto' ) echo ' responsive'; ?>">
+<div class="wrap">
 <?php screen_icon(); ?>
 <h2><?php echo esc_html( $title ); ?></h2>
 

wp-admin/js/common.dev.js

@@ -1,4 +1,4 @@
-var showNotice, adminMenu, columns, validateForm, screenMeta;
+var showNotice, adminMenu, columns, validateForm, screenMeta, autofold_menu;
 (function($){
 // sidebar admin menu
 adminMenu = {
@@ -346,6 +346,19 @@ $(document).ready( function() {
 		});
 	}
 
+	// auto-fold the menu when screen is under 800px
+	$(window).bind('resize.autofold', function(){
+		if ( getUserSetting('mfold') == 'f' )
+			return;
+
+		var w = $(window).width();
+
+		if ( w <= 800 ) // fold admin menu
+			$(document.body).addClass('folded');
+		else
+			$(document.body).removeClass('folded');
+
+	}).triggerHandler('resize');
 });
 
 // internal use

wp-admin/js/postbox.dev.js

@@ -1,4 +1,4 @@
-var postboxes, wp_auto_columns, wpAutoColumns = false;
+var postboxes;
 
 (function($) {
 	postboxes = {
@@ -40,31 +40,24 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
 				}
 				postboxes.save_state(page);
 			} );
+
 			$('.columns-prefs input[type="radio"]').click(function(){
-				var num = $(this).val(), i, el, ps = $('#poststuff'), wrap = $('.wrap');
+				var num = $(this).val(), ps = $('#poststuff');
 
 				if ( num == 'auto' ) {
-					wrap.addClass('responsive');
+					setUserSetting('responsive', '1');
+					$(document.body).addClass('responsive');
+					$(window).bind('resize.responsive', function(){ postboxes.auto_columns(); });
 
-					if ( ps.length ) {
+					if ( ps.length )
 						wrap.removeClass('columns-1').removeClass('columns-2');
-						ps.addClass('has-right-sidebar')
 
-						if ( !$('#side-info-column #side-sortables').length )
+					postboxes.auto_columns();
-							$('#side-info-column').append( $('#side-sortables') );
-
-						if ( typeof(wp_auto_columns) == 'function' ) {
-							wpAutoColumns = true;
-							wp_auto_columns();
-						}
-					} else {
-						$('#normal-sortables').append( $('#side-sortables, #column3-sortables, #column4-sortables').children('.postbox') );
-						$('#postbox-container-2, #postbox-container-3, #postbox-container-4').hide();
-						$('#postbox-container-1').css('width', '100%');
-					}
 
 				} else {
-					wrap.removeClass('responsive');
+					num = parseInt(num, 10);
+					deleteUserSetting('responsive');
+					$(document.body).removeClass('responsive');
 
 					if ( ps.length ) { // write pages
 
@@ -74,6 +67,7 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
 
 							if ( !$('#side-info-column #side-sortables').length )
 								$('#side-info-column').append( $('#side-sortables') );
+
 						} else if ( num == 1 ) {
 							wrap.removeClass('columns-2').addClass('columns-1');
 							ps.removeClass('has-right-sidebar');
@@ -81,43 +75,11 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
 						}
 
 					} else { // dashboard
-
+						postboxes._dash_columns(num);
-						for ( i = 4; ( i > num && i > 1 ); i-- ) {
-							el = $('#' + colname(i) + '-sortables');
-							$('#' + colname(i-1) + '-sortables').append(el.children('.postbox'));
-							el.parent().hide();
-						}
-
-						for ( i = 1; i <= num; i++ ) {
-							el = $('#' + colname(i) + '-sortables');
-							if ( el.parent().is(':hidden') )
-								el.addClass('temp-border').parent().show();
-						}
-
-						$('.postbox-container:visible').css('width', 100/num + '%');
 					}
 				}
 				postboxes.save_order(page);
 			});
-
-			function colname(n) {
-				switch (n) {
-					case 1:
-						return 'normal';
-						break
-					case 2:
-						return 'side';
-						break
-					case 3:
-						return 'column3';
-						break
-					case 4:
-						return 'column4';
-						break
-					default:
-						return '';
-				}
-			}
 		},
 
 		init : function(page, args) {
@@ -177,30 +139,13 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
 			} );
 			$.post( ajaxurl, postVars );
 		},
+		
+		auto_columns : function() { // responsive admin
+			var pb, dw;
 
-		/* Callbacks */
+			if ( !$(document.body).hasClass('responsive') )
-		pbshow : false,
-
-		pbhide : false
-	};
-
-	$(document).ready(function(){
-
-		// responsive admin
-		wpAutoColumns = $('#wp_auto_columns').prop('checked');
-
-		wp_auto_columns = function() {
-			var w = $(window).width(), pb, dw, num = 1;
-			
-			if ( !wpAutoColumns )
 				return;
 
-			if ( w <= 680 )
-				$(document.body).addClass('folded');
-
-			if ( w > 680 && getUserSetting('mfold') != 'f' )
-				$(document.body).removeClass('folded');
-
 			if ( adminpage == 'post-php' ) {
 				pb = $('#post-body').width();
 
@@ -219,43 +164,91 @@ var postboxes, wp_auto_columns, wpAutoColumns = false;
 					$(document.body).addClass('wide-window');
 				}
 
+			} else if ( adminpage == 'index-php' ) {
+				dw = $('#dashboard-widgets-wrap').width();
+
+				if ( dw < 700 ) {
+					this._dash_columns(1)
+				}
+
+				if ( dw >= 700 && dw < 1100 ) {
+					this._dash_columns(2)
+				}
+
+				if ( dw >= 1100 && dw < 1500 ) {
+					this._dash_columns(3)
+				}
+
+				if ( dw >= 1500 ) {
+					this._dash_columns(4)
+				}
 			}
-/*
-			else if ( adminpage == 'index-php' ) {
-				dw = $('#dashboard-widgets').width();
 
-				if ( dw < 800 ) {
+		},
-					$('#postbox-container-2').hide();
-					$('#normal-sortables').after( $('#side-sortables') );
-					num = 1;
-				}
 
-				if ( dw >= 800 && dw < 1200 ) {
+		_dash_columns : function(n) {
-					$('#postbox-container-2').show().append( $('#side-sortables') );
-					$('#postbox-container-3').hide();
-					$('#side-sortables').after( $('#column3-sortables') );
-					num = 2;
-				}
 
-				if ( dw >= 1200 && dw < 1600 ) {
+			switch (n) {
-					$('#postbox-container-3').show().append( $('#column3-sortables') );
+				case 1:
+					$('#postbox-container-1').append( $('#side-sortables, #column3-sortables, #column4-sortables') );
+					$('#postbox-container-2, #postbox-container-3, #postbox-container-4').hide();
+					break
+				case 2:
+					$('#postbox-container-2').append( $('#side-sortables, #column3-sortables, #column4-sortables') ).show();
+					$('#postbox-container-3, #postbox-container-4').hide();
+					break
+				case 3:
+					$('#postbox-container-2').append( $('#side-sortables') ).show();
+					$('#postbox-container-3').append( $('#column3-sortables, #column4-sortables') ).show();
 					$('#postbox-container-4').hide();
-					$('#column3-sortables').after( $('#column4-sortables') );
+					break
-					num = 3;
+				case 4:
-				}
+					$('#postbox-container-2').append( $('#side-sortables') ).show();
-
+					$('#postbox-container-3').append( $('#column3-sortables') ).show();
-				if ( dw >= 1600 ) {
+					$('#postbox-container-4').append( $('#column4-sortables') ).show();
-					$('#postbox-container-4').show().append( $('#column4-sortables') );
+					break
-					num = 4;
+				default:
-				}
+					return;
-
-				$('.postbox-container:visible').css('width', 100/num + '%');
 			}
-*/
-		}
 
-		$(window).resize(function(){ wp_auto_columns(); });
+			$('.postbox-container:visible').css('width', 100/n + '%');
-		wp_auto_columns();
+		},
+
+		_colname : function(n) {
+			switch (n) {
+				case 1:
+					return 'normal';
+					break
+				case 2:
+					return 'side';
+					break
+				case 3:
+					return 'column3';
+					break
+				case 4:
+					return 'column4';
+					break
+				default:
+					return '';
+			}
+		},
+
+		/* Callbacks */
+		pbshow : false,
+
+		pbhide : false
+	};
+
+	$(document).ready(function(){
+		if ( $('#wp_auto_columns').prop('checked') ) {
+			setUserSetting('responsive', '1');
+			$(document.body).addClass('responsive');
+		}
+		
+		if ( $(document.body).hasClass('responsive') ) {
+			$(window).bind('resize.responsive', function(){ postboxes.auto_columns(); });
+			postboxes.auto_columns();
+		}
 	});
 
 }(jQuery));

wp-includes/script-loader.php

@@ -61,7 +61,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'utils', "/wp-admin/js/utils$suffix.js", false, '20101110' );
 
-	$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20110829', 1 );
+	$scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), '20110913', 1 );
 	$scripts->add_script_data( 'common', 'commonL10n', array(
 		'warnDelete' => __("You are about to permanently delete the selected items.\n  'Cancel' to stop, 'OK' to delete.")
 	) );
@@ -279,7 +279,7 @@ function wp_default_scripts( &$scripts ) {
 
 		$scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array('jquery'), '20110524', 1 );
 
-		$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20110830', 1 );
+		$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20110913', 1 );
 
 		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array('suggest', 'wp-lists', 'postbox'), '20110524', 1 );
 		$scripts->add_script_data( 'post', 'postL10n', array(
@@ -402,7 +402,7 @@ function wp_default_styles( &$styles ) {
 	// Any rtl stylesheets that don't have a .dev version for ltr
 	$no_suffix = array( 'farbtastic' );
 
-	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110912' );
+	$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20110913' );
 
 	$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array('wp-admin'), '20110902' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );