WordPress.org
Get WordPress

Make WordPress Core

Changeset 32260


Ignore:
Timestamp:
04/22/2015 06:03:03 AM (10 years ago)
Author:
SergeyBiryukov
Message:

About page design for 4.2.

props melchoyce, ryelle.
see #31929.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r32136 r32260  
    4242</h2>
    4343
    44 <div class="changelog headline-feature dfw">
    45     <h2>[video]</h2>
    46 
    47     <div class="feature-section">
    48         <div class="dfw-container">
    49             <img src="//s.w.org/images/core/4.1/focus.png" class="base-image" />
    50         </div>
    51         <h3><?php _e( 'An easier way to share content' ); ?></h3>
    52         <p><?php printf( __( 'Clip it, edit it, publish it. Get familiar with the new and improved Press This. From the <a href="%s">Tools</a> menu, add Press This to your browser bookmark bar or your mobile device home screen. Once installed you can share your content with lightning speed. Sharing your favorite videos, images, and content has never been this fast or this easy.' ), admin_url( 'tools.php' ) ); ?></p>
    53         <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?> [bookmarklet]</p>
    54     </div>
    55 
     44<div class="headline-feature feature-video">
     45    <?php
     46        // echo wp_video_shortcode( array(
     47        //  // 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
     48        //  'ogv'      => '//videos.files.wordpress.com/bUdzKMro/wordpress-4-0_fmt1.ogv',
     49        //  // 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
     50        //  'loop'     => false,
     51        // ) );
     52    ?>
     53    <embed type="application/x-shockwave-flash" src="https://v0.wordpress.com/player.swf?v=1.04" width="1000" height="560" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=bUdzKMro&amp;isDynamicSeeking=true"></embed>
    5654</div>
    5755
    5856<hr />
    5957
    60 <div class="changelog headline-feature">
     58<div class="feature-section two-col">
     59    <div class="col">
     60        <h3><?php _e( 'An easier way to share content' ); ?></h3>
     61        <p><?php printf( __( 'Clip it, edit it, publish it. Get familiar with the new and improved Press This. From the <a href="%s">Tools</a> menu, add Press This to your browser bookmark bar or your mobile device home screen. Once installed you can share your content with lightning speed. Sharing your favorite videos, images, and content has never been this fast or this easy.' ), admin_url( 'tools.php' ) ); ?></p>
     62        <p><?php _e( 'Drag the bookmarklet below to your bookmarks bar. Then, when you&#8217;re on a page you want to share, simply &#8220;press&#8221; it.' ); ?></p>
    6163
    62     <div class="feature-section">
    63         <div class="col">
    64             <h3><?php _e( 'Extended character support' ); ?></h3>
    65             <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
    66             <p><?php
    67                 /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
    68                 printf( __( 'Don&#8217;t use any of those characters? You can still have fun &mdash; emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '&#x1F499', '&#x1F438', '&#x1F412', '&#x1F355', __( 'https://codex.wordpress.org/Emoji' ) );
    69             ?></p>
    70         </div>
    71         <div class="col">
    72             <img class="" src="//s.w.org/images/core/4.1/mobile.png" />
    73         </div>
     64        <p class="pressthis-bookmarklet-demo">
     65            <a class="pressthis-bookmarklet" onclick="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This' ); ?></span></a>
     66        </p>
    7467    </div>
    7568
    76     <div class="clear"></div>
    77 </div>
    78 
    79 <hr />
    80 
    81 <div class="changelog customize">
    82     <div class="feature-section col three-col">
    83         <div>
    84             <?php
    85             echo wp_video_shortcode( array(
    86                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    87                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    88                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    89                 'loop'     => true,
    90                 'height'   => 218
    91             ) );
    92             ?>
    93             <h4><?php _e( 'Switch themes in the Customizer' ); ?></h4>
    94             <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
    95         </div>
    96         <div>
    97             <?php
    98             echo wp_video_shortcode( array(
    99                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    100                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    101                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    102                 'loop'     => true,
    103                 'height'   => 218
    104             ) );
    105             ?>
    106             <h4><?php _e( 'Even more embeds' ); ?></h4>
    107             <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
    108         </div>
    109         <div class="last-feature">
    110             <?php
    111             echo wp_video_shortcode( array(
    112                 'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
    113                 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    114                 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    115                 'loop'     => true,
    116                 'height'   => 218
    117             ) );
    118             ?>
    119             <h4><?php _e( 'Streamlined plugin updates' ); ?></h4>
    120             <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update&nbsp;Now</em> and watch the magic happen.' ); ?></p>
    121         </div>
     69    <div class="col">
     70        <img src="https://cldup.com/xMJ2QCxvcz.jpg" />
    12271    </div>
    12372</div>
    12473
    125 <hr />
     74<div class="feature-section two-col">
     75    <div class="col">
     76        <img src="https://cldup.com/q-2svtgKe1.jpg" />
     77    </div>
     78    <div class="col">
     79        <h3><?php _e( 'Extended character support' ); ?></h3>
     80        <p><?php _e( 'Writing in WordPress, whatever your language, just got better. WordPress 4.2 supports a host of new characters out-of-the-box, including native Chinese, Japanese, and Korean characters, musical and mathematical symbols, and hieroglyphs.' ); ?></p>
     81        <p><?php
     82            /* translators: 1: heart emoji, 2: frog face emoji, 3, monkey emoji, 4: pizza emoji, 5: Emoji Codex link */
     83            printf( __( 'Don&#8217;t use any of those characters? You can still have fun &mdash; emoji are now available in WordPress! Get creative and decorate your content with %1$s, %2$s, %3$s, %4$s, and all the many other <a href="%5$s">emoji</a>.' ), '&#x1F499', '&#x1F438', '&#x1F412', '&#x1F355', __( 'https://codex.wordpress.org/Emoji' ) );
     84        ?></p>
     85    </div>
     86</div>
    12687
    127 <div class="changelog under-the-hood">
     88<div class="changelog feature-section three-col">
     89    <div>
     90        <img src="https://cldup.com/LKcPHn8rdr.png" />
     91        <h3><?php _e( 'Switch themes in the Customizer' ); ?></h3>
     92        <p><?php _e( 'Browse and preview your installed themes from the Customizer. Make sure the theme looks great with <em>your</em> content, before it debuts on your site. ' ); ?></p>
     93    </div>
     94    <div>
     95        <img src="https://cldup.com/h0VOskQA1C.png" />
     96        <h3><?php _e( 'Even more embeds' ); ?></h3>
     97        <p><?php _e( 'Paste links from Tumblr.com and Kickstarter and watch them magically appear right in the editor. With every release, your publishing and editing experience get closer together.' ); ?></p>
     98    </div>
     99    <div class="last-feature">
     100        <img src="https://cldup.com/1_8tBZpvva.png" />
     101        <h3><?php _e( 'Streamlined plugin updates' ); ?></h3>
     102        <p><?php _e( 'Goodbye boring loading screen, hello smooth and simple plugin updates. Click <em>Update&nbsp;Now</em> and watch the magic happen.' ); ?></p>
     103    </div>
     104</div>
     105
     106<div class="changelog under-the-hood feature-list">
    128107    <h3><?php _e( 'Under the Hood' ); ?></h3>
    129108

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

    r31573 r32260  
    104104
    105105.about-wrap h3 {
    106     margin: 2em 0 .6em;
     106    margin: 1.25em 0 .6em;
    107107    font-size: 1.25em;
    108108    line-height: 1.5em;
    … …  
    148148}
    149149
    150 .about-wrap .col .last-feature {
     150.about-wrap [class$=col] .last-feature {
    151151    margin-right: 0;
    152152}
    … …  
    174174
    175175.about-wrap .headline-feature h2 {
    176     margin: 1.1em 0 0.2em;
    177     font-size: 2.4em;
     176    margin: 50px 0 30px;
     177    font-size: 2.2em;
    178178    font-weight: 300;
    179179    line-height: 1.3;
     180    text-align: left;
     181}
     182
     183.about-wrap .headline-feature h3 {
     184    margin-top: 30px;
    180185    text-align: center;
    181186}
    … …  
    186191}
    187192
    188 .about-wrap .dfw h3 {
    189     margin-top: 1em;
    190     text-align: center;
    191 }
    192 
    193193.about-wrap .feature-section h4 {
    194194    margin: 1.4em 0 0.6em 0;
    195     font-size: 1.2em;
     195    font-size: 1em;
    196196}
    197197
    … …  
    200200}
    201201
    202 .about-wrap .dfw p {
    203     max-width: 68%;
    204     margin: 0 auto 20px;
    205 }
    206 
    207202/* 2.2 - Structure */
     203
     204.about-wrap .feature-video {
     205    margin: 40px 0;
     206    width: 100%;
     207    text-align: center;
     208}
     209
     210.about-wrap .feature-video .wp-video {
     211    margin: 0 auto;
     212}
    208213
    209214.about-wrap .featured-image {
    … …  
    213218.about-wrap .feature-section {
    214219    overflow: hidden;
    215     padding-bottom: 20px;
     220    padding: 0 0 40px;
     221    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    216222}
    217223
    218224.about-wrap .headline-feature .feature-section {
    219225    margin: 0 auto;
    220     max-width: 82%;
    221 }
    222 
    223 .about-wrap .headline-feature .feature-section .col:first-child {
     226    max-width: 95%;
     227}
     228
     229.about-wrap .feature-section .col:nth-of-type(odd) {
    224230    float: left;
    225     margin: 15px 5% 0 0;
    226     width: 55%;
    227 }
    228 
    229 .about-wrap .headline-feature .feature-section .col:last-child {
     231    margin: 40px 5% 0 0;
     232    width: 48%;
     233}
     234
     235.about-wrap .feature-section .col:nth-of-type(even) {
    230236    float: right;
    231     margin: 15px 0 40px;
    232     width: 40%;
    233 }
    234 
    235 .about-wrap .feature-list .feature-section {
    236     margin-top: 0;
    237 }
    238 
    239 .about-wrap .dfw .feature-section {
    240     overflow: visible;
    241 }
    242 
    243 .about-wrap .dfw-container {
    244     position: relative;
    245     overflow: hidden;
    246     margin-top: 50px;
    247     -webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
    248     box-shadow: 0 0 10px rgba( 0, 0, 0, 0.25 );
    249 }
    250 
    251 .about-wrap .dfw-container .overlay-image {
    252     position: absolute;
    253     top: 0;
    254     left: 0;
    255     /* Cubic Bezier to speed up the slide-out of the full-width sidebar image */
    256     -webkit-transition: 0.8s -webkit-transform cubic-bezier(.9,.03,1,.61),
    257                 0.65s opacity linear;
    258     transition: 0.8s transform cubic-bezier(.9,.03,1,.61),
    259                 0.65s opacity linear;
    260 }
    261 
    262 .about-wrap .dfw-container .overlay-image.fade-in {
    263     opacity: 0;
    264 }
    265 
    266 /* rtl:ignore */
    267 .about-wrap .dfw-container .overlay-image.from-left {
    268     -webkit-transform: translate3d(-100%, 0, 0);
    269     transform: translate3d(-100%, 0, 0);
    270 }
    271 
    272 .about-wrap .dfw-container:hover .overlay-image {
    273     opacity: 1;
    274     -webkit-transform: translate3d(0, 0, 0);
    275     transform: translate3d(0, 0, 0);
    276     /* Cubic Bezier to speed up the slide-in of the full-width sidebar image */
    277     -webkit-transition: 0.7s -webkit-transform cubic-bezier( 0, 0.8, 0.8, 1 ),
    278                 0.8s opacity linear;
    279     transition: 0.7s transform cubic-bezier( 0, 0.8, 0.8, 1 ),
    280                 0.8s opacity linear;
     237    margin: 40px 0 0;
     238    width: 46%;
     239}
     240
     241.about-wrap .changelog {
     242    margin-bottom: 40px;
     243}
     244
     245.about-wrap .changelog.feature-section > div {
     246    margin-top: 40px;
    281247}
    282248
    … …  
    292258    text-decoration: none;
    293259    padding: 0 5px;
    294 }
    295 
    296 /* SVGs */
    297 .about-wrap .feature-list svg {
    298     float: left;
    299     clear: left;
    300     margin: 15px 15px 0 0;
    301     height: 90px;
    302     width: 90px;
    303     background-color: #cccccc;
    304     -webkit-border-radius: 50%;
    305     border-radius: 50%;
    306     fill: #999;
    307     border: 1px solid #c1c1c1;
    308260}
    309261
    … …  
    401353
    402354@media screen and ( max-width: 782px ) {
     355    .about-wrap .feature-section {
     356        padding: 0;
     357        border-bottom: none;
     358    }
     359
    403360    .about-wrap .one-col > div,
    404361    .about-wrap .two-col > div,
    405     .about-wrap .three-col > div {
     362    .about-wrap .three-col > div,
     363    .about-wrap .two-col .col:nth-of-type(n) {
    406364        width: 100%;
    407         margin: 0 0 40px;
     365        margin: 40px 0 0;
    408366        padding: 0 0 40px;
    409367        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    410368    }
    411369
    412     .about-wrap .feature-list div,
    413     .about-wrap .col > div.last-feature {
     370    .about-wrap .two-col .col h3 {
     371        margin-top: 0;
     372    }
     373
     374    .about-wrap .three-col img {
     375        display: block;
     376        margin: 0 auto;
     377    }
     378
     379    .about-wrap .feature-list div {
    414380        margin: 0;
    415381        padding: 0;
Note: See TracChangeset for help on using the changeset viewer.