Optimize about pages for a lovely 960px semi-fluid grid. props helenyhou, fixes #19386.

git-svn-id: http://svn.automattic.com/wordpress/trunk@19495 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2011-11-30 21:19:39 +00:00
parent 5ec6bd4833
commit 3424f94b08
8 changed files with 97 additions and 64 deletions

View File

@ -57,25 +57,24 @@ include( './admin-header.php' );
<div class="changelog">
<h3><?php _e( 'Dashboard Design' ); ?></h3>
<div class="feature-section angled-left">
<div class="left-feature">
<h4><?php _e( 'Flyout Menus' ); ?></h4>
<p><?php _e( 'Speed up navigating the dashboard and reduce repetitive clicking with our new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen.' ); ?></p>
</div>
<img src="images/screenshots/admin-flyouts.png" />
<div class="right-feature">
<h4><?php _e( 'Responsive Design' ); ?></h4>
<p><?php _e( 'Certain dashboard screens have been updated to look better at various sizes, including improved iPad/tablet support.' ); ?></p>
<div class="feature-section text-features">
<h4><?php _e( 'Flyout Menus' ); ?></h4>
<p><?php _e( 'Speed up navigating the dashboard and reduce repetitive clicking with our new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen.' ); ?></p>
<div>
<h4><?php _e( 'Header + Admin Bar = Toolbar' ); ?></h4>
<p><?php _e( 'To save space and increase efficiency, we&#8217;ve combined the admin bar and the old Dashboard header into one persistent toolbar. Hovering over the toolbar items will reveal submenus when available for quick access. ' ); ?></p>
</div>
</div>
<div class="feature-section angled-right">
<div class="left-feature">
<h4><?php _e( 'Header + Admin Bar = Toolbar' ); ?></h4>
<p><?php _e( 'To save space and increase efficiency, we&#8217;ve combined the admin bar and the old Dashboard header into one persistent toolbar. Hovering over the toolbar items will reveal submenus when available for quick access. ' ); ?></p>
<div class="feature-section screenshot-features">
<div class="angled-left">
<img src="images/screenshots/admin-flyouts.png" />
<h4><?php _e( 'Responsive Design' ); ?></h4>
<p><?php _e( 'Certain dashboard screens have been updated to look better at various sizes, including improved iPad/tablet support.' ); ?></p>
</div>
<img src="images/screenshots/help-screen.png" />
<div class="right-feature">
<div class="angled-right">
<img src="images/screenshots/help-screen.png" />
<h4><?php _e( 'Help Tabs' ); ?></h4>
<p><?php _e( 'The Help tabs located in the upper corner of the dashboard screens below your name have gotten a facelift. Help content is broken into smaller sections for easier access, with links to relevant documentation and the support forums always visible.' ); ?></p>
</div>
@ -110,7 +109,7 @@ include( './admin-header.php' );
<div class="feature-section three-col">
<div>
<h4><?php _e( 'Better Co-Editing' ); ?></h4>
<img src="images/screenshots/coediting.png" />
<img src="images/screenshots/coediting.png" class="element-screenshot" />
<p><?php _e( 'Have you ever gone to edit a post after someone else has finished with it, only to get an alert that tells you the other person is still editing the post? From now on, you&#8217;ll only get that alert if another person is still on the editing screen &mdash; no more time lag.' ); ?></p>
</div>
<div>

File diff suppressed because one or more lines are too long

View File

@ -410,6 +410,20 @@ table.ie-fixed {
min-width: 400px;
}
.about-wrap img.element-screenshot {
padding: 2px;
}
.about-wrap .feature-section img,
.about-wrap .feature-section .image-mask {
border-width: 1px;
border-style: solid;
}
.about-wrap .feature-section.three-col img {
margin-left: 0;
}
/* IE6 leftovers */
* html .row-actions {

File diff suppressed because one or more lines are too long

View File

@ -1374,24 +1374,33 @@ h2 .nav-tab {
.about-wrap .feature-section .left-feature {
margin-right: 0;
margin-left: 10%;
margin-left: 0;
}
.about-wrap .feature-section .right-feature {
margin-left: 0;
margin-right: 9%;
}
.about-wrap .feature-section.angled-left .left-feature,
.about-wrap .feature-section.angled-right .left-feature {
margin-right: 0;
margin-left: 3%;
}
.about-wrap .feature-section.angled-left .right-feature,
.about-wrap .feature-section.angled-right .right-feature {
.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: 4%;
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: 2em;
}
.about-wrap .feature-section.images-stagger-right .angled-left,
@ -1399,10 +1408,6 @@ h2 .nav-tab {
float: left;
}
.about-wrap .feature-section.three-col img {
margin: 0.5em 0 1em 0;
}
.about-wrap li.wp-person,
.about-wrap li.wp-person img.gravatar {
float: right;

File diff suppressed because one or more lines are too long

View File

@ -4829,7 +4829,8 @@ input.button-highlighted,
.about-wrap {
position: relative;
margin: 25px 40px 0 20px;
width: 770px;
min-width: 770px;
max-width: 1050px; /* readability */
font-size: 15px;
}
@ -4888,6 +4889,9 @@ input.button-highlighted,
.about-wrap code {
font-size: 14px;
}
html.ie8 .about-wrap img.element-screenshot {
padding: 2px;
}
/* WordPress Version Badge */
@ -4919,6 +4923,7 @@ input.button-highlighted,
padding: 4px 10px 6px;
margin: 0 3px -1px 0;
font-size: 18px;
vertical-align: top;
}
.about-wrap h2 .nav-tab-active {
font-weight: bold;
@ -4946,41 +4951,46 @@ input.button-highlighted,
-webkit-border-radius: 3px;
border-radius: 3px;
}
.about-wrap .feature-section.angled-right {
margin-top: -10.5em;
}
.about-wrap .feature-section.angled-right .left-feature {
padding-top: 9.5em;
}
.about-wrap .feature-section.angled-right img,
.about-wrap .feature-section.angled-left img {
margin-top: 1.5em;
html.ie8 .about-wrap .feature-section img,
html.ie8 .about-wrap .feature-section .image-mask {
border-width: 1px;
border-style: solid;
}
.about-wrap .feature-section.angled-left .left-feature,
.about-wrap .feature-section.angled-right .left-feature {
margin-right: 3%;
.about-wrap .feature-section.text-features {
width: 31%;
float: left;
overflow: visible;
}
.about-wrap .feature-section.angled-left .right-feature,
.about-wrap .feature-section.angled-right .right-feature {
margin-left: 3%;
.about-wrap .feature-section.text-features div {
width: 112%;
}
.about-wrap .feature-section .left-feature {
margin-right: 5%;
}
.about-wrap .feature-section .right-feature {
margin-left: 5%;
.about-wrap .feature-section.screenshot-features {
width: 67%;
margin-top: 1.33em;
float: right;
clear: none;
overflow: visible;
}
.about-wrap .feature-section.angled-left .left-feature,
.about-wrap .feature-section.angled-right .right-feature {
width: 27%;
.about-wrap .feature-section.screenshot-features .angled-right {
margin-top: -1em;
margin-left: 2.5em;
}
.about-wrap .feature-section.angled-left .right-feature,
.about-wrap .feature-section.angled-right .left-feature {
width: 32%;
.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 {
@ -4997,8 +5007,13 @@ input.button-highlighted,
margin: 0 0 0.6em 0;
}
.about-wrap .feature-section.three-col img {
margin: 0.5em 3px 1em 0;
margin: 0.5em 0 0.5em 5px;
max-width: 100%;
float: none;
}
html.ie8 .about-wrap .feature-section.three-col img {
margin-left: 0;
}
.about-wrap .feature-section.three-col .last-feature {
margin-right: 0;

View File

@ -433,9 +433,9 @@ 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(), '20111130a' );
$styles->add( 'wp-admin', "/wp-admin/css/wp-admin$suffix.css", array(), '20111130b' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20111123' );
$styles->add( 'ie', "/wp-admin/css/ie$suffix.css", array(), '20111130' );
$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
// all colors stylesheets need to have the same query strings (cache manifest compat)