Simpler layout for the about screen (still needs text), props chexee, see #20423

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

wp-admin/about.php

@@ -37,74 +37,83 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<h3><?php echo ( 'Customizer' ); ?></h3>
 
 	<div class="feature-section images-stagger-right">
-		<div class="feature-images">
+		<img src="<?php echo admin_url( 'images/screenshots/theme-customizer.png' ); ?>" class="image-50" />
-			<img src="<?php echo admin_url( 'images/screenshots/media-icon.png' ); ?>" width="200" class="angled-right" />
+		<h4><?php echo ( 'All In One Place' ); ?></h4>
-			<img src="<?php echo admin_url( 'images/screenshots/drag-and-drop.png' ); ?>" width="200" class="angled-left" />
+		<p><?php echo ( 'OMG, this one thing does multiple things, on one screen.' ); ?></p>
-		</div>
-		<div class="left-feature">
-			<h4><?php echo ( 'All In One Place' ); ?></h4>
-			<p><?php echo ( 'OMG, this one thing does multiple things, on one screen.' ); ?></p>
 
-			<h4><?php echo ( 'Live Preview' ); ?></h4>
+		<h4><?php echo ( 'Live Preview' ); ?></h4>
-			<p><?php echo ( 'Immediate feedback on what your butchery looks like.' ); ?></p>
+		<p><?php echo ( 'Immediate feedback on what your butchery looks like.' ); ?></p>
 
-			<h4><?php echo ( 'Commitment Issues?' ); ?></h4>
+		<h4><?php echo ( 'Commitment Issues?' ); ?></h4>
-			<p><?php echo ( 'Before activating that new theme, customize and test drive it.' ); ?></p>
+		<p><?php echo ( 'Before activating that new theme, customize and test drive it.' ); ?></p>
-
+		<p><?php echo ( 'Before activating that new theme, customize and test drive it. Before activating that new theme, customize and test drive it. Before activating that new theme, customize and test drive it. Before activating that new theme, customize and test drive it. Before activating that new theme, customize and test drive it. Before activating that new theme, customize and test drive it. ' ); ?></p>
-			<h4><?php echo ( 'Variable Height Headers' ); ?></h4>
-			<p><?php echo ( 'If your theme elects, image headers can be made at variable height and even width. Pick the size that suits you.' ); ?></p>
-		</div>
 	</div>
 </div>
 
 <div class="changelog">
-	<h3><?php echo ( 'Mobile/Touch' ); ?></h3>
+	<h3><?php echo ( 'Custom Headers' ); ?></h3>
-
+	
-	<div class="feature-section text-features">
+	<div class="feature-section">
-		<h4><?php echo ( 'Drag, Swipe, Tap, Pat, Pat, Pat Happy Little Clouds' ); ?></h4>
+		<h4><?php echo ( 'Flexible Sizes' ); ?></h4>
-		<p><?php echo ( 'Engage your fingers with a more touchable admin.' ); ?></p>
+		<p><?php echo ( 'If your theme elects, image headers can be made at variable height and even width. Pick the size that suits you.' ); ?></p>
-
+		<img src="<?php echo admin_url( 'images/screenshots/flex-header-1.png' ); ?>" class="image-30" />
-		<div>
+		<img src="<?php echo admin_url( 'images/screenshots/flex-header-2.png' ); ?>" class="image-30" />
-		<h4><?php echo ( 'Size Responsive' ); ?></h4>
+		<img src="<?php echo admin_url( 'images/screenshots/flex-header-3.png' ); ?>" class="image-30" />
-		<p><?php echo ( 'From mobile to tablet.' ); ?></p>
-		</div>
 	</div>
 
-	<div class="feature-section screenshot-features">
+	<div class="feature-section images-stagger-right">
-		<div class="angled-left">
+		<img src="<?php echo admin_url( 'images/screenshots/flex-header-media-library.png' ); ?>" class="image-50" />
-			<img src="<?php echo admin_url( 'images/screenshots/admin-flyouts.png' ); ?>" />
+		<h4><?php echo ( 'Media Library Support' ); ?></h4>
-			<h4><?php echo ( 'Blog Anywhere' ); ?></h4>
+		<p><?php echo ( 'Lorem ipsum dolor sit amet consectetuer porttitor ut consectetuer mus ante. Odio at tortor pretium felis vel laoreet magnis leo Phasellus quis. Non ut volutpat nisl Lorem est sit tortor vel rutrum id. Curabitur Vestibulum neque ut nibh ante congue nunc dictum leo nibh. ' ); ?></p>
-			<p><?php echo ( 'Picture of hipster in cafe criticizing the coffee via his tablet.' ); ?></p>
+	</div>
-		</div>
+</div>
-		<div class="angled-right">
+
-			<img src="<?php echo admin_url( 'images/screenshots/help-screen.png' ); ?>" />
+<div class="changelog">
-			<h4><?php echo ( 'Couch Couch Couch!' ); ?></h4>
+	<h3><?php echo ( 'Better Captions' ); ?></h3>
-			<p><?php echo ( 'Picture of happy tablet user blogging from couch while watching sitcoms.' ); ?></p>
+
-		</div>
+	<div class="feature-section images-stagger-right">
+		<img src="<?php echo admin_url( 'images/screenshots/captions-1.png' ); ?>" class="image-30" />
+		<img src="<?php echo admin_url( 'images/screenshots/captions-2.png' ); ?>" class="image-30" />
+		<h4><?php echo ( 'HTML Support' ); ?></h4>
+		<p><?php echo ( 'Lorem ipsum dolor sit amet consectetuer porttitor ut consectetuer mus ante. Odio at tortor pretium felis vel laoreet magnis leo Phasellus quis. Non ut volutpat nisl Lorem est sit tortor vel rutrum id. Curabitur Vestibulum neque ut nibh ante congue nunc dictum leo nibh. Nulla libero neque elit Nam nulla eros non justo eget pede. Pede ullamcorper metus justo adipiscing massa nulla Phasellus et nisl hendrerit.' ); ?></p>
+	</div>
+</div>
+
+
+<div class="changelog">
+	<h3><?php echo ( 'Mobile/Touch' ); ?></h3>
+
+	<div class="feature-section">
+		<h4><?php echo ( 'Drag, Swipe, Tap, Pat, Pat, Pat Happy Little Clouds' ); ?></h4>
+		<p><?php echo ( 'Engage your fingers with a more touchable admin. Engage your fingers with a more touchable admin. Engage your fingers with a more touchable admin. Engage your fingers with a more touchable admin. ' ); ?></p>
+
+		<h4><?php echo ( 'Size Responsive' ); ?></h4>
+		<p><?php echo ( 'From mobile to tablet. From mobile to tablet. From mobile to tablet. From mobile to tablet. From mobile to tablet. From mobile to tablet. ' ); ?></p>
+
+		<h4><?php echo ( 'Blog Anywhere' ); ?></h4>
+		<p><?php echo ( 'Picture of hipster in cafe criticizing the coffee via his tablet. Picture of hipster in cafe criticizing the coffee via his tablet. Picture of hipster in cafe criticizing the coffee via his tablet. Picture of hipster in cafe criticizing the coffee via his tablet. Picture of hipster in cafe criticizing the coffee via his tablet. ' ); ?></p>
+
+		<h4><?php echo ( 'Couch Couch Couch!' ); ?></h4>
+		<p><?php echo ( 'Picture of happy tablet user blogging from couch while watching sitcoms. Picture of happy tablet user blogging from couch while watching sitcoms. Picture of happy tablet user blogging from couch while watching sitcoms. Picture of happy tablet user blogging from couch while watching sitcoms. ' ); ?></p>
 	</div>
 </div>
 
 <div class="changelog">
 	<h3><?php echo ( 'XML-RPC API' ); ?></h3>
 
-	<div class="feature-section text-features">
+	<div class="feature-section three-col">
-		<h4><?php echo ( 'In your About page, talking nonsense.' ); ?></h4>
-		<p><?php echo ( 'Synergy!' ); ?></p>
-
 		<div>
-		<h4><?php echo ( 'Remote Procedures' ); ?></h4>
+			<h4><?php echo ( 'In your About page, talking nonsense.' ); ?></h4>
-		<p><?php echo ( 'Want you to call. Do not pretend you lost the number.' ); ?></p>
+			<p><?php echo ( 'Synergy!' ); ?></p>
-		</div>
-	</div>
 
-	<div class="feature-section screenshot-features">
+			<h4><?php echo ( 'Remote Procedures' ); ?></h4>
-		<div class="angled-left">
+			<p><?php echo ( 'Want you to call. Do not pretend you lost the number.' ); ?></p>
-			<img src="<?php echo admin_url( 'images/screenshots/admin-flyouts.png' ); ?>" />
+		</div>
+		<div>
 			<h4><?php echo ( 'Mobile Mobile Mobile!' ); ?></h4>
 			<p><?php echo ( 'Picture of a happy mobile app user (like the one above) who has no idea that his/her phone is engaging in XML-RPC.' ); ?></p>
 		</div>
-		<div class="angled-right">
+		<div class="last-feature">
-			<img src="<?php echo admin_url( 'images/screenshots/help-screen.png' ); ?>" />
 			<h4><?php echo ( 'Armageddon It' ); ?></h4>
 			<p><?php echo ( 'Picture of a block of XML-RPC API code glimpsed over of the shoulder of a henchman in a lab coat who is getting ready to upload this doomsday snippet to every satellite over the Tri-State Area!' ); ?></p>
 		</div>
@@ -118,32 +127,25 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 		<div>
 			<h4><?php echo ( 'Themes API' ); ?></h4>
 			<p><?php echo ( 'WP_Theme, wp_get_themes(), wp_get_theme(). Faster, uses less memory, make uses of persistent caching.' ); ?></p>
-		</div>
+			
-		<div>
 			<h4><?php echo ( 'Faster Main Query' ); ?></h4>
 			<p><?php echo ( 'Post query optimized to avoid table scans.' ); ?></p>
 		</div>
-		<div class="last-feature">
+		<div>
 			<h4><?php echo ( 'Custom Header and Backound API' ); ?></h4>
 			<p><?php  echo ( 'Custom header and background API relocated into the theme support API.' ); ?></p>
-		</div>
+			
-	</div>
-
-	<div class="feature-section three-col">
-		<div>
 			<h4><?php echo ( 'Faster I18N' ); ?></h4>
 			<p><?php echo ( 'The number of strings loaded on the front end were greatly reduced, resulting in faster front page load times for I18N users.' ); ?></p>
 		</div>
-		<div>
+		<div class="last-feature">
 			<h4><?php echo ( 'WP_Screen API' ); ?></h4>
 			<p><?php echo ( 'More methods, more convenience!' ); ?></p>
-		</div>
+			
-		<div class="last-feature">
 			<h4><?php echo ( 'External Libraries' ); ?></h4>
 			<p><?php echo ( 'jQuery, jQuery UI, TinyMCE, Plupload, PHPMailer, SimplePie, and other libraries were updated. jQuery UI Touch Punch was introduced.' ); ?></p>
 		</div>
 	</div>
-
 </div>
 
 <div class="return-to-dashboard">

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

@@ -1403,85 +1403,37 @@ h2 .nav-tab {
 	margin-right: 3em;
 }
 
-.about-wrap .feature-section .left-feature,
-.about-wrap .feature-section img,
-.about-wrap .feature-section .right-feature {
-	float: right;
-}
-
-.about-wrap .feature-section .left-feature {
-	margin-right: 0;
-	margin-left: 0;
-}
-
-.about-wrap .feature-section .right-feature {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.about-wrap .feature-section.text-features {
-	float: right;
-}
-.about-wrap .feature-section.screenshot-features {
-	float: left;
-}
-.about-wrap .feature-section.screenshot-features .angled-right {
-	margin-left: 0;
-	margin-right: 2.5em;
-}
-.about-wrap .feature-section.screenshot-features .angled-right p {
-	margin-left: 0;
-	margin-right: 290px;
-}
-
-.about-wrap .feature-section .angled-right img,
-.about-wrap .feature-section .angled-left img {
-	margin-right: 0;
-	margin-left: 30px;
-}
-
 .about-wrap .feature-section.three-col div {
 	margin-right: 0;
 	margin-left: 4.999999999%;
 	float: right;
 }
+
 .about-wrap .feature-section.three-col h4 {
 	text-align: right;
 }
+
 .about-wrap .feature-section.three-col img {
 	margin-right: 5px;
 	margin-left: 0;
 }
+
 .about-wrap .feature-section.three-col .last-feature {
 	margin-left: 0;
 }
 
-.about-wrap .feature-section .feature-images img {
+.about-wrap .feature-section img {
-	margin-right: auto;
+	margin: 0 0 10px 0.7%;
-	margin-left: 5px;
 }
-.about-wrap .feature-section.images-stagger-left .angled-left {
+
-	margin-left: auto;
+.about-wrap .feature-section.images-stagger-right img {
-	margin-right: 5px;
-}
-.about-wrap .feature-section .angled-right {
 	float: left;
+	margin: 0 12px 12px 5px;
 }
-.about-wrap .feature-section.images-stagger-right .feature-images {
+
-	right: auto;
+.about-wrap .feature-section.images-stagger-left img {
-	left: 0;
+	float: right;
-}
+	margin: 0 5px 12px 12px;
-.about-wrap .feature-section.images-stagger-left .feature-images {
-	left: auto;
-	right: 0;
-}
-.about-wrap .feature-section.images-stagger-right .left-feature {
-	margin-right: 0;
-	margin-left: 350px;
-}
-.about-wrap .feature-section.images-stagger-left .right-feature {
-	margin-left: 0;
-	margin-right: 350px;
 }
 
 .about-wrap li.wp-person,

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

@@ -4948,11 +4948,11 @@ input.button-highlighted,
 .about-wrap {
 	position: relative;
 	margin: 25px 40px 0 20px;
-	min-width: 770px;
 	max-width: 1050px; /* readability */
 
 	font-size: 15px;
 }
+
 .about-wrap div.updated,
 .about-wrap div.error {
 	display: none !important;
@@ -4963,12 +4963,14 @@ input.button-highlighted,
 .about-wrap p {
 	line-height: 1.6em;
 }
+
 .about-wrap h1 {
 	margin: 0.2em 200px 0 0;
 	line-height: 1.2em;
 	font-size: 2.8em;
 	font-weight: 200;
 }
+
 .about-text,
 .about-description,
 .about-wrap li.wp-person a.web {
@@ -4977,14 +4979,17 @@ input.button-highlighted,
 	line-height: 1.6em;
 	font-size: 20px;
 }
+
 .about-description {
 	margin-top: 1.4em;
 }
+
 .about-text {
 	margin: 1em 200px 1.4em 0;
 	min-height: 60px;
 	font-size: 24px;
 }
+
 .about-wrap h3 {
 	font-size: 24px;
 	margin-bottom: 1em;
@@ -4992,34 +4997,40 @@ input.button-highlighted,
 }
 
 .about-wrap .changelog {
-	padding-bottom: 10px;
 	overflow: hidden;
 }
+
 .about-wrap .changelog li {
 	list-style-type: disc;
 	margin-left: 3em;
 }
+
+.about-wrap .feature-section {
+	padding-bottom: 20px;
+}
+
 .about-wrap .feature-section h4 {
 	margin-bottom: 0.6em;
 }
+
 .about-wrap .feature-section p {
 	margin-top: 0.6em;
 }
+
 .about-wrap code {
 	font-size: 14px;
 }
-html.ie8 .about-wrap img.element-screenshot {
-	padding: 2px;
-}
 
 /* Point Releases */
 
 .about-wrap .point-releases {
 	margin-top: 5px;
 }
+
 .about-wrap .changelog.point-releases h3 {
 	padding-top: 35px;
 }
+
 .about-wrap .changelog.point-releases h3:first-child {
 	padding-top: 7px;
 }
@@ -5030,13 +5041,10 @@ html.ie8 .about-wrap img.element-screenshot {
 	padding-top: 142px;
 	height: 50px;
 	width: 173px;
-
 	font-weight: bold;
 	font-size: 14px;
 	text-align: center;
-
 	margin: 0 -5px;
-
 	background: url('../images/wp-badge.png?ver=20111120') no-repeat;
 }
 
@@ -5051,12 +5059,14 @@ html.ie8 .about-wrap img.element-screenshot {
 .about-wrap h2.nav-tab-wrapper {
 	padding-left: 6px;
 }
+
 .about-wrap h2 .nav-tab {
 	padding: 4px 10px 6px;
 	margin: 0 3px -1px 0;
 	font-size: 18px;
 	vertical-align: top;
 }
+
 .about-wrap h2 .nav-tab-active {
 	font-weight: bold;
 	padding-top: 3px;
@@ -5064,128 +5074,70 @@ html.ie8 .about-wrap img.element-screenshot {
 
 /* Changelog / Update screen */
 
-.about-wrap .feature-section .left-feature,
-.about-wrap .feature-section img,
-.about-wrap .feature-section .right-feature {
-	float: left;
-}
-
-.about-wrap .feature-section {
-	min-height: 100px;
-	overflow: hidden;
-	clear: both;
-}
 .about-wrap .feature-section img {
-	margin: 5px auto;
-
 	border: none;
-
+	margin: 0 0.7% 10px 0;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
 }
-html.ie8 .about-wrap .feature-section img,
+
-html.ie8 .about-wrap .feature-section .image-mask {
+.about-wrap .feature-section img.image-50 {
+	max-width: 50%;
+}
+
+.about-wrap .feature-section img.image-30 {
+	max-width: 32%;
+}
+
+.ie8 .about-wrap .feature-section img {
 	border-width: 1px;
 	border-style: solid;
 }
 
-.about-wrap .feature-section.text-features {
-	width: 31%;
-
-	float: left;
-	overflow: visible;
-}
-.about-wrap .feature-section.text-features div {
-	width: 112%;
-}
-.about-wrap .feature-section.screenshot-features {
-	width: 67%;
-	margin-top: 1.33em;
-
-	float: right;
-	clear: none;
-	overflow: visible;
-}
-
-.about-wrap .feature-section.screenshot-features .angled-right {
-	margin-top: -1em;
-	margin-left: 2.5em;
-}
-.about-wrap .feature-section.screenshot-features .angled-right p {
-	margin-left: 290px;
-}
-
-.about-wrap .feature-section .angled-right h4,
-.about-wrap .feature-section .angled-left h4 {
-	margin-top: 0;
-}
-.about-wrap .feature-section .angled-right img,
-.about-wrap .feature-section .angled-left img {
-	margin-top: .1em;
-	margin-right: 30px;
-}
-
 .about-wrap .feature-section.three-col {
 	padding-top: 15px;
 	margin-bottom: 0;
 }
+
 .about-wrap .feature-section.three-col div {
 	width: 30%;
 	margin-right: 4.999999999%;
-
 	float: left;
 }
+
 .about-wrap .feature-section.three-col h4 {
 	margin:  0 0 0.6em 0;
 }
+
 .about-wrap .feature-section.three-col img {
 	margin: 0.5em 0 0.5em 5px;
 	max-width: 100%;
-
 	float: none;
 }
-html.ie8 .about-wrap .feature-section.three-col img {
+
+.ie8 .about-wrap .feature-section.three-col img {
 	margin-left: 0;
 }
+
 .about-wrap .feature-section.three-col .last-feature {
 	margin-right: 0;
 }
 
-.about-wrap .feature-section .feature-images {
+.about-wrap .feature-section.images-stagger-right img {
-	width: 300px;
-	position: absolute;
-	margin-top: 1.1em;
-}
-.about-wrap .feature-section .feature-images img {
-	width: 250px;
-	height: 150px;
-	margin-right: 5px;
-}
-.about-wrap .feature-section.images-stagger-left,
-.about-wrap .feature-section.images-stagger-right {
-	min-height: 265px;
-}
-.about-wrap .feature-section.images-stagger-right .angled-right,
-.about-wrap .feature-section.images-stagger-left .angled-left {
-	margin-bottom: -30px;
-}
-.about-wrap .feature-section.images-stagger-left .angled-left {
-	margin-left: 5px;
-}
-.about-wrap .feature-section .angled-right {
 	float: right;
+	margin: 0 5px 12px 12px;
 }
-.about-wrap .feature-section.images-stagger-right .feature-images {
+
-	right: 0;
+.about-wrap .feature-section.images-stagger-left img {
+	float: left;
+	margin: 0 12px 12px 5px;
 }
-.about-wrap .feature-section.images-stagger-left .feature-images {
+
-	left: 0;
+@media only screen and (max-width: 900px) {
-}
+	.about-wrap .feature-section.images-stagger-left img,
-.about-wrap .feature-section.images-stagger-right .left-feature {
+	.about-wrap .feature-section.images-stagger-right img {
-	margin-right: 350px;
+		clear: both;
-}
+	}
-.about-wrap .feature-section.images-stagger-left .right-feature {
-	margin-left: 350px;
 }
 
 /* Return to Dashboard Home link */
@@ -5195,6 +5147,7 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	font-size: 14px;
 	font-weight: bold;
 }
+
 .about-wrap .return-to-dashboard a {
 	text-decoration: none;
 	padding: 0 5px;
@@ -5206,18 +5159,22 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	margin-top: 2.6em;
 	font-size: 16px;
 }
+
 .about-wrap ul.wp-people-group {
 	overflow: hidden;
 	padding: 5px;
 	margin: 0 -15px 0 -5px;
 }
+
 .about-wrap ul.compact {
 	margin-bottom: 0
 }
+
 .about-wrap li.wp-person {
 	float: left;
 	margin-right: 10px;
 }
+
 .about-wrap li.wp-person img.gravatar {
 	float: left;
 	margin: 0 10px 10px 0;
@@ -5225,30 +5182,36 @@ html.ie8 .about-wrap .feature-section.three-col img {
 	width: 60px;
 	height: 60px;
 }
+
 .about-wrap ul.compact li.wp-person img.gravatar {
 	width: 30px;
 	height: 30px;
 }
+
 .about-wrap li.wp-person {
 	height: 70px;
 	width: 280px;
 	padding-bottom: 15px;
 }
+
 .about-wrap ul.compact li.wp-person {
 	height: auto;
 	width: 180px;
 	padding-bottom: 0;
 	margin-bottom: 0;
 }
+
 .about-wrap #wp-people-group-validators + p.wp-credits-list {
 	margin-top: 0;
 }
+
 .about-wrap li.wp-person a.web {
 	display: block;
 	margin: 6px 0 2px;
 	font-size: 16px;
 	text-decoration: none;
 }
+
 .about-wrap p.wp-credits-list a {
 	white-space: nowrap;
 }
@@ -5258,10 +5221,12 @@ html.ie8 .about-wrap .feature-section.three-col img {
 .freedoms-php .about-wrap ol {
 	margin: 40px 60px;
 }
+
 .freedoms-php .about-wrap ol li {
 	list-style-type: decimal;
 	font-weight: bold;
 }
+
 .freedoms-php .about-wrap ol p {
 	font-weight: normal;
 	margin: 0.6em 0;

wp-admin/includes/update-core.php

@@ -365,6 +365,13 @@ $_old_files = array(
 'wp-admin/index-extra.php',
 'wp-admin/network/index-extra.php',
 'wp-admin/user/index-extra.php',
+'wp-admin/images/screenshots/admin-flyouts.png',
+'wp-admin/images/screenshots/coediting.png',
+'wp-admin/images/screenshots/drag-and-drop.png',
+'wp-admin/images/screenshots/help-screen.png',
+'wp-admin/images/screenshots/media-icon.png',
+'wp-admin/images/screenshots/new-feature-pointer.png',
+'wp-admin/images/screenshots/welcome-screen.png',
 );
 
 /**