Make WordPress Core

Changeset 29706


Ignore:
Timestamp:
09/04/2014 03:04:02 PM (8 years ago)
Author:
helen
Message:

Final about page for 4.0. Enjoy the videos!

props ryelle, melchoyce, smashcut, wonderboymusic, helen.
fixes #29494.

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

Legend:

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

    r29684 r29706  
    1212wp_enqueue_style( 'wp-mediaelement' );
    1313wp_enqueue_script( 'wp-mediaelement' );
    14 add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
     14wp_localize_script( 'mediaelement', '_wpmejsSettings', array(
     15    'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
     16    'pauseOtherPlayers' => ''
     17) );
    1518
    1619$title = __( 'About' );
     
    4144<div class="changelog">
    4245    <div class="about-overview">
    43         <h2 class="about-headline-callout"><?php _e( 'Manage your media with style' ); ?></h2>
    44         <!-- media-grid-cropped.png -->
    45         <img class="about-overview-img" src="https://i.cloudup.com/gFjdHZjkbI.png" />
    46         <p><?php _e( 'Explore your uploads in a beautiful, endless grid. A new details preview makes viewing and editing any amount of media in sequence a snap.' ); ?></p>
     46        <?php if ( ( $locale = get_locale() ) && 'en_' === substr( $locale, 0, 3 ) ) : ?>
     47            <embed src="//v.wordpress.com/bUdzKMro" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed>
     48        <?php else : ?>
     49            <img class="about-overview-img" src="//s.w.org/images/core/4.0/wp40.png" width="640" height="360" />
     50        <?php endif; ?>
    4751    </div>
    4852
     
    5155    <div class="feature-section col two-col">
    5256        <div class="col-1">
    53             <!-- oembed.mp4 -->
    54             <?php
    55                 echo wp_video_shortcode( array(
    56                     'mp4'      => 'https://i.cloudup.com/IdZ7t3ixES.mp4',
    57                     // 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
    58                     // 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
    59                     'loop'     => true,
    60                     'autoplay' => true,
    61                     'width'    => 499
    62                 ) );
    63             ?>
     57            <h3><?php _e( 'Manage your media with style' ); ?></h3>
     58            <p><?php _e( 'Explore your uploads in a beautiful, endless grid. A new details preview makes viewing and editing any amount of media in sequence a snap.' ); ?></p>
     59        </div>
     60        <div class="col-2 last-feature">
     61            <img src="//s.w.org/images/core/4.0/media.jpg" />
     62        </div>
     63    </div>
     64
     65    <hr />
     66
     67    <div class="feature-section col two-col">
     68        <div class="col-1">
     69            <div class="about-video about-video-embed">
     70                <?php
     71                    echo wp_video_shortcode( array(
     72                        'mp4'      => '//s.w.org/images/core/4.0/embed.mp4',
     73                        'ogv'      => '//s.w.org/images/core/4.0/embed.ogv',
     74                        'webm'      => '//s.w.org/images/core/4.0/embed.webm',
     75                        'loop'     => true,
     76                        'autoplay' => true,
     77                        'width'    => 500,
     78                        'height'   => 352
     79                    ) );
     80                ?>
     81            </div>
    6482        </div>
    6583        <div class="col-2 last-feature">
     
    7896        </div>
    7997        <div class="col-2 last-feature">
    80             <!-- focus.png -->
    81             <img src="https://i.cloudup.com/DhokGXMLmR.png" />
     98            <div class="about-video about-video-focus">
     99                <?php
     100                    echo wp_video_shortcode( array(
     101                        'mp4'      => '//s.w.org/images/core/4.0/focus.mp4',
     102                        'ogv'      => '//s.w.org/images/core/4.0/focus.ogv',
     103                        'webm'      => '//s.w.org/images/core/4.0/focus.webm',
     104                        'loop'     => true,
     105                        'autoplay' => true,
     106                        'width'    => 500,
     107                        'height'   => 281
     108                    ) );
     109                ?>
     110            </div>
    82111        </div>
    83112    </div>
     
    87116    <div class="feature-section col two-col">
    88117        <div class="col-1">
    89             <!-- plugins.png -->
    90             <img src="https://i.cloudup.com/6hlYGuLiTq.png" />
     118            <img src="//s.w.org/images/core/4.0/plugins.png" />
    91119        </div>
    92120        <div class="col-2 last-feature">
    93             <h3><?php _e( 'Finding the right plugin' ); ?></h3>
     121            <h3 class="higher"><?php _e( 'Finding the right plugin' ); ?></h3>
    94122            <p><?php _e( 'There are more than 30,000 free and open source plugins in the WordPress plugin directory. WordPress 4.0 makes it easier to find the right one for your needs, with new metrics, improved search, and a more visual browsing experience.' ); ?></p>
    95123            <a href="<?php echo admin_url( 'plugin-install.php' ); ?>" class="button button-large button-primary"><?php _e( 'Browse plugins' ); ?></a>
  • trunk/src/wp-admin/css/about.css

    r29643 r29706  
    7979    font-size: 1.5em;
    8080    line-height: 1.5em;
     81}
     82
     83.about-wrap h3.higher {
     84    margin-top: .5em;
    8185}
    8286
     
    175179.about-overview {
    176180    margin-top: 40px;
     181    margin-bottom: 40px;
    177182    text-align: center;
    178183}
     
    193198.about-wrap .feature-section.two-col > div {
    194199    position: relative;
    195     width: 47.5%;
    196     margin-right: 4.999999999%;
     200    width: 47.6%;
     201    margin-right: 4.799999999%;
    197202    float: left;
    198203}
     
    225230    margin-left: 10px;
    226231    max-width: 20%;
     232}
     233
     234/* responsive videos for 4.0 */
     235.about-video {
     236    position: relative;
     237    width: 100%;
     238    height: 0;
     239}
     240
     241.about-video-embed {
     242    padding-bottom: 70.4%; /* 352 / 500 */
     243}
     244
     245.about-video-focus {
     246    padding-bottom: 56.2%; /* 281 / 500 */
     247}
     248
     249.about-video .wp-video,
     250.about-video .mejs-container,
     251.about-video video {
     252    position: absolute;
     253    top: 0;
     254    left: 0;
     255    width: 100% !important;
     256    height: 100% !important;
    227257}
    228258
     
    348378}
    349379
     380/* Responsive release video */
     381@media screen and ( max-width: 710px ) {
     382    .about-overview {
     383        position: relative;
     384        padding-bottom: 56.25%; /* 360 / 640 */
     385        width: 100%;
     386        height: 0;
     387    }
     388
     389    .about-overview embed {
     390        position: absolute;
     391        top: 0;
     392        left: 0;
     393        width: 100%;
     394        height: 100%;
     395    }
     396}
     397
    350398@media only screen and (max-width: 500px) {
    351399    .about-wrap {
     
    369417    }
    370418
     419    .about-wrap h2.nav-tab-wrapper {
     420        padding-left: 0;
     421        border-bottom: 0;
     422    }
     423
     424    .about-wrap h2 .nav-tab {
     425        margin-top: 10px;
     426        margin-right: 10px;
     427        border-bottom: 1px solid #ccc;
     428    }
     429
    371430    .about-wrap .feature-section.three-col div {
    372431        width: 100%;
Note: See TracChangeset for help on using the changeset viewer.