WordPress.org

Make WordPress Core

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

File 27440-return-and-display-banners.13.diff, 10.5 KB (added by stephdau, 3 years ago)

In which we only show the fyi box in the description section, on smaller screens

  • 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"> 
     400        <div id="<?php echo $_tab; ?>-content" class='<?php echo $_with_banner; ?>'> 
    378401        <div class="fyi"> 
    379402                <ul> 
    380403<?php if ( ! empty( $api->version ) ) : ?> 
     
    394417                        <li><a target="_blank" href="https://wordpress.org/plugins/<?php echo $api->slug ?>/"><?php _e('WordPress.org Plugin Page &#187;') ?></a></li> 
    395418<?php endif; if ( ! empty( $api->homepage ) ) : ?> 
    396419                        <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li> 
     420<?php endif;if ( ! empty( $api->donate_link ) && empty( $api->contributors ) ) : ?> 
     421                        <li><a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a></li> 
    397422<?php endif; ?> 
    398423                </ul> 
    399424                <?php if ( ! empty( $api->rating ) ) : ?> 
     
    401426                <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?> 
    402427                <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small> 
    403428                <?php endif; ?> 
     429                <?php 
     430                if ( ! empty( $api->ratings ) && array_sum( (array) $api->ratings ) > 0 ) { 
     431                        foreach( $api->ratings as $key=>$ratecount ) { 
     432                                // avoid div-by-zero 
     433                                $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0; 
     434                                ?> 
     435                                <div class="counter-container"> 
     436                                        <a href="./plugin-install.php?tab=plugin-information&plugin=<?php echo $api->slug; ?>&section=reviews" 
     437                                           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 ) ); ?>" --> 
     438                                                <span class="counter-label" style="float:left; margin-right:5px;"><?php echo $key; ?> stars</span> 
     439                                                <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;"> 
     440                                                        <span class="counter-bar" style="width: <?php echo 92 * $_rating; ?>px;height:17px;background-color:#fddb5a;float:left;"></span> 
     441                                                </span> 
     442                                        </a> 
     443                                        <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span> 
     444                                </div> 
     445                        <?php 
     446                        } 
     447                } 
     448                if ( ! empty( $api->contributors ) ) : ?> 
     449                        <h3><?php _e('Contributors') ?></h3> 
     450                        <ul class="contributors"> 
     451                                <?php 
     452                                foreach ( (array) $api->contributors as $contrib_username => $contrib_profile ) { 
     453                                        if ( empty( $contrib_username ) && empty( $contrib_profile ) ) 
     454                                                continue; 
     455                                        if ( empty( $contrib_username ) ) 
     456                                                $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile ); 
     457                                        $contrib_username = sanitize_user( $contrib_username ); 
     458                                        if ( empty( $contrib_profile ) ) 
     459                                                echo "<li><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</li>"; 
     460                                        else 
     461                                                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>"; 
     462                                } 
     463                                ?> 
     464                        </ul> 
     465                        <?php if ( ! empty( $api->donate_link ) ) : ?> 
     466                                <a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a> 
     467                        <?php endif; ?> 
     468                <?php endif; ?> 
    404469        </div> 
    405470        <div id="section-holder" class="wrap"> 
    406471        <?php 
  • wp-admin/js/plugin-install.js

     
    5353                //Flip the tab 
    5454                $( '#plugin-information-tabs a.current' ).removeClass( 'current' ); 
    5555                $( this ).addClass( 'current' ); 
     56                //Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top. 
     57                if ( 'description' != $( this ).attr( 'name' ) && $( 'body').width() < 830 ) 
     58                        $( '#plugin-information-content div.fyi' ).hide(); 
     59                else 
     60                        $( '#plugin-information-content div.fyi' ).show(); 
    5661                //Flip the content. 
    5762                $( '#section-holder div.section' ).hide(); //Hide 'em all 
    5863                $( '#section-' + tab ).show(); 
  • 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;