WordPress.org

Make WordPress Core

Changeset 25839


Ignore:
Timestamp:
10/18/2013 08:10:43 AM (6 years ago)
Author:
nacin
Message:

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.

Location:
trunk/src
Files:
5 added
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r25835 r25839  
    1313
    1414list( $display_version ) = explode( '-', $wp_version );
     15
     16wp_enqueue_script( 'about' );
    1517
    1618include( ABSPATH . 'wp-admin/admin-header.php' );
     
    3739    <h3><?php _e( 'Background Updates' ); ?></h3>
    3840
    39     <div class="feature-section col two-col">
     41    <div class="feature-section col three-col about-updates">
    4042        <div>
    4143            <h4><?php _e( 'Updates While You Sleep' ); ?></h4>
    4244            <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>
    43             <?php
     45        </div>
     46        <div><img alt="" src="images/about-updates-2x.png" /></div>
     47        <div class="last-feature">
     48            <h4><?php _e( 'More Reliable Than Ever' ); ?></h4>
     49            <p><?php _e( 'The update process has been made even more reliable and secure, with dozens of new checks and safeguards.' ); ?></p>
     50            <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>
     51        </div>
     52        <?php
    4453            $can_auto_update = wp_http_supports( 'ssl' );
    4554            if ( $can_auto_update ) {
     
    5867            <?php else : ?>
    5968                <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>
    60             <?php endif; ?>
    61         </div>
    62         <div class="last-feature">
    63             <h4><?php _e( 'More Reliable Than Ever' ); ?></h4>
    64             <p><?php _e( 'The update process has been made even more reliable and secure, with dozens of new checks and safeguards.' ); ?></p>
    65             <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>
    66         </div>
     69        <?php endif; ?>
    6770    </div>
    6871</div>
    6972
    70 <div class="changelog">
     73<div class="changelog about-passwords">
    7174    <h3><?php _e( 'Create Stronger Passwords' ); ?></h3>
    7275
    7376    <div class="feature-section col two-col">
    7477        <div>
    75             <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>
     78            <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>
     79            <p><strong><?php _e( 'Try it out on the right.' ); ?></strong></p>
    7680        </div>
    77         <div class="last-feature">
    78             (Actual password meter demo)
     81        <div class="last-feature about-password-meter">
     82            <input type="password" id="pass" size="25" value="" />
     83            <p id="pass-strength-result" ><?php _e( 'Strength indicator' ); ?></p>
     84            <?php printf( __( 'Getting the urge to <a href="%s">change your password</a>?' ), esc_url( self_admin_url( 'profile.php' ) ) ); ?>
    7985        </div>
    8086    </div>
     
    8591        <div>
    8692            <h3><?php _e( 'Improved Search Results' ); ?></h3>
    87             <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>
     93            <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>
    8894        </div>
    8995        <div class="last-feature">
    9096            <h3><?php _e( 'Better Global Support' ); ?></h3>
    91             <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>
     97            <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>
    9298        </div>
    9399    </div>
  • trunk/src/wp-admin/css/colors-classic.css

    r24761 r25839  
    19991999.about-wrap .feature-section h4 {
    20002000    color: #464646;
    2001 }
    2002 
    2003 .about-wrap .feature-section img {
    2004     background: #fff;
    2005     border: 1px #ccc solid;
    2006     -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
    2007     box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
    20082001}
    20092002
  • trunk/src/wp-admin/css/colors-fresh.css

    r24761 r25839  
    18881888.about-wrap .feature-section h4 {
    18891889    color: #464646;
    1890 }
    1891 
    1892 .about-wrap .feature-section img {
    1893     background: #fff;
    1894     border: 1px #ccc solid;
    1895     -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
    1896     box-shadow:         0 1px 3px rgba( 0, 0, 0, 0.3 );
    18971890}
    18981891
  • trunk/src/wp-admin/css/wp-admin.css

    r25806 r25839  
    57675767}
    57685768
     5769.about-wrap p.about-notice {
     5770    background-color: #ffffe0;
     5771    border: 1px solid #e6db55;
     5772    margin: 5px 0 15px;
     5773    padding: 0.4em 0.8em;
     5774    border-radius: 3px;
     5775    -webkit-border-radius: 3px;
     5776}
     5777
     5778.about-wrap .about-passwords {
     5779    margin: 20px 0;
     5780    padding: 1px 20px 10px;
     5781    background-color: #f9f9f9;
     5782}
     5783
     5784.about-wrap .about-password-meter input {
     5785    font-size: 250%;
     5786    width: 100%;
     5787    display: block;
     5788    width: 100%;
     5789    padding: 5px;
     5790}
     5791
     5792.about-wrap .about-password-meter #pass-strength-result {
     5793    font-weight: normal !important;
     5794    display:block !important;
     5795    font-size: 150%;
     5796    width: 100%;
     5797    padding: 17px 0;
     5798    margin-bottom: 15px;
     5799}
     5800
     5801.about-wrap .feature-section img {
     5802    border: 0;
     5803    background: transparent;
     5804    box-shadow: none;
     5805    -webkit-box-shadow: none;
     5806    max-width: 20%;
     5807}
     5808
     5809.about-wrap .feature-section div p img {
     5810    float: right;
     5811    margin-left: 10px;
     5812}
     5813
    57695814/* Typography */
    57705815
     
    58085853    padding-bottom: 20px;
    58095854}
     5855
     5856.about-wrap .feature-section
    58105857
    58115858.about-wrap .feature-section h4 {
     
    59596006    margin-right: 4.999999999%;
    59606007    float: left;
     6008}
     6009
     6010.about-wrap .three-col.about-updates div:nth-of-type(1),
     6011.about-wrap .three-col.about-updates div:nth-of-type(3) {
     6012    width: 37%;
     6013    margin: 0;
     6014}
     6015
     6016.about-wrap .three-col.about-updates div:nth-of-type(2) {
     6017    width: 16%;
     6018    margin: 0 5%;
     6019}
     6020
     6021.about-wrap .three-col.about-updates img {
     6022    margin: 0;
    59616023}
    59626024
  • trunk/src/wp-admin/js/password-strength-meter.js

    r25637 r25839  
    1515                blacklist = [ blacklist.toString() ];
    1616
    17             if (password1 != password2 && password2.length > 0)
     17            if (password1 != password2 && password2 && password2.length > 0)
    1818                return 5;
    1919
  • trunk/src/wp-includes/script-loader.php

    r25692 r25839  
    333333    $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
    334334
     335    $scripts->add( 'about', "/wp-admin/js/about$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
     336
    335337    $scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 );
    336338
Note: See TracChangeset for help on using the changeset viewer.