WordPress.org
Get WordPress

Make WordPress Core

Ticket #27440: 27440-return-and-display-banners.13-alt.diff

File 27440-return-and-display-banners.13-alt.diff, 13.2 KB (added by stephdau, 11 years ago)

JS-less alternative to 27440-return-and-display-banners.13.diff, by moving the fyi box underneath the section-holder box, instead of above it. No other changes involved.

  • wp-admin/includes/plugin-install.php

     
    311311function install_plugin_information() {
    312312        global $tab;
    313313
    314         $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl() ) );
     314        $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl(), 'fields' => array( 'banners' => true, 'reviews' => true ) ) );
    315315
    316316        if ( is_wp_error( $api ) )
    317317                wp_die( $api );
    … …  
    331331                'faq'          => _x('FAQ',          'Plugin installer section title'),
    332332                'screenshots'  => _x('Screenshots',  'Plugin installer section title'),
    333333                'changelog'    => _x('Changelog',    'Plugin installer section title'),
     334                'reviews'      => _x('Reviews',      'Plugin installer section title'),
    334335                'other_notes'  => _x('Other Notes',  'Plugin installer section title')
    335336        );
    336337
    … …  
    354355
    355356        iframe_header( __('Plugin Install') );
    356357
    357         echo "<div id='{$_tab}-title'>{$api->name}</div>";
    358         echo "<div id='{$_tab}-tabs'>\n";
     358        $_with_banner = '';
    359359
     360        if ( !empty( $api->banners ) && ( !empty( $api->banners['low'] ) || !empty( $api->banners['high'] ) ) ) {
     361                $_with_banner = 'with-banner';
     362                $low  = ( !empty( $api->banners['low'] ) ) ? $api->banners['low'] : $api->banners['high'];
     363                $high = ( !empty( $api->banners['high'] ) ) ? $api->banners['high'] : $api->banners['low'];
     364                ?>
     365                <style type="text/css">
     366                        #plugin-information-title.with-banner {
     367                                background-image: url(<?php echo $low ?>);
     368                        }
     369                        @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     370                                #plugin-information-title.with-banner {
     371                                        background-image: url(<?php echo $high ?>});
     372                                }
     373                        }
     374                </style>
     375                <?php
     376        }
     377
     378        echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
     379        echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
     380
    360381        foreach ( (array)$api->sections as $section_name => $content ) {
     382                if ( 'reviews' == $section_name && ( empty( $api->ratings ) || 0 == array_sum( (array) $api->ratings ) ) )
     383                        continue;
    361384
    362385                if ( isset( $plugins_section_titles[ $section_name ] ) )
    363386                        $title = $plugins_section_titles[ $section_name ];
    … …  
    374397        echo "</div>\n";
    375398
    376399        ?>
    377         <div id="<?php echo $_tab; ?>-content">
    378         <div class="fyi">
    379                 <ul>
    380 <?php if ( ! empty( $api->version ) ) : ?>
    381                         <li><strong><?php _e('Version:') ?></strong> <?php echo $api->version ?></li>
    382 <?php endif; if ( ! empty( $api->author ) ) : ?>
    383                         <li><strong><?php _e('Author:') ?></strong> <?php echo links_add_target($api->author, '_blank') ?></li>
    384 <?php endif; if ( ! empty( $api->last_updated ) ) : ?>
    385                         <li><strong><?php _e('Last Updated:') ?></strong> <span title="<?php echo $api->last_updated ?>"><?php
    386                                                         printf( __('%s ago'), human_time_diff(strtotime($api->last_updated)) ) ?></span></li>
    387 <?php endif; if ( ! empty( $api->requires ) ) : ?>
    388                         <li><strong><?php _e('Requires WordPress Version:') ?></strong> <?php printf(__('%s or higher'), $api->requires) ?></li>
    389 <?php endif; if ( ! empty( $api->tested ) ) : ?>
    390                         <li><strong><?php _e('Compatible up to:') ?></strong> <?php echo $api->tested ?></li>
    391 <?php endif; if ( ! empty( $api->downloaded ) ) : ?>
    392                         <li><strong><?php _e('Downloaded:') ?></strong> <?php printf(_n('%s time', '%s times', $api->downloaded), number_format_i18n($api->downloaded)) ?></li>
    393 <?php endif; if ( ! empty( $api->slug ) && empty( $api->external ) ) : ?>
    394                         <li><a target="_blank" href="https://wordpress.org/plugins/<?php echo $api->slug ?>/"><?php _e('WordPress.org Plugin Page &#187;') ?></a></li>
    395 <?php endif; if ( ! empty( $api->homepage ) ) : ?>
    396                         <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li>
    397 <?php endif; ?>
    398                 </ul>
    399                 <?php if ( ! empty( $api->rating ) ) : ?>
    400                 <h3><?php _e('Average Rating') ?></h3>
    401                 <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?>
    402                 <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small>
    403                 <?php endif; ?>
    404         </div>
     400        <div id="<?php echo $_tab; ?>-content" class='<?php echo $_with_banner; ?>'>
    405401        <div id="section-holder" class="wrap">
    406402        <?php
    407403                if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) )
    … …  
    423419                        echo $content;
    424420                        echo "\t</div>\n";
    425421                }
     422        ?>
     423        </div>
     424        <div class="fyi">
     425                <ul>
     426                        <?php if ( ! empty( $api->version ) ) : ?>
     427                                <li><strong><?php _e('Version:') ?></strong> <?php echo $api->version ?></li>
     428                        <?php endif; if ( ! empty( $api->author ) ) : ?>
     429                                <li><strong><?php _e('Author:') ?></strong> <?php echo links_add_target($api->author, '_blank') ?></li>
     430                        <?php endif; if ( ! empty( $api->last_updated ) ) : ?>
     431                                <li><strong><?php _e('Last Updated:') ?></strong> <span title="<?php echo $api->last_updated ?>"><?php
     432                                                printf( __('%s ago'), human_time_diff(strtotime($api->last_updated)) ) ?></span></li>
     433                        <?php endif; if ( ! empty( $api->requires ) ) : ?>
     434                                <li><strong><?php _e('Requires WordPress Version:') ?></strong> <?php printf(__('%s or higher'), $api->requires) ?></li>
     435                        <?php endif; if ( ! empty( $api->tested ) ) : ?>
     436                                <li><strong><?php _e('Compatible up to:') ?></strong> <?php echo $api->tested ?></li>
     437                        <?php endif; if ( ! empty( $api->downloaded ) ) : ?>
     438                                <li><strong><?php _e('Downloaded:') ?></strong> <?php printf(_n('%s time', '%s times', $api->downloaded), number_format_i18n($api->downloaded)) ?></li>
     439                        <?php endif; if ( ! empty( $api->slug ) && empty( $api->external ) ) : ?>
     440                                <li><a target="_blank" href="https://wordpress.org/plugins/<?php echo $api->slug ?>/"><?php _e('WordPress.org Plugin Page &#187;') ?></a></li>
     441                        <?php endif; if ( ! empty( $api->homepage ) ) : ?>
     442                                <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li>
     443                        <?php endif;if ( ! empty( $api->donate_link ) && empty( $api->contributors ) ) : ?>
     444                                <li><a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a></li>
     445                        <?php endif; ?>
     446                </ul>
     447                <?php if ( ! empty( $api->rating ) ) : ?>
     448                        <h3><?php _e('Average Rating') ?></h3>
     449                        <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?>
     450                        <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small>
     451                <?php endif; ?>
     452                <?php
     453                if ( ! empty( $api->ratings ) && array_sum( (array) $api->ratings ) > 0 ) {
     454                        foreach( $api->ratings as $key=>$ratecount ) {
     455                                // avoid div-by-zero
     456                                $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0;
     457                                ?>
     458                                <div class="counter-container">
     459                                        <a href="./plugin-install.php?tab=plugin-information&plugin=<?php echo $api->slug; ?>&section=reviews"
     460                                           title="<?php echo esc_attr( sprintf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key ), $key ) ); ?>" -->
     461                                        <span class="counter-label" style="float:left; margin-right:5px;"><?php echo $key; ?> stars</span>
     462                                                <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
     463                                                        <span class="counter-bar" style="width: <?php echo 92 * $_rating; ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
     464                                                </span>
     465                                        </a>
     466                                        <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
     467                                </div>
     468                        <?php
     469                        }
     470                }
     471                if ( ! empty( $api->contributors ) ) : ?>
     472                        <h3><?php _e('Contributors') ?></h3>
     473                        <ul class="contributors">
     474                                <?php
     475                                foreach ( (array) $api->contributors as $contrib_username => $contrib_profile ) {
     476                                        if ( empty( $contrib_username ) && empty( $contrib_profile ) )
     477                                                continue;
     478                                        if ( empty( $contrib_username ) )
     479                                                $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile );
     480                                        $contrib_username = sanitize_user( $contrib_username );
     481                                        if ( empty( $contrib_profile ) )
     482                                                echo "<li><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</li>";
     483                                        else
     484                                                echo "<li><a href='{$contrib_profile}' target='_blank'><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</a></li>";
     485                                }
     486                                ?>
     487                        </ul>
     488                        <?php if ( ! empty( $api->donate_link ) ) : ?>
     489                                <a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a>
     490                        <?php endif; ?>
     491                <?php endif; ?>
     492        </div>
     493        <?php
    426494        echo "</div>\n";
    427         echo "</div>\n";
    428495        echo "<div id='$tab-footer'>\n";
    429496        if ( ! empty( $api->download_link ) && ( current_user_can('install_plugins') || current_user_can('update_plugins') ) ) {
    430497                $status = install_plugin_install_status($api);

  • wp-admin/css/common.css

     
    17991799}
    18001800
    18011801/* Plugin install thickbox */
     1802.plugin-install-php .tb-close-icon {
     1803        color: #444;
     1804        background: rgba(255,255,255,.3);
     1805}
     1806
     1807.plugin-install-php .tb-close-icon:hover {
     1808        color: #2ea2cc;
     1809        background: rgba(255,255,255,.6);
     1810}
     1811
    18021812#plugin-information {
    18031813        background: #fcfcfc;
    18041814        position: fixed;
    … …  
    18241834        white-space: nowrap;
    18251835}
    18261836
     1837#plugin-information-title.with-banner {
     1838        height: 250px;
     1839        bottom: 250px;
     1840        background-size: 100% auto;
     1841}
     1842
     1843@media only screen and (max-width: 800px) {
     1844        #plugin-information-title.with-banner {
     1845                height: 100px;
     1846                bottom: 100px;
     1847        }
     1848}
     1849
     1850#plugin-information-title h2 {
     1851        font-family: "Helvetica Neue", sans-serif;
     1852        padding:0;
     1853        margin: 0;
     1854        max-width: 760px;
     1855}
     1856
     1857#plugin-information-title.with-banner h2 {
     1858        font-size: 30px;
     1859        line-height: 50px;
     1860        font-weight: bold;
     1861        max-width: 760px;
     1862        position: absolute;
     1863        left: 20px;
     1864        top: 145px;
     1865        padding: 0 15px;
     1866        margin: 0;
     1867        color: #fff;
     1868        background: rgba( 30, 30, 30, 0.9 );
     1869        text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
     1870        -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1871        -moz-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1872        box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1873        -webkit-border-radius: 8px;
     1874        border-radius: 8px;
     1875}
     1876
     1877@media only screen and (max-width: 800px) {
     1878        #plugin-information-title.with-banner h2 {
     1879                top: 12px;
     1880                font-size: 20px;
     1881                line-height: 40px;
     1882        }
     1883}
     1884
     1885#plugin-information-title div.vignette {
     1886        display: none;
     1887}
     1888
     1889#plugin-information-title.with-banner div.vignette {
     1890        display: block;
     1891        top: 0;
     1892        height: 215px;
     1893        width: 830px;
     1894        margin: 0 -20px;
     1895        background: transparent;
     1896        -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1897        -moz-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1898        box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1899}
     1900
     1901@media only screen and (max-width: 800px) {
     1902        #plugin-information-title.with-banner div.vignette {
     1903                height: 65px;
     1904                bottom: 65px;
     1905                width: 800%;
     1906        }
     1907}
     1908
    18271909#plugin-information-tabs {
    18281910        padding: 0 16px;
    18291911        position: absolute;
    … …  
    18341916        z-index: 1;
    18351917}
    18361918
     1919#plugin-information-tabs.with-banner {
     1920        top: 215px;
     1921        background: rgba( 255, 255, 255, 0.8 );
     1922}
     1923
     1924@media only screen and (max-width: 800px) {
     1925        #plugin-information-tabs.with-banner {
     1926                top:65px;
     1927                background: rgba( 255, 255, 255, 0.8 );
     1928        }
     1929}
     1930
    18371931#plugin-information-tabs a {
    18381932        position: relative;
    18391933        float: left;
    … …  
    18711965        left: 0;
    18721966}
    18731967
     1968#plugin-information-content.with-banner {
     1969        top:249px;
     1970}
     1971
     1972@media only screen and (max-width: 800px) {
     1973        #plugin-information-content.with-banner {
     1974                top:99px;
     1975        }
     1976}
     1977
    18741978#section-holder {
    18751979        margin: 0;
    18761980        padding: 10px 26px;
    … …  
    18871991}
    18881992
    18891993#plugin-information .fyi {
     1994        display: none;
    18901995        background: #f3f3f3;
    18911996        border-left: 1px solid #ddd;
    18921997        color: #666;
    … …  
    18992004        overflow: auto;
    19002005}
    19012006
     2007#plugin-information .fyi {
     2008        display: block;
     2009}
     2010
    19022011#plugin-information .fyi strong {
    19032012        color: #464646;
    19042013}
    … …  
    19272036        margin: 0 0 10px;
    19282037}
    19292038
     2039#plugin-information .counter-label {
     2040        float: left;
     2041        margin-right: 5px;
     2042}
     2043
     2044#plugin-information .counter-back {
     2045        height: 17px;
     2046        width: 92px;
     2047        background-color: #ececec;
     2048        float: left;
     2049}
     2050
     2051#plugin-information .counter-bar {
     2052        height: 17px;
     2053        background-color: #fddb5a;
     2054        float: left;
     2055}
     2056
     2057#plugin-information .counter-count {
     2058        margin-left: 5px;
     2059}
     2060
     2061#plugin-information .fyi ul.contributors {
     2062        margin-top: 10px;
     2063}
     2064
     2065#plugin-information .fyi ul.contributors li {
     2066        display: inline-block;
     2067        margin-right: 8px;
     2068        vertical-align: middle;
     2069}
     2070
     2071#plugin-information .fyi ul.contributors li {
     2072        display: inline-block;
     2073        margin-right: 8px;
     2074        vertical-align: middle;
     2075}
     2076
     2077#plugin-information .fyi ul.contributors li img {
     2078        vertical-align: middle;
     2079        margin-right: 4px;
     2080}
     2081
    19302082#plugin-information-footer {
    19312083        padding: 15px 16px;
    19322084        position: absolute;