From 1285d1450b842da94f3c38e6ad87c5a9fae5edd9 Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Sat, 12 Jul 2014 22:07:16 +0000 Subject: [PATCH] Improvements to the plugin information modal: * Whitespace/braces cleanup for [29040]. * Reduce width of modal to 792px, which is the default banner size. * Reduce banner height when screen height is smaller than 500px. * Remove inline CSS. * Re-use tab var in JS. * Encode ampersands in links. props avryl, michalzuber, ocean90. see #27440. git-svn-id: https://develop.svn.wordpress.org/trunk@29125 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/common.css | 91 +++++------ src/wp-admin/includes/plugin-install.php | 183 ++++++++++++----------- src/wp-admin/js/plugin-install.js | 28 ++-- 3 files changed, 161 insertions(+), 141 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index a84b97b49d..5060fff082 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1835,13 +1835,6 @@ div.action-links { background-size: 100% auto; } -@media only screen and (max-width: 800px) { - #plugin-information-title.with-banner { - height: 100px; - bottom: 100px; - } -} - #plugin-information-title h2 { font-family: "Helvetica Neue", sans-serif; padding:0; @@ -1868,14 +1861,6 @@ div.action-links { border-radius: 8px; } -@media only screen and (max-width: 800px) { - #plugin-information-title.with-banner h2 { - top: 12px; - font-size: 20px; - line-height: 40px; - } -} - #plugin-information-title div.vignette { display: none; } @@ -1891,14 +1876,6 @@ div.action-links { box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 ); } -@media only screen and (max-width: 800px) { - #plugin-information-title.with-banner div.vignette { - height: 65px; - bottom: 65px; - width: 800%; - } -} - #plugin-information-tabs { padding: 0 16px; position: absolute; @@ -1910,20 +1887,14 @@ div.action-links { } #plugin-information-tabs.with-banner { - top: 215px; + top: 214px; background: rgba( 255, 255, 255, 0.85 ); } -@media only screen and (max-width: 800px) { - #plugin-information-tabs.with-banner { - top: 65px; - } -} - #plugin-information-tabs a { position: relative; float: left; - padding: 8px 10px 9px; + padding: 9px 10px; margin: 0; height: 18px; line-height: 18px; @@ -1934,13 +1905,19 @@ div.action-links { } #plugin-information-tabs a.current { - margin: -1px -1px 0; + margin: 0 -1px 0; background: #fff; border: 1px solid #ddd; border-bottom: none; + padding-top: 8px; color: #333; } +#plugin-information-tabs.with-banner a.current { + border-top: none; + padding-top: 9px; +} + #plugin-information-tabs a:active, #plugin-information-tabs a:focus { outline: none; @@ -1951,20 +1928,16 @@ div.action-links { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; position: absolute; - top: 90px; + top: 91px; right: 0; bottom: 58px; left: 0; + overflow: auto; } #plugin-information-content.with-banner { - top:249px; -} - -@media only screen and (max-width: 800px) { - #plugin-information-content.with-banner { - top:99px; - } + border-top: none; + top: 250px; } #section-holder { @@ -2024,6 +1997,10 @@ div.action-links { margin: 0 0 10px; } +#plugin-information .counter-container { + margin: 3px 0; +} + #plugin-information .counter-label { float: left; margin-right: 5px; @@ -2118,10 +2095,36 @@ div.action-links { font-size: 13px; } -@media screen and ( max-width: 782px ) { - #plugin-information-content { - overflow: auto; - bottom: 58px; +@media screen and ( max-width: 771px ), screen and ( max-height: 500px ) { + #plugin-information-title.with-banner { + height: 100px; + bottom: 100px; + } + + #plugin-information-title.with-banner h2 { + top: 12px; + font-size: 20px; + line-height: 40px; + } + + #plugin-information-title.with-banner div.vignette { + height: 65px; + bottom: 65px; + width: 800%; + } + + #plugin-information-tabs.with-banner { + top: 63px; + } + + #plugin-information-content.with-banner { + top: 99px; + } +} + +@media screen and ( max-width: 771px ) { + #plugin-information-tabs { + padding: 0; } #plugin-information .fyi { diff --git a/src/wp-admin/includes/plugin-install.php b/src/wp-admin/includes/plugin-install.php index dcb5b7b6cc..950579895e 100644 --- a/src/wp-admin/includes/plugin-install.php +++ b/src/wp-admin/includes/plugin-install.php @@ -311,10 +311,15 @@ function install_plugin_install_status($api, $loop = false) { function install_plugin_information() { global $tab; - $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl(), 'fields' => array( 'banners' => true, 'reviews' => true ) ) ); + $api = plugins_api( 'plugin_information', array( + 'slug' => wp_unslash( $_REQUEST['plugin'] ), + 'is_ssl' => is_ssl(), + 'fields' => array( 'banners' => true, 'reviews' => true ) + ) ); - if ( is_wp_error( $api ) ) + if ( is_wp_error( $api ) ) { wp_die( $api ); + } $plugins_allowedtags = array( 'a' => array( 'href' => array(), 'title' => array(), 'target' => array() ), @@ -326,49 +331,50 @@ function install_plugin_information() { ); $plugins_section_titles = array( - 'description' => _x('Description', 'Plugin installer section title'), - 'installation' => _x('Installation', 'Plugin installer section title'), - 'faq' => _x('FAQ', 'Plugin installer section title'), - 'screenshots' => _x('Screenshots', 'Plugin installer section title'), - 'changelog' => _x('Changelog', 'Plugin installer section title'), - 'reviews' => _x('Reviews', 'Plugin installer section title'), - 'other_notes' => _x('Other Notes', 'Plugin installer section title') + 'description' => _x( 'Description', 'Plugin installer section title' ), + 'installation' => _x( 'Installation', 'Plugin installer section title' ), + 'faq' => _x( 'FAQ', 'Plugin installer section title' ), + 'screenshots' => _x( 'Screenshots', 'Plugin installer section title' ), + 'changelog' => _x( 'Changelog', 'Plugin installer section title' ), + 'reviews' => _x( 'Reviews', 'Plugin installer section title' ), + 'other_notes' => _x( 'Other Notes', 'Plugin installer section title' ) ); - //Sanitize HTML - foreach ( (array)$api->sections as $section_name => $content ) { - $api->sections[$section_name] = wp_kses($content, $plugins_allowedtags); + // Sanitize HTML + foreach ( (array) $api->sections as $section_name => $content ) { + $api->sections[$section_name] = wp_kses( $content, $plugins_allowedtags ); } foreach ( array( 'version', 'author', 'requires', 'tested', 'homepage', 'downloaded', 'slug' ) as $key ) { - if ( isset( $api->$key ) ) + if ( isset( $api->$key ) ) { $api->$key = wp_kses( $api->$key, $plugins_allowedtags ); + } } $_tab = esc_attr( $tab ); - $section = isset( $_REQUEST['section'] ) ? wp_unslash( $_REQUEST['section'] ) : 'description'; //Default to the Description tab, Do not translate, API returns English. + $section = isset( $_REQUEST['section'] ) ? wp_unslash( $_REQUEST['section'] ) : 'description'; // Default to the Description tab, Do not translate, API returns English. if ( empty( $section ) || ! isset( $api->sections[ $section ] ) ) { $section_titles = array_keys( (array) $api->sections ); $section = array_shift( $section_titles ); } - iframe_header( __('Plugin Install') ); + iframe_header( __( 'Plugin Install' ) ); $_with_banner = ''; - if ( !empty( $api->banners ) && ( !empty( $api->banners['low'] ) || !empty( $api->banners['high'] ) ) ) { + if ( ! empty( $api->banners ) && ( ! empty( $api->banners['low'] ) || ! empty( $api->banners['high'] ) ) ) { $_with_banner = 'with-banner'; - $low = ( !empty( $api->banners['low'] ) ) ? $api->banners['low'] : $api->banners['high']; - $high = ( !empty( $api->banners['high'] ) ) ? $api->banners['high'] : $api->banners['low']; + $low = empty( $api->banners['low'] ) ? $api->banners['high'] : $api->banners['low']; + $high = empty( $api->banners['high'] ) ? $api->banners['low'] : $api->banners['high']; ?> @@ -378,16 +384,18 @@ function install_plugin_information() { echo "

{$api->name}

"; echo "
\n"; - foreach ( (array)$api->sections as $section_name => $content ) { - if ( 'reviews' == $section_name && ( empty( $api->ratings ) || 0 == array_sum( (array) $api->ratings ) ) ) + foreach ( (array) $api->sections as $section_name => $content ) { + if ( 'reviews' === $section_name && ( empty( $api->ratings ) || 0 === array_sum( (array) $api->ratings ) ) ) { continue; + } - if ( isset( $plugins_section_titles[ $section_name ] ) ) + if ( isset( $plugins_section_titles[ $section_name ] ) ) { $title = $plugins_section_titles[ $section_name ]; - else + } else { $title = ucwords( str_replace( '_', ' ', $section_name ) ); + } - $class = ( $section_name == $section ) ? ' class="current"' : ''; + $class = ( $section_name === $section ) ? ' class="current"' : ''; $href = add_query_arg( array('tab' => $tab, 'section' => $section_name) ); $href = esc_url( $href ); $san_section = esc_attr( $section_name ); @@ -400,89 +408,92 @@ function install_plugin_information() {
    -version ) ) : ?> -
  • version ?>
    • -author ) ) : ?> -
  • author, '_blank') ?>
    • -last_updated ) ) : ?> -
  • last_updated)) ) ?>
    • -requires ) ) : ?> -
  • requires) ?>
    • -tested ) ) : ?> -
  • tested ?>
    • -downloaded ) ) : ?> -
  • downloaded), number_format_i18n($api->downloaded)) ?>
    • -slug ) && empty( $api->external ) ) : ?> -
    • -homepage ) ) : ?> -
    • -donate_link ) && empty( $api->contributors ) ) : ?> -
    • - + version ) ) { ?> +
  • version; ?>
    • + author ) ) { ?> +
  • author, '_blank' ); ?>
    • + last_updated ) ) { ?> +
  • + last_updated ) ) ); ?> +
    • + requires ) ) { ?> +
  • requires ); ?>
    • + tested ) ) { ?> +
  • tested; ?>
    • + downloaded ) ) { ?> +
  • downloaded ), number_format_i18n( $api->downloaded ) ); ?>
    • + slug ) && empty( $api->external ) ) { ?> +
    • + homepage ) ) { ?> +
    • + donate_link ) && empty( $api->contributors ) ) { ?> +
    • +
- rating ) ) : ?> -

+ rating ) ) { ?> +

$api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?> - num_ratings), number_format_i18n($api->num_ratings) ); ?> - - num_ratings ), number_format_i18n( $api->num_ratings ) ); ?> + ratings ) && array_sum( (array) $api->ratings ) > 0 ) { - foreach( $api->ratings as $key=>$ratecount ) { + foreach( $api->ratings as $key => $ratecount ) { // avoid div-by-zero $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0; ?>
- - stars - - + + stars + + - +
- contributors ) ) : ?> -

+ if ( ! empty( $api->contributors ) ) { ?> +

    contributors as $contrib_username => $contrib_profile ) { - if ( empty( $contrib_username ) && empty( $contrib_profile ) ) + if ( empty( $contrib_username ) && empty( $contrib_profile ) ) { continue; - if ( empty( $contrib_username ) ) + } + if ( empty( $contrib_username ) ) { $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile ); + } $contrib_username = sanitize_user( $contrib_username ); - if ( empty( $contrib_profile ) ) - echo "
  • {$contrib_username}
    • "; - else - echo "
  • {$contrib_username}
    • "; + if ( empty( $contrib_profile ) ) { + echo "
  • {$contrib_username}
    • "; + } else { + echo "
  • {$contrib_username}
    • "; + } } ?>
- donate_link ) ) : ?> - - - + donate_link ) ) { ?> + + +
tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) + if ( ! empty( $api->tested ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->tested ) ), $api->tested, '>' ) ) { echo '

' . __('Warning: This plugin has not been tested with your current version of WordPress.') . '

'; - - else if ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) + } else if ( ! empty( $api->requires ) && version_compare( substr( $GLOBALS['wp_version'], 0, strlen( $api->requires ) ), $api->requires, '<' ) ) { echo '

' . __('Warning: This plugin has not been marked as compatible with your version of WordPress.') . '

'; + } - foreach ( (array)$api->sections as $section_name => $content ) { - + foreach ( (array) $api->sections as $section_name => $content ) { $content = links_add_base_url( $content, 'https://wordpress.org/plugins/' . $api->slug . '/' ); $content = links_add_target( $content, '_blank' ); $san_section = esc_attr( $section_name ); - $display = ( $section_name == $section ) ? 'block' : 'none'; + $display = ( $section_name === $section ) ? 'block' : 'none'; echo "\t
\n"; echo $content; @@ -491,22 +502,24 @@ function install_plugin_information() { echo "
\n"; echo "
\n"; echo "