WordPress.org

Make WordPress Core

Ticket #27440: 27440-return-and-display-banners.8.diff

File 27440-return-and-display-banners.8.diff, 8.7 KB (added by stephdau, 4 years ago)

Same as 27440-return-and-display-banners.7.diff but with extra 10px top margin for contributors list, to ensure a nice display on large and small screens alike.

  • 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 );
     
    354354
    355355        iframe_header( __('Plugin Install') );
    356356
    357         echo "<div id='{$_tab}-title'>{$api->name}</div>";
    358         echo "<div id='{$_tab}-tabs'>\n";
     357        $_with_banner = '';
    359358
     359        if ( !empty( $api->banners ) && ( !empty( $api->banners['low'] ) || !empty( $api->banners['high'] ) ) ) {
     360                $_with_banner = 'with-banner';
     361                $low  = ( !empty( $api->banners['low'] ) ) ? $api->banners['low'] : $api->banners['high'];
     362                $high = ( !empty( $api->banners['high'] ) ) ? $api->banners['high'] : $api->banners['low'];
     363                ?>
     364                <style type="text/css">
     365                        #plugin-information-title.with-banner {
     366                                background-image: url(<?php echo $low ?>);
     367                        }
     368                        @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     369                                #plugin-information-title.with-banner {
     370                                        background-image: url(<?php echo $high ?>});
     371                                }
     372                        }
     373                </style>
     374                <?php
     375        }
     376
     377        echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
     378        echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
     379
    360380        foreach ( (array)$api->sections as $section_name => $content ) {
    361381
    362382                if ( isset( $plugins_section_titles[ $section_name ] ) )
     
    374394        echo "</div>\n";
    375395
    376396        ?>
    377         <div id="<?php echo $_tab; ?>-content">
     397        <div id="<?php echo $_tab; ?>-content" class='<?php echo $_with_banner; ?>'>
    378398        <div class="fyi">
    379399                <ul>
    380400<?php if ( ! empty( $api->version ) ) : ?>
     
    394414                        <li><a target="_blank" href="https://wordpress.org/plugins/<?php echo $api->slug ?>/"><?php _e('WordPress.org Plugin Page &#187;') ?></a></li>
    395415<?php endif; if ( ! empty( $api->homepage ) ) : ?>
    396416                        <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li>
     417<?php endif;if ( ! empty( $api->donate_link ) && empty( $api->contributors ) ) : ?>
     418                        <li><a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a></li>
    397419<?php endif; ?>
    398420                </ul>
    399421                <?php if ( ! empty( $api->rating ) ) : ?>
     
    401423                <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?>
    402424                <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small>
    403425                <?php endif; ?>
     426                <?php
     427                if ( ! empty( $api->ratings ) ) {
     428                        foreach( $api->ratings as $key=>$ratecount ) {
     429                                // avoid div-by-zero
     430                                $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0;
     431                                ?>
     432                                <div class="counter-container">
     433                                        <a href="//wordpress.org/support/view/plugin-reviews/<?php echo $api->slug; ?>?filter=<?php echo $key; ?>"
     434                                           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 ) ); ?>">
     435                                                <span class="counter-label" style="float:left; margin-right:5px;"><?php echo $key; ?> stars</span>
     436                                <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
     437                                        <span class="counter-bar" style="width: <?php echo 92 * $_rating; ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
     438                                </span>
     439                                        </a>
     440                                        <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
     441                                </div>
     442                        <?php
     443                        }
     444                }
     445                if ( ! empty( $api->contributors ) ) : ?>
     446                        <h3><?php _e('Contributors') ?></h3>
     447                        <ul class="contributors">
     448                                <?php
     449                                foreach ( (array) $api->contributors as $contrib_username => $contrib_profile ) {
     450                                        if ( empty( $contrib_username ) && empty( $contrib_profile ) )
     451                                                continue;
     452                                        if ( empty( $contrib_username ) )
     453                                                $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile );
     454                                        $contrib_username = sanitize_user( $contrib_username );
     455                                        if ( empty( $contrib_profile ) )
     456                                                echo "<li><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</li>";
     457                                        else
     458                                                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>";
     459                                }
     460                                ?>
     461                        </ul>
     462                        <?php if ( ! empty( $api->donate_link ) ) : ?>
     463                                <a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a>
     464                        <?php endif; ?>
     465                <?php endif; ?>
    404466        </div>
    405467        <div id="section-holder" class="wrap">
    406468        <?php
  • 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        font-weight: bold;
     1860        max-width: 760px;
     1861        position: absolute;
     1862        left: 20px;
     1863        top: 175px;
     1864        padding: 0 15px;
     1865        margin: 0;
     1866        color: #fff;
     1867        background: rgba( 30, 30, 30, 0.9 );
     1868        text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
     1869        -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1870        -moz-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1871        box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1872        -webkit-border-radius: 8px;
     1873        border-radius: 8px;
     1874}
     1875
     1876@media only screen and (max-width: 800px) {
     1877        #plugin-information-title.with-banner h2 {
     1878                top:25px;
     1879        }
     1880}
     1881
     1882#plugin-information-title div.vignette {
     1883        display: none;
     1884}
     1885
     1886#plugin-information-title.with-banner div.vignette {
     1887        display: block;
     1888        top: 0;
     1889        height: 250px;
     1890        width: 830px;
     1891        margin: 0 -20px;
     1892        background: transparent;
     1893        -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1894        -moz-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1895        box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1896}
     1897
     1898@media only screen and (max-width: 800px) {
     1899        #plugin-information-title.with-banner div.vignette {
     1900                height: 100px;
     1901                bottom: 100px;
     1902                width: 800%;
     1903        }
     1904}
     1905
    18271906#plugin-information-tabs {
    18281907        padding: 0 16px;
    18291908        position: absolute;
     
    18341913        z-index: 1;
    18351914}
    18361915
     1916#plugin-information-tabs.with-banner {
     1917        top:250px;
     1918}
     1919
     1920@media only screen and (max-width: 800px) {
     1921        #plugin-information-tabs.with-banner {
     1922                top:100px;
     1923        }
     1924}
     1925
    18371926#plugin-information-tabs a {
    18381927        position: relative;
    18391928        float: left;
     
    18711960        left: 0;
    18721961}
    18731962
     1963#plugin-information-content.with-banner {
     1964        top:284px;
     1965}
     1966
     1967@media only screen and (max-width: 800px) {
     1968        #plugin-information-content.with-banner {
     1969                top:134px;
     1970        }
     1971}
     1972
    18741973#section-holder {
    18751974        margin: 0;
    18761975        padding: 10px 26px;
     
    19272026        margin: 0 0 10px;
    19282027}
    19292028
     2029#plugin-information .counter-label {
     2030        float: left;
     2031        margin-right: 5px;
     2032}
     2033
     2034#plugin-information .counter-back {
     2035        height: 17px;
     2036        width: 92px;
     2037        background-color: #ececec;
     2038        float: left;
     2039}
     2040
     2041#plugin-information .counter-bar {
     2042        height: 17px;
     2043        background-color: #fddb5a;
     2044        float: left;
     2045}
     2046
     2047#plugin-information .counter-count {
     2048        margin-left: 5px;
     2049}
     2050
     2051#plugin-information .fyi ul.contributors {
     2052        margin-top: 10px;
     2053}
     2054
     2055#plugin-information .fyi ul.contributors li {
     2056        display: inline-block;
     2057        margin-right: 8px;
     2058        vertical-align: middle;
     2059}
     2060
     2061#plugin-information .fyi ul.contributors li {
     2062        display: inline-block;
     2063        margin-right: 8px;
     2064        vertical-align: middle;
     2065}
     2066
     2067#plugin-information .fyi ul.contributors li img {
     2068        vertical-align: middle;
     2069        margin-right: 4px;
     2070}
     2071
    19302072#plugin-information-footer {
    19312073        padding: 15px 16px;
    19322074        position: absolute;