Make WordPress Core

Changeset 28127


Ignore:
Timestamp:
04/15/2014 01:30:36 AM (10 years ago)
Author:
nacin
Message:

About page design, first pass.

props melchoyce, ryelle.
see #27713.

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

Legend:

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

    r28092 r28127  
    3636<div class="changelog">
    3737    <h2 class="about-headline-callout"><?php echo ( 'A smoother media editing&nbsp;experience' ); ?></h2>
    38     <img class="about-overview-img" src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/overview.png?1" />
    39     <div class="feature-section col three-col">
    40         <div class="col-1">
    41             <h4><?php echo ( 'Gallery previews' ); ?></h4>
    42             <p><?php echo ( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
    43         </div>
    44         <div class="col-2">
    45             <h4><?php echo ( 'Improved image editing' ); ?></h4>
    46             <p><?php echo ( 'We&#8217;ve made it much easier to edit your images, with quicker access to cropping and rotation tools. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
    47         </div>
    48         <div class="col-3 last-feature">
    49             <h4><?php echo ( 'Drag and drop your images' ); ?></h4>
    50             <p><?php echo ( 'Grab images from your desktop and drop them directly onto the editor, saving yourself that extra step.' ); ?></p>
    51         </div>
     38    <div class="about-overview">
     39        <img class="about-overview-img" src="//wordpress.org/images/core/3.9/overview.png?0" />
    5240    </div>
    5341    <div class="feature-section col three-col">
    5442        <div class="col-1">
     43            <img src="//wordpress.org/images/core/3.9/editor.jpg?0" />
    5544            <h4><?php echo ( 'Improved visual editor' ); ?></h4>
    5645            <p><?php echo ( 'We&#8217;ve updated the visual editor with better mobile support, improved speed and accessibility, and a modern API for developers.' ); ?></p>
     
    5847        </div>
    5948        <div class="col-2">
     49            <img src="//wordpress.org/images/core/3.9/image.jpg?0" />
     50            <h4><?php echo ( 'Improved image editing' ); ?></h4>
     51            <p><?php echo ( 'We&#8217;ve made it much easier to edit your images, with quicker access to cropping and rotation tools. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
     52        </div>
     53        <div class="col-3 last-feature">
     54            <img src="//wordpress.org/images/core/3.9/drop.jpg?0" />
     55            <h4><?php echo ( 'Drag and drop your images' ); ?></h4>
     56            <p><?php echo ( 'Grab images from your desktop and drop them directly onto the editor, saving yourself that extra step.' ); ?></p>
     57        </div>
     58    </div>
     59
     60    <hr>
     61
     62    <div class="feature-section col two-col">
     63        <div class="col-1">
     64            <img src="//wordpress.org/images/core/3.9/gallery.jpg?0" />
     65            <h4><?php echo ( 'Gallery previews' ); ?></h4>
     66            <p><?php echo ( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
     67        </div>
     68        <div class="col-2 last-feature">
    6069            <h4><?php echo ( 'Do more with audio and video' ); ?></h4>
    6170            <p><?php echo ( 'Images have galleries; now we&#8217;ve added simple audio and video playlists, so you can showcase your music and clips.' ); ?></p>
    62             <!-- maybe insert note about playing/editing audio/video from the editor -->
    63         </div>
    64         <div class="col-3 last-feature">
    65             <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/colors.png?1" />
    66             <!-- embedded playlist? -->
    6771        </div>
    6872    </div>
     
    7175<hr>
    7276
    73 <div class="changelog">
     77<div class="changelog customize">
    7478    <h3><?php echo ( 'Customize your heart out' ); ?></h3>
    7579
    7680    <div class="feature-section col two-col">
    7781        <div>
    78             <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" />
    7982            <h4><?php echo ( 'Live widget previews' ); ?></h4>
    8083            <p><?php echo ( 'Add, edit, and rearrange your site&#8217;s widgets right in the theme customizer. No &#8220;save and surprise&#8221; &mdash; preview your changes live and only save them when you&#8217;re ready.' ); ?></p>
     
    8285        </div>
    8386        <div class="last-feature">
    84             <img src="<?php echo is_ssl() ? 'https://' : '//s.'; ?>wordpress.org/images/core/3.8/twentyfourteen.jpg?1" />
     87            <img src="//wordpress.org/images/core/3.9/theme.jpg?0" />
    8588            <h4><?php _e( 'Stunning new theme browser' ); ?></h4>
    8689            <p><?php _e( 'Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.' ); ?></p>
    87             <p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-primary">Browse Themes</a></p>
     90            <p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-large button-primary">Browse Themes</a></p>
    8891        </div>
    8992    </div>
     
    9295<hr>
    9396
    94 <div class="changelog">
     97<div class="changelog under-the-hood">
    9598    <h3><?php _e( 'Under the Hood' ); ?></h3>
    9699
  • trunk/src/wp-admin/css/about.css

    r27289 r28127  
    2424
    2525.about-wrap img {
    26     margin: 0.5em 0 0.5em 5px;
     26    margin: 0;
    2727    max-width: 100%;
     28    vertical-align: middle;
    2829}
    2930
     
    8081}
    8182
     83.customize h3 {
     84    margin-top: 1.75em;
     85    text-align: center;
     86}
     87
    8288.about-wrap .feature-section h4 {
    8389    margin: 1.4em 0 0.6em 0;
     
    94100}
    95101
     102.about-wrap .button.button-large {
     103    padding: 8px 20px 10px !important;
     104    height: 46px !important;
     105    font-size: 14px;
     106    line-height: 28px !important;
     107}
     108
    96109/* 3.8 Images */
    97110
    98 .about-wrap .about-colors-img {
    99     bottom: -25px;
    100 }
    101 
    102 .about-wrap .about-themes-img {
    103     bottom: -38px;
    104 }
    105 
    106111.about-wrap .about-overview-img {
    107     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    108112    margin: 0;
    109 }
    110 
    111 .about-colors-img img,
    112 .about-themes-img img {
    113     margin: 0 0;
    114     padding: 0;
    115     line-height: 1;
    116113}
    117114
     
    176173/* Changelog / Update screen */
    177174
     175.about-overview {
     176    margin-top: 40px;
     177    text-align: center;
     178    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     179}
     180
    178181.about-wrap .feature-section {
     182    margin-top: 40px;
    179183    padding-bottom: 20px;
    180 }
    181 
    182 .about-wrap .feature-section.col {
    183     margin-bottom: 0;
    184 }
    185 
    186 .about-wrap .feature-section.center-col > div {
    187     margin: auto;
    188     width: 60%;
    189 }
    190 
    191 .about-wrap .about-colors .one-col > div {
    192     width: 100%;
    193184}
    194185
    195186.about-wrap .feature-section.two-col > div {
    196187    position: relative;
    197     width: 50%;
     188    width: 47.5%;
     189    margin-right: 4.999999999%;
    198190    float: left;
    199191}
     
    210202}
    211203
    212 .about-wrap .about-updates img,
    213 .about-wrap .about-twentyfourteen img {
    214     margin: 2em 0 0 0;
    215     border: 1px solid #ddd;
    216     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    217     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    218 }
    219 
    220 .about-wrap .about-twentyfourteen img {
    221     margin-top: 1em;
     204.about-wrap .under-the-hood .feature-section {
     205    margin-top: 0;
    222206}
    223207
    224208.about-wrap .changelog .feature-section {
    225209    overflow: hidden;
    226 }
    227 
    228 .about-wrap .about-colors .scheme-list {
    229     margin-bottom: 1em;
    230 }
    231 
    232 .about-wrap .about-colors .color-option {
    233     padding-top: 10px;
    234 }
    235 .about-wrap .about-colors .color-option label {
    236     display: inline-block;
    237     margin: 0.25em 0 0.5em;
    238210}
    239211
     
    352324    .about-wrap .feature-section.one-col > div,
    353325    .about-wrap .feature-section.two-col > div,
    354     .about-wrap .three-col.about-updates > div {
     326    .about-wrap .feature-section.three-col > div {
    355327        width: 100%;
     328        margin: 0 0 40px;
     329        padding: 0 0 40px;
     330        float: none;
     331        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     332    }
     333
     334    .about-wrap .under-the-hood .feature-section > div,
     335    .about-wrap .feature-section.col > div.last-feature {
    356336        margin: 0;
    357         float: none;
    358     }
    359 
    360     .about-wrap .about-colors .color-option {
    361         width: 49%;
    362     }
     337        padding: 0;
     338        border-bottom: none;
     339    }
     340
    363341}
    364342
  • trunk/src/wp-admin/css/colors/_admin.scss

    r28122 r28127  
    151151.nav-tab-active,
    152152.nav-tab-active:hover {
     153    background-color: $body-background;
    153154    border-bottom-color: $body-background;
    154155}
Note: See TracChangeset for help on using the changeset viewer.