Awesome about page design for WordPress 3.7.

The page includes a giant password meter that serves as both an animated example and a working demo. How cool is that?

props jorbin, melchoyce.
see #25603.

Built from https://develop.svn.wordpress.org/trunk@25839


git-svn-id: http://core.svn.wordpress.org/trunk@25751 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -13,6 +13,8 @@ $title = __( 'About' );
 
 list( $display_version ) = explode( '-', $wp_version );
 
+wp_enqueue_script( 'about' );
+
 include( ABSPATH . 'wp-admin/admin-header.php' );
 ?>
 <div class="wrap about-wrap">
@@ -36,11 +38,18 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 <div class="changelog">
 	<h3><?php _e( 'Background Updates' ); ?></h3>
 
-	<div class="feature-section col two-col">
+	<div class="feature-section col three-col about-updates">
 		<div>
 			<h4><?php _e( 'Updates While You Sleep' ); ?></h4>
 			<p><?php _e( 'With WordPress 3.7, you don&#8217;t have to lift a finger to apply maintenance and security updates. Most sites are now able to automatically apply these updates in the background, though some configurations may not allow it.' ); ?></p>
-			<?php
+		</div>
+		<div><img alt="" src="images/about-updates-2x.png" /></div>
+		<div class="last-feature">
+			<h4><?php _e( 'More Reliable Than Ever' ); ?></h4>
+			<p><?php _e( 'The update process has been made even more reliable and secure, with dozens of new checks and safeguards.' ); ?></p>
+			<p><?php _e( 'You&#8217;ll still need to click &#8220;Update Now&#8221; once WordPress 3.8 is released, but we&#8217;ve never had more confidence in that beautiful blue button.' ); ?></p>
+		</div>
+		<?php
 			$can_auto_update = wp_http_supports( 'ssl' );
 			if ( $can_auto_update ) {
 				require_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';
@@ -57,25 +66,22 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 				<p><?php _e( '&rarr; This site <strong>is</strong> able to apply these updates automatically. Cool!' ); ?></p>
 			<?php else : ?>
 				<p><?php printf( __( '&rarr; This site <strong>is not</strong> able to apply these updates automatically. But we&#8217;ll email %s when there is a new security release.' ), esc_html( get_site_option( 'admin_email' ) ) ); ?></p>
-			<?php endif; ?>
-		</div>
-		<div class="last-feature">
-			<h4><?php _e( 'More Reliable Than Ever' ); ?></h4>
-			<p><?php _e( 'The update process has been made even more reliable and secure, with dozens of new checks and safeguards.' ); ?></p>
-			<p><?php _e( 'You&#8217;ll still need to click &#8220;Update Now&#8221; once WordPress 3.8 is released, but we&#8217;ve never had more confidence in that beautiful blue button.' ); ?></p>
-		</div>
+		<?php endif; ?>
 	</div>
 </div>
 
-<div class="changelog">
+<div class="changelog about-passwords">
 	<h3><?php _e( 'Create Stronger Passwords' ); ?></h3>
 
 	<div class="feature-section col two-col">
 		<div>
-			<p><?php _e( 'Your password is your site&#8217;s first line of defense. It&#8217;s best to create passwords that are complex, long, and unique. To that end, our password meter has been updated in WordPress 3.7 to recognize common mistakes that can weaken your password: dates, names, keyboard patterns (123456789), and even pop culture references.' ); ?> <?php _e( 'Try it out on the right.' ); ?></p>
+			<p><?php _e( 'Your password is your site&#8217;s first line of defense. It&#8217;s best to create passwords that are complex, long, and unique. To that end, our password meter has been updated in WordPress 3.7 to recognize common mistakes that can weaken your password: dates, names, keyboard patterns (123456789), and even pop culture references.' ); ?></p>
+			<p><strong><?php _e( 'Try it out on the right.' ); ?></strong></p>
 		</div>
-		<div class="last-feature">
-			(Actual password meter demo)
+		<div class="last-feature about-password-meter">
+			<input type="password" id="pass" size="25" value="" />
+			<p id="pass-strength-result" ><?php _e( 'Strength indicator' ); ?></p>
+			<?php printf( __( 'Getting the urge to <a href="%s">change your password</a>?' ), esc_url( self_admin_url( 'profile.php' ) ) ); ?>
 		</div>
 	</div>
 </div>
@@ -84,11 +90,11 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<div class="feature-section col two-col">
 		<div>
 			<h3><?php _e( 'Improved Search Results' ); ?></h3>
-			<p><?php _e( 'Search results are now ordered by how well the search query matches a post, instead of ordered only by date. For example, when your search terms match a post title, that result will be pushed to the top.' ); ?></p>
+			<p><img alt="" src="images/about-search-2x.png" /><?php _e( 'Search results are now ordered by how well the search query matches a post, instead of ordered only by date. For example, when your search terms match a post title, that result will be pushed to the top.' ); ?></p>
 		</div>
 		<div class="last-feature">
 			<h3><?php _e( 'Better Global Support' ); ?></h3>
-			<p><?php _e( 'Localized versions of WordPress will receive faster and more complete translations. WordPress 3.7 adds support for automatically installing the right language files and keeping them up to date.' ); ?></p>
+			<p><img alt="" src="images/about-globe-2x.png" /><?php _e( 'Localized versions of WordPress will receive faster and more complete translations. WordPress 3.7 adds support for automatically installing the right language files and keeping them up to date.' ); ?></p>
 		</div>
 	</div>
 </div>

wp-admin/css/colors-classic.css

@@ -2000,13 +2000,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #fff;
-	border: 1px #ccc solid;
-	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
-	box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
-}
-
 .about-wrap h4.wp-people-group {
 	text-shadow: 1px 1px 1px #fff;
 }

wp-admin/css/colors-fresh.css

@@ -1889,13 +1889,6 @@ h2.nav-tab-wrapper, h3.nav-tab-wrapper {
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #fff;
-	border: 1px #ccc solid;
-	-webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
-	box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
-}
-
 .about-wrap h4.wp-people-group {
 	text-shadow: 1px 1px 1px #fff;
 }

wp-admin/css/wp-admin.css

@@ -5766,6 +5766,51 @@ h2 .nav-tab {
 	display: none !important;
 }
 
+.about-wrap p.about-notice {
+	background-color: #ffffe0;
+	border: 1px solid #e6db55;
+	margin: 5px 0 15px;
+	padding: 0.4em 0.8em;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+}
+
+.about-wrap .about-passwords {
+	margin: 20px 0;
+	padding: 1px 20px 10px;
+	background-color: #f9f9f9;
+}
+
+.about-wrap .about-password-meter input {
+	font-size: 250%;
+	width: 100%;
+    display: block;
+    width: 100%;
+    padding: 5px;
+}
+
+.about-wrap .about-password-meter #pass-strength-result {
+	font-weight: normal !important;
+    display:block !important;
+	font-size: 150%;
+    width: 100%;
+    padding: 17px 0;
+    margin-bottom: 15px;
+}
+
+.about-wrap .feature-section img {
+	border: 0;
+	background: transparent;
+	box-shadow: none;
+	-webkit-box-shadow: none;
+	max-width: 20%;
+}
+
+.about-wrap .feature-section div p img {
+	float: right;
+	margin-left: 10px;
+}
+
 /* Typography */
 
 .about-wrap p {
@@ -5808,6 +5853,8 @@ h2 .nav-tab {
 	padding-bottom: 20px;
 }
 
+.about-wrap .feature-section 
+
 .about-wrap .feature-section h4 {
 	margin-bottom: 0.6em;
 }
@@ -5960,6 +6007,21 @@ h2 .nav-tab {
 	float: left;
 }
 
+.about-wrap .three-col.about-updates div:nth-of-type(1),
+.about-wrap .three-col.about-updates div:nth-of-type(3) {
+	width: 37%;
+	margin: 0;
+}
+
+.about-wrap .three-col.about-updates div:nth-of-type(2) {
+	width: 16%;
+	margin: 0 5%;
+}
+
+.about-wrap .three-col.about-updates img {
+	margin: 0;
+}
+
 .about-wrap .three-col-images {
 	text-align: center;
 }

wp-admin/js/about.js

@@ -0,0 +1,64 @@
+(function($){
+    var password = 'Gosh, WordPress is grand.',
+        $input = $('#pass'),
+        shouldAnimate = true,
+        indicatorString = $('#pass-strength-result').text();
+
+    function updateResult(){
+        var strength = wp.passwordStrength.meter($input.val(), [], $input.val());
+
+        $('#pass-strength-result').removeClass('short bad good strong');
+        switch ( strength ) {
+            case 2:
+                $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
+                break;
+            case 3:
+                $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
+                break;
+            case 4:
+                $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
+                break;
+            default:
+                $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
+        }
+    }
+
+    function animate(){
+        if (shouldAnimate === false)
+            return;
+        if ($input.val().length < password.length){
+            $input.val( password.substr(0, $input.val().length + 1) );
+            updateResult();
+        } else {
+            $input.val('');
+		    $('#pass-strength-result').removeClass('short bad good strong');
+        }
+        // Look like real typing by changing the speed new letters are added each time
+        setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) );
+    }
+    // 
+    function begin(){
+        // we async load zxcvbn, so we need to make sure it's loaded before starting 
+        if (typeof(zxcvbn) !== 'undefined')
+            animate();
+        else
+            setTimeout(begin,800);
+    }
+    
+    // Turn off the animation on focus
+    $input.on('focus', function(){
+        shouldAnimate = false;
+        $('#pass-strength-result').removeClass('short bad good strong');
+        $('#pass-strength-result').text(indicatorString);
+        $input.val('')
+    });
+
+    // Act like a normal password strength meter 
+    $input.on('keyup', function(){
+        updateResult();
+    });
+
+    // Start the animation
+    begin();
+
+})(jQuery);

wp-admin/js/about.min.js

@@ -0,0 +1 @@
+!function(a){function b(){var b=wp.passwordStrength.meter(f.val(),[],f.val());switch(a("#pass-strength-result").removeClass("short bad good strong"),b){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}function c(){g!==!1&&(f.val().length<e.length?(f.val(e.substr(0,f.val().length+1)),b()):(f.val(""),a("#pass-strength-result").removeClass("short bad good strong")),setTimeout(c,220+Math.floor(580*Math.random())))}function d(){"undefined"!=typeof zxcvbn?c():setTimeout(d,800)}var e="Gosh, WordPress is grand.",f=a("#pass"),g=!0,h=a("#pass-strength-result").text();f.on("focus",function(){g=!1,a("#pass-strength-result").removeClass("short bad good strong"),a("#pass-strength-result").text(h),f.val("")}),f.on("keyup",function(){b()}),d()}(jQuery);

wp-admin/js/password-strength-meter.js

@@ -14,7 +14,7 @@ var passwordStrength;
 			if ( ! $.isArray( blacklist ) )
 				blacklist = [ blacklist.toString() ];
 
-			if (password1 != password2 && password2.length > 0)
+			if (password1 != password2 && password2 && password2.length > 0)
 				return 5;
 
 			var result = zxcvbn( password1, blacklist );

wp-admin/js/password-strength-meter.min.js

@@ -1 +1 @@
-window.wp=window.wp||{};var passwordStrength;!function(a){wp.passwordStrength={meter:function(b,c,d){if(a.isArray(c)||(c=[c.toString()]),b!=d&&d.length>0)return 5;var e=zxcvbn(b,c);return e.score},userInputBlacklist:function(){var b,c,d,e,f=[],g=[],h=["user_login","first_name","last_name","nickname","display_name","email","url","description","weblog_title","admin_email"];for(f.push(document.title),f.push(document.URL),c=h.length,b=0;c>b;b++)e=a("#"+h[b]),0!=e.length&&(f.push(e[0].defaultValue),f.push(e.val()));for(d=f.length,b=0;d>b;b++)f[b]&&(g=g.concat(f[b].replace(/\W/g," ").split(" ")));return g=a.grep(g,function(b,c){return""==b||4>b.length?!1:a.inArray(b,g)===c})}},passwordStrength=wp.passwordStrength.meter}(jQuery);
+window.wp=window.wp||{};var passwordStrength;!function(a){wp.passwordStrength={meter:function(b,c,d){if(a.isArray(c)||(c=[c.toString()]),b!=d&&d&&d.length>0)return 5;var e=zxcvbn(b,c);return e.score},userInputBlacklist:function(){var b,c,d,e,f=[],g=[],h=["user_login","first_name","last_name","nickname","display_name","email","url","description","weblog_title","admin_email"];for(f.push(document.title),f.push(document.URL),c=h.length,b=0;c>b;b++)e=a("#"+h[b]),0!=e.length&&(f.push(e[0].defaultValue),f.push(e.val()));for(d=f.length,b=0;d>b;b++)f[b]&&(g=g.concat(f[b].replace(/\W/g," ").split(" ")));return g=a.grep(g,function(b,c){return""==b||4>b.length?!1:a.inArray(b,g)===c})}},passwordStrength=wp.passwordStrength.meter}(jQuery);

wp-includes/script-loader.php

@@ -332,6 +332,8 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
 
+	$scripts->add( 'about', "/wp-admin/js/about$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
+
 	$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 );
 
 	$scripts->add( 'wplink', "/wp-includes/js/wplink$suffix.js", array( 'jquery', 'wpdialogs' ), false, 1 );