WordPress.org
Get WordPress

Make WordPress Core

Changeset 26737


Ignore:
Timestamp:
12/06/2013 07:35:25 PM (9 years ago)
Author:
iammattthomas
Message:

Updates to the About page:

  • A live color scheme preview
  • Replace the hard-coded version number
  • Copy edits
  • New screenshots
  • Size adjustments to the header and WP badge
  • Capitalize 'Open Sans'

See #26387, props markoheijnen, ryelle, siobhan, melchoyce.

Location:
trunk/src/wp-admin
Files:
3 added
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/about.php

    r26723 r26737  
    2222<h1><?php printf( __( 'Welcome to WordPress %s' ), $display_version ); ?></h1>
    2323
    24 <div class="about-text"><?php printf( __( 'Thank you for updating to WordPress 3.8! We&rsquo;re happy to bring you the most beautiful WordPress yet.' ), $display_version ); ?></div>
     24<div class="about-text"><?php printf( __( 'Thank you for updating to WordPress %s, the most beautiful WordPress yet.' ), $display_version ); ?></div>
    2525
    2626<div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
    … …  
    3737
    3838<div class="changelog">
    39     <h2 class="about-headline-callout"><?php echo ( 'Introducing a new, modern admin design' ); ?></h2>
     39    <h2 class="about-headline-callout"><?php echo ( 'Introducing a modern new design' ); ?></h2>
    4040    <img class="about-overview-img" src="<?php echo admin_url( 'images/about-overview.png' ); ?>" />
    4141
    4242    <div class="feature-section col three-col about-updates">
    4343        <div class="col-1">
    44             <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    45             <h3><?php echo ( 'Modern aesthetics' ); ?></h3>
    46             <p><?php echo ( 'Goodbye decoration, hello simplicity. We removed extraneous details, focusing on a cleaner, more streamlined admin design.' ); ?></p>
     44            <img src="images/about-modern-aesthetics.png" />
     45            <h3><?php echo ( 'Modern aesthetic' ); ?></h3>
     46            <p><?php echo ( 'The new admin has a fresh, simple design that puts clarity and simplicity ahead of web design flourishes.' ); ?></p>
    4747        </div>
    4848        <div class="col-2">
    49             <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    50             <h3><?php echo ( 'Improved typography' ); ?></h3>
    51             <p><?php echo ( 'You might notice the type is a little bit bigger. We improved the typography, crafting a better reading experience.' ); ?></p>
     49            <img src="images/about-typography.png" />
     50            <h3><?php echo ( 'Clean typography' ); ?></h3>
     51            <p><?php echo ( 'Open Sans meets open source. WordPress&#8217;s new typography is upright, friendly, and optimized for web and mobile interfaces.' ); ?></p>
    5252        </div>
    5353        <div class="col-3 last-feature">
    54             <p style="margin-top: 20px; background-color: grey; padding: 1em; color: white; min-height: 150px;">Image</p>
    55             <h3><?php echo ( 'Higher contrast' ); ?></h3>
    56             <p><?php echo ( 'With bigger typography and both high and low contrast color schemes, our new admin design is great for users of all ages.' ); ?></p>
     54            <img src="images/about-contrast.png" />
     55            <h3><?php echo ( 'Refined contrast' ); ?></h3>
     56            <p><?php echo ( 'What good is beautiful design if you can&#8217;t see it? Improved contrast gives you a better reading experience.' ); ?></p>
    5757        </div>
    5858    </div>
    … …  
    6161<hr>
    6262
    63 <!-- Image example -->
    64 <!-- <img alt="" src="<?php echo admin_url( 'images/about-search-2x.png' ); ?>" /> -->
    65 
    6663<div class="changelog">
    6764    <div class="feature-section col two-col">
    6865        <div>
    69             <h3><?php echo ( 'Take WordPress with you anywhere with our responsive design' ); ?></h3>
    70             <p><?php echo ( 'The WordPress admin is now completely responsive: you can work on your website easily from your smartphone or tablet. The full power of WordPress is at your fingertips, even when you’re on the go.' ); ?></p>
    71             <h4><?php echo ( 'Naturally HiDPI' ); ?></h4>
    72             <p><?php echo ( 'No more blurry edges &#8212; with the inclusion of vector icons and graphics, the admin is now entirely HiDPI, so you get the best viewing experience no matter what kind of computer or mobile device you use.' ); ?></p>
     66            <h3><?php echo ( 'WordPress on every device' ); ?></h3>
     67            <p><?php echo ( 'Whether you&#8217;re on your smartphone or tablet, your notebook or desktop, WordPress looks beautiful on every device. Now you can update your website wherever you are.' ); ?></p>
     68            <h4><?php echo ( 'High definition is here' ); ?></h4>
     69            <p><?php echo ( 'WordPress is sharper than ever; vector icons and graphics mean no more blurry edges. You get the best viewing experience no matter what type of device you use.' ); ?></p>
    7370        </div>
    7471        <div class="last-feature about-colors-img">
    … …  
    8380    <div class="feature-section col one-col">
    8481        <div>
    85             <h3><?php echo ( 'Now with more color' ); ?></h3>
    86             <p><?php echo ( 'Your admin is not longer monochromatic &#8212; we&#8217;ve brought some more color to keep it looking fresh. You now have the option of four different default color schemes.' ); ?></p>
    87             <p><?php echo ( 'Try them out below:' ); ?></p>
    88             <img src="https://i.cloudup.com/NBlGusRk0H.png" style="border: 2px solid red; max-width: 99%; margin: 0;" />
    89             <p><?php echo ( 'You can change your color scheme at any time from your profile page.' ); ?></p>
     82            <h3><?php echo ( 'Pick a color' ); ?></h3>
     83            <p><?php echo ( 'We&#8217;ve included four color schemes so that you can choose your favorite. Don&#8217;t like this striking new admin? Choose from any of the schemes below to change it in an instant.' ); ?></p>
     84            <?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?>
     85                <?php
     86                /** This action is documented in wp-admin/user-edit.php */
     87                do_action( 'admin_color_scheme_picker' );
     88                ?>
     89            <?php else : ?>
     90                <img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" />
     91            <?php endif; ?>
     92            <p><?php printf( ( 'To change your color scheme later, just <a href="%1$s">visit your profile settings</a>.' ), get_edit_profile_url( get_current_user_id() ) ); ?></p>
    9093        </div>
    9194    </div>
    … …  
    98101        <div>
    99102            <h3><?php echo ( 'A new theme experience' ); ?></h3>
    100             <p><?php echo ( 'A sleeker, faster, and more visual organization of your themes that is responsive.' ); ?></p>
    101             <h4><?php echo ( 'Browse better' ); ?></h4>
    102             <p><?php echo ( 'Enjoy a focused experience with theme screenshots at the center. Quickly search through your themes or add new ones.' ); ?></p>
     103            <p><?php echo ( 'Finding and installing the right theme has never been easier.' ); ?></p>
     104            <h4><?php echo ( 'Better browsing' ); ?></h4>
     105            <p><?php echo ( 'Focus is placed on what&#8217;s important - your theme&#8217;s design. Search through your themes at a glance and add new ones with a click.' ); ?></p>
    103106            <h4><?php echo ( 'Dive into the details' ); ?></h4>
    104             <p><?php echo ( 'Expand a theme to see more information and preview it. Use the arrow navigation to quickly swift through your themes.' ); ?></p>
    105             <h4><?php echo ( 'Easier updates' ); ?></h4>
    106             <p><?php echo ( 'Identify immediately when a theme update is available.' ); ?></p>
     107            <p><?php echo ( 'If you need information about any of your themes just click to discover more. Sit back and use your keyboard&#8217;s navigation arrows to flip through every theme you&#8217;ve got.' ); ?></p>
     108            <h4><?php echo ( 'Stay updated' ); ?></h4>
     109            <p><?php echo ( 'You can tell in an instant if a theme needs updated and, like so many things in WordPress, updating it takes just a second.' ); ?></p>
    107110        </div>
    108111        <div class="last-feature about-themes-img">
    … …  
    118121    <img src="<?php echo admin_url( 'images/about-twentyfourteen.png' ); ?>" />
    119122
    120     <div class="feature-section col one-col">
     123    <div class="feature-section col one-col center-col">
    121124        <div>
    122             <h3><?php echo ( 'Our new default theme lets you create a responsive magazine website with an elegant, modern design.' ); ?></h3>
    123             <p><?php echo ( 'Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content&#8217;s layout with a full width page template and a contributor page to show of your authors.' ); ?></p>
     125            <h3><?php echo ( 'Turn your blog into a magazine' ); ?></h3>
     126            <p><?php echo ( 'With a striking design that does not comprise on our trademark simplicity, Twenty Fourteen is our boldest default theme. Choose a grid or a slider to display featured content on your homepage. Customize your homepage with three widget areas or change your layout with two page templates.' ); ?></p>
    124127            <p><?php echo ( 'Creating a magazine website with WordPress has never been easier.' ); ?></p>
    125128        </div>
    … …  
    128131
    129132<hr>
    130 
    131 <div class="changelog">
    132     <h3><?php echo ( 'Under the Hood' ); ?></h3>
    133 
    134     <div class="feature-section col three-col">
    135         <div>
    136             <h4><?php echo ( 'Meta query fixes' ); ?></h4>
    137             <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
    138         </div>
    139         <div>
    140             <h4><?php echo ( 'Automated RTL styles' ); ?></h4>
    141             <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
    142         </div>
    143         <div class="last-feature">
    144             <h4><?php echo ( 'Improved customizer' ); ?></h4>
    145             <p><?php echo ( 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis.' ); ?></p>
    146         </div>
    147 </div>
    148133
    149134<div class="return-to-dashboard">

  • trunk/src/wp-admin/css/wp-admin.css

    r26733 r26737  
    78287828
    78297829.about-text {
    7830     margin: 1em 200px 1.4em 0;
     7830    margin: 1em 200px 0em 0;
    78317831    min-height: 60px;
    78327832    font-size: 24px;
    … …  
    78347834
    78357835.about-wrap .changelog h2.about-headline-callout {
    7836     margin: 1em 0 0;
     7836    margin: 1.5em 0 0;
    78377837    font-size: 2.2em;
    78387838    font-weight: 300;
    … …  
    78637863/* 3.8 Images */
    78647864
    7865 .about-wrap .about-colors-img,
     7865.about-wrap .about-colors-img {
     7866    bottom: -25px;
     7867}
     7868
    78667869.about-wrap .about-themes-img {
    7867     bottom: -25px;
     7870    bottom: -32px;
    78687871}
    78697872
    … …  
    79027905    background: url('../images/w-logo-white.png?ver=20131202') no-repeat;
    79037906    background: none, url('../images/wordpress-logo-white.svg?ver=20131110') no-repeat;
    7904     background-position: center 30px;
    7905     background-size: 110px 110px;
     7907    background-position: center 24px;
     7908    background-size: 85px 85px;
    79067909    font-size: 14px;
    79077910    text-align: center;
    79087911    font-weight: 600;
    79097912    margin: 5px 0 0;
    7910     padding-top: 155px;
    7911     height: 45px;
     7913    padding-top: 120px;
     7914    height: 40px;
    79127915    display: inline-block;
    7913     width: 165px;
     7916    width: 150px;
    79147917    text-rendering: optimizeLegibility;
    79157918}
    … …  
    79507953}
    79517954
    7952 .about-wrap .feature-section.one-col div {
     7955.about-wrap .feature-section.center-col > div {
    79537956    margin: auto;
    79547957    width: 60%;
    79557958}
    79567959
    7957 .about-wrap .about-colors .one-col div {
     7960.about-wrap .about-colors .one-col > div {
    79587961    width: 100%;
    79597962}
    79607963
    7961 .about-wrap .feature-section.two-col div {
     7964.about-wrap .feature-section.two-col > div {
    79627965    position: relative;
    79637966    width: 50%;
    … …  
    79657968}
    79667969
     7970.about-wrap .feature-section.three-col > div {
     7971    position: relative;
     7972    width: 29.95%;
     7973    margin-right: 4.999999999%;
     7974    float: left;
     7975}
     7976
     7977.about-wrap .feature-section.col .last-feature {
     7978    margin-right: 0;
     7979}
     7980
     7981.about-wrap .about-updates img {
     7982    margin: 2em 0 0 0;
     7983    border: 1px solid #ddd;
     7984    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     7985    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     7986}
     7987
     7988.about-wrap .changelog .feature-section {
     7989    overflow: hidden;
     7990}
     7991
     7992.about-wrap .about-colors .scheme-list {
     7993    margin-bottom: 1em;
     7994}
     7995
     7996.about-wrap .about-colors .color-option {
     7997    width: 24%;
     7998    padding-top: 10px;
     7999}
     8000.about-wrap .about-colors .color-option label {
     8001    display: inline-block;
     8002    margin: 0.25em 0 0.5em;
     8003}
     8004
    79678005.about-wrap .feature-section.two-col div p {
    79688006    margin-right: 3%;
    7969 }
    7970 
    7971 .about-wrap .feature-section.three-col div {
    7972     position: relative;
    7973     width: 30%;
    7974     margin-right: 4.999999999%;
    7975     float: left;
    7976 }
    7977 
    7978 .about-wrap .feature-section.col .last-feature {
    7979     margin-right: 0;
    7980 }
    7981 
    7982 .about-wrap .three-col.about-updates img {
    7983     margin: 0;
    7984 }
    7985 
    7986 .about-wrap .changelog .feature-section {
    7987     overflow: hidden;
    7988 }
    7989 
    7990 .about-wrap .about-passwords {
    7991     margin: 20px 0;
    7992     padding: 1px 20px 10px;
    7993     background-color: #fff;
    7994 }
    7995 
    7996 .about-wrap .about-auto-update {
    7997     text-align: center;
    7998     background-color: #f9f9ef;
    7999     clear: both;
    8000     padding: 10px;
    8001 }
    8002 
    8003 .about-wrap .about-auto-update.cool {
    8004     background-color: #eff9ef;
    8005 }
    8006 
    8007 .about-wrap .about-password-meter input {
    8008     font-size: 250%;
    8009     line-height: 1;
    8010     width: 100%;
    8011     display: block;
    8012     padding: 5px;
    8013 }
    8014 
    8015 .about-wrap .about-password-meter #pass-strength-result {
    8016     display: block !important;
    8017     font-size: 150%;
    8018     font-weight: normal !important;
    8019     -webkit-box-sizing: border-box;
    8020     -moz-box-sizing:    border-box;
    8021     box-sizing:         border-box;
    8022     width: 100%;
    8023     padding: 17px 0;
    8024     margin-bottom: 15px;
    80258007}
    80268008
    … …  
    1273412716
    1273512717    /*  About Page */
    12736     .about-wrap .feature-section.two-col div {
     12718    .about-wrap .feature-section.one-col > div,
     12719    .about-wrap .feature-section.two-col > div,
     12720    .about-wrap .three-col.about-updates > div  {
    1273712721        width: 100%;
    1273812722        margin: 0;
    … …  
    1274012724    }
    1274112725
    12742     .about-wrap .three-col.about-updates .col-1,
    12743         /*.about-wrap .three-col.about-updates .col-2,*/
    12744     .about-wrap .three-col.about-updates .col-3 {
    12745         padding: 0;
    12746     }
    12747 
    12748     .about-wrap .three-col.about-updates .col-1 {
    12749         width: 100%;
    12750         padding-right: 210px;
    12751     }
    12752 
    12753     .about-wrap .three-col.about-updates .col-2 {
    12754         position: relative;
    12755         float: right;
    12756         width: 180px;
    12757         margin-left: -100%;
    12758     }
    12759 
    12760     .about-wrap .three-col.about-updates .col-3 {
    12761         width: 100%;
    12762     }
    12763 
    12764     .about-wrap .about-password-meter input,
    12765     .about-wrap .about-password-meter #pass-strength-result {
    12766         width: 99%;
     12726    .about-wrap .about-colors .color-option {
     12727        width: 49%;
    1276712728    }
    1276812729
    … …  
    1290512866        width: 100%;
    1290612867        float: none;
    12907     }
    12908 
    12909     .about-wrap .about-passwords {
    12910         margin: 20px -20px;
    1291112868    }
    1291212869

  • trunk/src/wp-admin/js/about.js

    r26065 r26737  
    1 /* global pwsL10n:true */
     1/* global isRtl */
    22(function($){
    3     var password = 'Gosh, WordPress is grand.',
    4         $input = $('#pass'),
    5         shouldAnimate = true,
    6         timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600],
    7         resultsCache = {},
    8         indicatorString = $('#pass-strength-result').text();
    93
    10     function updateResult(){
    11         var strength;
     4    $(document).ready( function() {
     5        var $colorpicker, $stylesheet;
     6   
     7        $('.color-palette').click( function() {
     8            $(this).siblings('input[name="admin_color"]').prop('checked', true);
     9        });
     10   
     11        $colorpicker = $( '#color-picker' );
     12        $stylesheet = $( '#colors-css' );
     13        if ( isRtl ){
     14            $stylesheet = $( '#colors-rtl-css' );
     15        }
     16   
     17        $colorpicker.on( 'click.colorpicker', '.color-option', function() {
     18            var colors, css_url,
     19                $this = $(this);
     20   
     21            if ( $this.hasClass( 'selected' ) ) {
     22                return;
     23            }
     24   
     25            $this.siblings( '.selected' ).removeClass( 'selected' );
     26            $this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
     27   
     28            // Set color scheme
     29            // Load the colors stylesheet
     30            css_url = $this.children( '.css_url' ).val();
     31            if ( isRtl ){
     32                css_url = css_url.replace('.min', '-rtl.min');
     33            }
    1234
    13         if ( typeof( resultsCache[ $input.val() ]) === 'undefined') {
    14             strength = wp.passwordStrength.meter($input.val(), [], $input.val());
    15             resultsCache[ $input.val() ] = strength;
    16         } else {
    17             strength = resultsCache[ $input.val() ];
    18         }
     35            $stylesheet.attr( 'href', css_url );
    1936
    20         $('#pass-strength-result').removeClass('short bad good strong');
    21         switch ( strength ) {
    22             case 2:
    23                 $('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
    24                 break;
    25             case 3:
    26                 $('#pass-strength-result').addClass('good').html( pwsL10n.good );
    27                 break;
    28             case 4:
    29                 $('#pass-strength-result').addClass('strong').html( pwsL10n.strong );
    30                 break;
    31             default:
    32                 $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
    33         }
    34     }
    35     function resetMeter(){
    36         $input.val('');
    37         $('#pass-strength-result').text(indicatorString);
    38         $('#pass-strength-result').removeClass('short bad good strong');
    39     }
     37            // repaint icons
     38            if ( typeof wp !== 'undefined' && wp.svgPainter ) {
     39                try {
     40                    colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
     41                } catch ( error ) {}
    4042
    41     function animate(){
    42         if (shouldAnimate === false)
    43             return;
    44         if ($input.val().length < password.length){
    45             $input.val( password.substr(0, $input.val().length + 1) );
    46             updateResult();
    47 
    48             // Look like real typing by changing the speed new letters are added each time
    49             setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) );
    50         } else {
    51             resetMeter();
    52 
    53             // When we reset, let's wait a bit longer than normal to start again
    54             setTimeout(animate, 700);
    55         }
    56 
    57     }
    58 
    59     function begin(){
    60         // we async load zxcvbn, so we need to make sure it's loaded before starting
    61         if (typeof(zxcvbn) !== 'undefined')
    62             animate();
    63         else
    64             setTimeout(begin,800);
    65     }
    66 
    67     // Turn off the animation on focus
    68     $input.on('focus', function(){
    69         shouldAnimate = false;
    70         resetMeter();
     43                if ( colors ) {
     44                    wp.svgPainter.setColors( colors );
     45                    wp.svgPainter.paint();
     46                }
     47            }
     48        });
    7149    });
    7250
    73     // Act like a normal password strength meter
    74     $input.on('keyup', function(){
    75         updateResult();
    76     });
    77 
    78     // Start the animation
    79     begin();
    80 
    8151})(jQuery);
Note: See TracChangeset for help on using the changeset viewer.