WordPress.org
Get WordPress

Making WordPress.org

Changeset 1034


Ignore:
Timestamp:
12/11/2014 07:39:05 PM (10 years ago)
Author:
obenland
Message:

WP.org Themes: Revamped modal layout and responsive styles.

See ​https://wordpress.slack.com/archives/meta/p1418066438000006
See #745.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/content-single.php

    r1021 r1034  
    1313            <?php endif; ?>
    1414
    15             <div class="theme-info hentry">
    16                 <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
    17                 <span class="theme-version">
     15            <div class="theme-screenshots">
     16                <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     17
     18                <div class="theme-actions">
     19                    <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
     20                    <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     21                </div>
     22            </div><!-- .theme-screenshots -->
     23
     24            <div class="theme-info">
     25                <div class="hentry">
     26                    <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
     27                    <span class="theme-version">
     28                        <?php
     29                            printf( __( 'Version: %s' ),
     30                                sprintf( '<abbr title="%1$s">%2$s</abbr>',
     31                                    esc_attr( sprintf( __( 'Last updated: %s' ), date_i18n( get_option( 'date_format' ), strtotime( $theme->last_updated ) ) ) ),
     32                                    $theme->version
     33                                )
     34                            );
     35                        ?>
     36                    </span>
     37                    <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
     38
     39                    <div class="theme-description entry-summary"><?php the_content(); ?></div>
     40
     41                    <?php if ( ! empty( $theme->parent ) ) : ?>
     42                    <div class="theme-notice notice notice-info">
     43                        <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), sprintf( '<a href="/%1$s">%2$s</a>', $theme->parent->slug, $theme->parent->name ) ); ?></p>
     44                    </div>
     45                    <?php endif; ?>
     46                </div><!-- .theme-info -->
     47
     48                <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
     49                    <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
     50                    <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
     51                    <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     52
     53                    <div class="star-holder">
     54                        <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
     55                            <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
     56                        </div>
     57                    </div>
     58                    <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></span>
     59
    1860                    <?php
    19                         printf( __( 'Version: %s' ),
    20                             sprintf( '<abbr title="%1$s">%2$s</abbr>',
    21                                 esc_attr( sprintf( __( 'Last updated: %s' ), date_i18n( get_option( 'date_format' ), strtotime( $theme->last_updated ) ) ) ),
    22                                 $theme->version
    23                             )
    24                         );
     61                        if ( $theme->lvl_ratings ) :
     62                            foreach ( $theme->lvl_ratings as $key => $rate_count ) :
    2563                    ?>
    26                 </span>
    27                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
     64                    <div class="counter-container">
     65                        <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $theme->slug ); ?>?filter=<?php echo $key; ?>" title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
     66                            <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
     67                            <span class="counter-back">
     68                                <span class="counter-bar" style="width: <?php echo 92 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
     69                            </span>
     70                        </a>
     71                        <span class="counter-count"><?php echo $rate_count; ?></span>
     72                    </div>
     73                    <?php
     74                            endforeach;
     75                        endif;
     76                    ?>
     77                </div><!-- .theme-rating -->
    2878
    29                 <div class="theme-description entry-summary"><?php the_content(); ?></div>
     79                <div class="theme-devs">
     80                    <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
     81                    <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     82                    <ul class="unmarked-list">
     83                        <li>
     84                            <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
     85                                <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;"/>
     86                                <?php _e( 'Development Log', 'wporg' ); ?>
     87                            </a>
     88                        </li>
     89                    </ul>
    3090
    31                 <?php if ( ! empty( $theme->template ) ) : ?>
    32                 <div class="theme-notice notice notice-info">
    33                     <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), sprintf( '<a href="/%1$s">%2$s</a>', $theme->template, $theme->template ) ); ?></p>
    34                 </div>
    35                 <?php endif; ?>
     91                    <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     92                    <ul class="unmarked-list">
     93                        <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     94                        <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     95                        <li><a href="//themes.trac.wordpress.org/browser/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     96                    </ul>
     97                </div><!-- .theme-devs -->
    3698
    37                 <p class="theme-tags">
    38                     <span><?php _e( 'Tags:' ); ?></span>
     99                <div class="theme-downloads">
     100                    <h4><?php _e( 'Downloads', 'wporg-themes' ); ?></h4>
     101
     102                    <div id="theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>" class="chart"></div>
     103                    <script type="text/javascript">
     104                        google.load("visualization", "1", {packages:["corechart"]});
     105                        google.setOnLoadCallback(drawThemeDownloadsChart);
     106
     107                        function drawThemeDownloadsChart() {
     108                            jQuery(document).ready(function($){
     109                                jQuery.getJSON('https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=<?php echo $theme->slug; ?>&limit=267&callback=?', function (downloads) {
     110                                    var data = new google.visualization.DataTable(),
     111                                        count = 0,
     112                                        sml;
     113
     114                                    data.addColumn('string', _wpThemeSettings.l10n.date);
     115                                    data.addColumn('number', _wpThemeSettings.l10n.downloads);
     116
     117                                    $.each(downloads, function (key, value) {
     118                                        data.addRow();
     119                                        data.setValue(count, 0, new Date(key).toLocaleDateString() );
     120                                        data.setValue(count, 1, Number(value));
     121                                        count++;
     122                                    });
     123
     124                                    sml = data.getNumberOfRows() < 225;
     125
     126                                    new google.visualization.ColumnChart(document.getElementById('theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>')).draw(data, {
     127                                        colors: ['#253578'],
     128                                        legend: {
     129                                            position: 'none'
     130                                        },
     131                                        titlePosition: 'in',
     132                                        axisTitlesPosition: 'in',
     133                                        chartArea: {
     134                                            height: 280,
     135                                            left: sml ? 30 : 0,
     136                                            width: sml ? '80%' : '100%'
     137                                        },
     138                                        hAxis: {
     139                                            textStyle: {color: 'black', fontSize: 9}
     140                                        },
     141                                        vAxis: {
     142                                            format: '###,###',
     143                                            textPosition: sml ? 'out' : 'in',
     144                                            viewWindowMode: 'explicit',
     145                                            viewWindow: {min: 0}
     146                                        },
     147                                        bar: {
     148                                            groupWidth: ( data.getNumberOfRows() > 100 ) ? "100%" : null
     149                                        },
     150                                        height: 350
     151                                    });
     152                                });
     153                            });
     154                        }
     155                    </script>
     156                    <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>' . number_format_i18n( $theme->downloaded ) . '</strong>' ); ?></p>
     157                </div><!-- .theme-downloads -->
     158
     159                <div class="theme-tags">
     160                    <h4><?php _e( 'Tags:' ); ?></h4>
    39161                    <?php
    40162                        foreach( $theme->tags as &$tag ) :
    41                             $tag = sprintf( '<a href="/tags/%1$s">%1$s</a>', $tag );
     163                            $tag = sprintf( '<a href="/tag/%1$s/">%1$s</a>', $tag );
    42164                        endforeach;
    43165                        echo implode( ', ', $theme->tags );
    44166                    ?>
    45                 </p>
    46             </div><!-- .theme-info -->
    47 
    48             <div class="theme-screenshots">
    49                 <div class="screenshot"><?php the_post_thumbnail(); ?></div>
    50             </div><!-- .theme-screenshots -->
    51 
    52             <div class="theme-ratings" itemprop="aggregateRating" itemscope
    53                  itemtype="http://schema.org/AggregateRating">
    54                 <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
    55                 <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
    56                 <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
    57 
    58                 <div class="star-holder">
    59                     <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
    60                         <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
    61                     </div>
    62                 </div>
    63                 <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></span>
    64                 <?php
    65                 $ratingcount = array(); // TODO: Rating counts
    66                 foreach ( range( 1, 5 ) as $val ) {
    67                     if ( empty( $ratingcount[ $val ] ) ) {
    68                         $ratingcount[ $val ] = 0;
    69                     }
    70                 }
    71                 krsort( $ratingcount );
    72                 foreach ( $ratingcount as $key => $ratecount ) :
    73                     ?>
    74                     <div class="counter-container">
    75                         <a href="//wordpress.org/support/view/theme-reviews/<?php echo esc_attr( $theme->slug ); ?>?filter=<?php echo $key; ?>"
    76                            title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
    77                             <span class="counter-label" style="float:left; margin-right:5px;"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
    78                         <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
    79                             <span class="counter-bar" style="width: <?php echo 92 * ( $ratecount / count( 1 ) ); ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
    80                         </span>
    81                         </a>
    82                         <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
    83                     </div>
    84                 <?php endforeach; ?>
    85             </div><!-- .theme-rating -->
    86 
    87             <div class="theme-devs">
    88                 <h4><?php _e( 'Developers', 'wporg-themes' ); ?></h4>
    89                 <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
    90                 <ul class="unmarked-list">
    91                     <li>
    92                         <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
    93                             <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;"/>
    94                             <?php _e( 'Development Log', 'wporg' ); ?>
    95                         </a>
    96                     </li>
    97                 </ul>
    98 
    99                 <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
    100                 <ul class="unmarked-list">
    101                     <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
    102                     <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
    103                     <li><a href="//themes.trac.wordpress.org/browser/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
    104                 </ul>
    105             </div><!-- .theme-devs -->
    106 
    107             <div class="theme-downloads">
    108                 <h4><?php _e( 'Downloads Per Day' ); ?></h4>
    109 
    110                 <div id="theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>" class="chart"></div>
    111                 <script type="text/javascript">
    112                     google.load("visualization", "1", {packages:["corechart"]});
    113                     google.setOnLoadCallback(drawThemeDownloadsChart);
    114 
    115                     function drawThemeDownloadsChart() {
    116                         jQuery(document).ready(function($){
    117                             jQuery.getJSON('https://api.wordpress.org/stats/themes/1.0/downloads.php?slug=<?php echo $theme->slug; ?>&limit=267&callback=?', function (downloads) {
    118                                 var data = new google.visualization.DataTable(),
    119                                     count = 0,
    120                                     sml;
    121 
    122                                 data.addColumn('string', _wpThemeSettings.l10n.date);
    123                                 data.addColumn('number', _wpThemeSettings.l10n.downloads);
    124 
    125                                 $.each(downloads, function (key, value) {
    126                                     data.addRow();
    127                                     data.setValue(count, 0, new Date(key).toLocaleDateString() );
    128                                     data.setValue(count, 1, Number(value));
    129                                     count++;
    130                                 });
    131 
    132                                 sml = data.getNumberOfRows() < 225;
    133 
    134                                 new google.visualization.ColumnChart(document.getElementById('theme-download-stats-<?php echo esc_attr( $theme->slug ); ?>')).draw(data, {
    135                                     colors: ['#253578'],
    136                                     legend: {
    137                                         position: 'none'
    138                                     },
    139                                     titlePosition: 'in',
    140                                     axisTitlesPosition: 'in',
    141                                     chartArea: {
    142                                         height: 280,
    143                                         left: sml ? 30 : 0,
    144                                         width: sml ? '80%' : '100%'
    145                                     },
    146                                     hAxis: {
    147                                         textStyle: {color: 'black', fontSize: 9}
    148                                     },
    149                                     vAxis: {
    150                                         format: '###,###',
    151                                         textPosition: sml ? 'out' : 'in',
    152                                         viewWindowMode: 'explicit',
    153                                         viewWindow: {min: 0}
    154                                     },
    155                                     bar: {
    156                                         groupWidth: ( data.getNumberOfRows() > 100 ) ? "100%" : null
    157                                     },
    158                                     height: 350
    159                                 });
    160                             });
    161                         });
    162                     }
    163                 </script>
    164             </div><!-- .theme-downloads -->
    165 
    166         </div>
    167 
    168         <div class="theme-actions">
    169             <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
    170             <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     167                </div><!-- .theme-tags -->
     168            </div>
    171169        </div>
    172170    </div>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/functions.php

    r1021 r1034  
    11<?php
     2
    23/**
    34 * WP.org Themes' functions and definitions.
    … …  
    1516
    1617function wporg_themes_setup() {
     18    global $themes_allowedtags, $theme_field_defaults;
     19
    1720//  load_theme_textdomain( 'wporg-themes', get_template_directory() . '/languages' );
    1821    add_theme_support( 'automatic-feed-links' );
    … …  
    2225        'primary' => __( 'Primary Menu', 'wporg-themes' ),
    2326    ) );
    24    
     27
    2528    add_theme_support( 'html5', array(
    2629        'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
    2730    ) );
     31
     32    $themes_allowedtags = array(
     33        'a'       => array( 'href' => array(), 'title' => array(), 'target' => array() ),
     34        'abbr'    => array( 'title' => array() ),
     35        'acronym' => array( 'title' => array() ),
     36        'code'    => array(),
     37        'pre'     => array(),
     38        'em'      => array(),
     39        'strong'  => array(),
     40        'div'     => array(),
     41        'p'       => array(),
     42        'ul'      => array(),
     43        'ol'      => array(),
     44        'li'      => array(),
     45        'h1'      => array(),
     46        'h2'      => array(),
     47        'h3'      => array(),
     48        'h4'      => array(),
     49        'h5'      => array(),
     50        'h6'      => array(),
     51        'img'     => array( 'src' => array(), 'class' => array(), 'alt' => array() ),
     52    );
     53
     54    $theme_field_defaults = array(
     55        'description'  => true,
     56        'sections'     => false,
     57        'tested'       => true,
     58        'requires'     => true,
     59        'rating'       => true,
     60        'downloaded'   => true,
     61        'downloadlink' => true,
     62        'last_updated' => true,
     63        'homepage'     => true,
     64        'tags'         => true,
     65        'num_ratings'  => true,
     66    );
    2867}
    2968add_action( 'after_setup_theme', 'wporg_themes_setup' );
    … …  
    4786        'themes'   => false,
    4887        'settings' => array(
     88            'isMobile'   => wp_is_mobile(),
    4989            'isInstall'  => true,
    5090            'canInstall' => false,
    … …  
    70110
    71111/**
     112 * @param  object $args
     113 * @param  string $action
     114 *
     115 * @return array
     116 */
     117function wporg_themes_api_args( $args, $action ) {
     118    if ( 'query_themes' == $action ) {
     119        $args->per_page = 30;
     120        $args->fields['parent'] = true;
     121        $args->fields['tags']   = true;
     122    }
     123
     124    return $args;
     125}
     126add_filter( 'themes_api_args', 'wporg_themes_api_args', 10, 2 );
     127
     128/**
    72129 * Removes Core's built-in query-themes handler, so we can safely add ours later on.
    73130 */
    … …  
    113170add_action( 'wp_ajax_nopriv_query-themes', 'wporg_themes_query_themes' );
    114171
     172function wporg_themes_theme_info() {
     173    global $themes_allowedtags;
     174
     175    $args  = wp_unslash( $_REQUEST );
     176    $theme = themes_api( 'theme_information', array( 'slug' => $args['slug'] ) );
     177
     178    if ( is_wp_error( $theme ) ) {
     179        wp_send_json_error();
     180    }
     181
     182    $theme->name        = wp_kses( $theme->name,        $themes_allowedtags );
     183    $theme->author      = wp_kses( $theme->author,      $themes_allowedtags );
     184    $theme->version     = wp_kses( $theme->version,     $themes_allowedtags );
     185    $theme->description = wp_kses( $theme->description, $themes_allowedtags );
     186    $theme->num_ratings = number_format_i18n( $theme->num_ratings );
     187    $theme->preview_url = set_url_scheme( $theme->preview_url );
     188
     189    wp_send_json_success( $theme );
     190}
     191add_action( 'wp_ajax_theme-info',        'wporg_themes_theme_info' );
     192add_action( 'wp_ajax_nopriv_theme-info', 'wporg_themes_theme_info' );
     193
    115194/**
    116195 * Include view templates in the footer.

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/index.php

    r1021 r1034  
    1313
    1414include ABSPATH . 'wp-admin/includes/theme.php';
    15 $themes = themes_api( 'query_themes', array(
     15
     16$args = array(
    1617    'per_page' => 15,
    17     'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured',
    18     'fields'   => 'tags',
    19 ) );
     18    'fields'   => array_merge( $GLOBALS['theme_field_defaults'], array(
     19        'parent'   => true,
     20    ) ),
     21);
     22
     23if ( get_query_var( 'tag' ) ) {
     24    $args['tag'][] = get_query_var( 'tag' );
     25} else {
     26    $args['browse'] = get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured';
     27}
     28$themes = themes_api( 'query_themes', $args );
    2029
    2130get_header();
    2231?>
    2332
    24 <div id="themes" class="wrap">
    25     <div class="wp-filter">
    26         <div class="filter-count">
    27             <span class="count theme-count"><?php echo count( $themes->themes ); ?></span>
    28         </div>
    29 
    30         <ul class="filter-links">
    31             <li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
    32             <li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
    33             <li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
    34         </ul>
    35 
    36         <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
    37 
    38         <div class="search-form"></div>
    39 
    40         <div class="filter-drawer">
    41             <div class="buttons">
    42                 <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
    43                 <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     33    <div id="themes" class="wrap">
     34        <div class="wp-filter">
     35            <div class="filter-count">
     36                <span class="count theme-count"><?php echo count( $themes->themes ); ?></span>
    4437            </div>
    4538
    46             <?php foreach ( get_theme_feature_list() as $feature_name => $features ) : ?>
    47             <div class="filter-group">
    48                 <h4><?php echo esc_html( $feature_name ); ?></h4>
    49                 <ol class="feature-group">
    50                     <?php foreach ( $features as $feature => $feature_name ) : ?>
    51                     <li>
    52                         <input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
    53                         <label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label>
    54                     </li>
    55                     <?php endforeach; ?>
    56                 </ol>
     39            <ul class="filter-links">
     40                <li><a href="/browse/featured/" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
     41                <li><a href="/browse/popular/" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
     42                <li><a href="/browse/new/" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
     43            </ul>
     44
     45            <a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
     46
     47            <div class="search-form"></div>
     48
     49            <div class="filter-drawer">
     50                <div class="buttons">
     51                    <a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
     52                    <a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
     53                </div>
     54
     55                <div class="filtered-by">
     56                    <span><?php _e( 'Filtering by:' ); ?></span>
     57                    <div class="tags"></div>
     58                    <a href="#"><?php _e( 'Edit' ); ?></a>
     59                </div>
     60
     61                <?php foreach( get_theme_feature_list() as $feature_name => $features ) : ?>
     62                <div class="filter-group">
     63                    <h4><?php echo esc_html( $feature_name ); ?></h4>
     64                    <ol class="feature-group">
     65                        <?php foreach ( $features as $feature => $feature_name ) : ?>
     66                        <li>
     67                            <input type="checkbox" id="filter-id-<?php echo esc_attr( $feature ); ?>" value="<?php echo esc_attr( $feature ); ?>" />
     68                            <label for="filter-id-<?php echo esc_attr( $feature ); ?>"><?php echo esc_html( $feature_name ); ?></label>
     69                        </li>
     70                        <?php endforeach; ?>
     71                    </ol>
     72                </div>
     73                <?php endforeach; ?>
    5774            </div>
    58             <?php endforeach; ?>
     75        </div><!-- .wp-filter -->
    5976
    60             <div class="filtered-by">
    61                 <span><?php _e( 'Filtering by:' ); ?></span>
    62                 <div class="tags"></div>
    63                 <a href="#"><?php _e( 'Edit' ); ?></a>
    64             </div>
    65         </div>
    66     </div><!-- .wp-filter -->
    67 
    68     <div class="theme-browser content-filterable">
    69         <div class="themes">
    70             <?php
     77        <div class="theme-browser content-filterable">
     78            <div class="themes">
     79                <?php
    7180                if ( ! is_wp_error( $themes ) ) :
    7281                    foreach ( $themes->themes as $theme ) :
    … …  
    7483                    endforeach;
    7584                endif;
    76             ?>
     85                ?>
     86            </div>
    7787        </div>
     88        <div class="theme-install-overlay"></div>
     89        <div class="theme-overlay"></div>
     90
     91        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     92        <span class="spinner"></span>
    7893    </div>
    79     <div class="theme-install-overlay"></div>
    80     <div class="theme-overlay"></div>
    81 
    82     <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
    83     <span class="spinner"></span>
    84 </div>
    8594
    8695<?php

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/js/theme.js

    r1021 r1034  
    3939
    4040            // If last updated plus 2 years is in the past, it's outdated.
    41             data.is_outdated = updated.setYear(updated.getYear() + 1902).valueOf() > new Date().valueOf();
     41            data.is_outdated = updated.setYear(updated.getYear() + 1902).valueOf() < new Date().valueOf();
     42
     43            // Make tags clickable and seprated by a comma.
     44            data.tags = _.map( data.tags, function( tag ) {
     45                return '<a href="/tag/'+tag+'/">'+tag+'</a>';
     46            }).join( ', ' );
    4247
    4348            this.$el.html( this.html( data ) );
    … …  
    100105            }
    101106
    102             preview.$el.addClass( 'wp-full-overlay expanded' );
     107            if ( wp.themes.data.settings.isMobile ) {
     108                preview.$el.addClass( 'wp-full-overlay collapsed' );
     109            } else {
     110                preview.$el.addClass( 'wp-full-overlay expanded' );
     111            }
    103112
    104113            // Append preview
    … …  
    240249    });
    241250
     251    _.extend( wp.themes.view.Preview.prototype, {
     252
     253        close: function() {
     254            this.$el.fadeOut( 200, function() {
     255                $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
     256
     257                // Return focus to the theme div
     258                if ( wp.themes.focusedTheme ) {
     259                    wp.themes.focusedTheme.focus();
     260                }
     261            });
     262
     263            this.trigger( 'preview:close' );
     264            this.undelegateEvents();
     265            this.unbind();
     266            return false;
     267        },
     268
     269        keyEvent: function() {
     270            // The escape key closes the preview
     271            if ( event.keyCode === 27 ) {
     272                this.undelegateEvents();
     273                this.close();
     274            }
     275            // The right arrow key, next theme
     276            if ( event.keyCode === 39 ) {
     277                _.once( this.nextTheme() );
     278            }
     279
     280            // The left arrow key, previous theme
     281            if ( event.keyCode === 37 ) {
     282                this.previousTheme();
     283            }
     284
     285            // Prevent the underlying modal to advance too.
     286            return false;
     287        }
     288    });
     289
     290    _.extend( wp.themes.view.InstallerSearch.prototype, {
     291        doSearch: _.debounce( function( value ) {
     292            var request = {};
     293
     294            request.search = value;
     295
     296            // Intercept an [author] search.
     297            //
     298            // If input value starts with `author:` send a request
     299            // for `author` instead of a regular `search`
     300            if ( value.substring( 0, 7 ) === 'author:' ) {
     301                request.search = '';
     302                request.author = value.slice( 7 );
     303            }
     304
     305            // Intercept a [tag] search.
     306            //
     307            // If input value starts with `tag:` send a request
     308            // for `tag` instead of a regular `search`
     309            if ( value.substring( 0, 4 ) === 'tag:' ) {
     310                request.search = '';
     311                request.tag = [ value.slice( 4 ) ];
     312            }
     313
     314            $( '.filter-links li > a.current' ).removeClass( 'current' );
     315            $( 'body' ).removeClass( 'show-filters filters-applied' );
     316
     317            // Get the themes by sending Ajax POST request to api.wordpress.org/themes
     318            // or searching the local cache
     319            this.collection.query( request );
     320
     321            // Set route
     322            if ( value ) {
     323                wp.themes.router.navigate( wp.themes.router.baseUrl( wp.themes.router.searchPath + value ), { replace: true } );
     324            } else {
     325                wp.themes.router.navigate( wp.themes.router.baseUrl( '' ) );
     326            }
     327        }, 300 )
     328    });
     329
    242330    _.extend( wp.themes.InstallerRouter.prototype, {
    243331        routes: {
    244332            '/:slug/': 'preview',
    245             '/browse/:sort/': 'sort',
     333            '/tag/:tag/': 'onFilter',
    246334            '/?upload': 'upload',
    247335            '/search.php?q=:query': 'search',
     336            '/browse/:sort/': 'sort',
     337            '/': 'sort',
    248338            '': 'sort'
    249339        },
    … …  
    258348    });
    259349
     350    _.extend( wp.themes.RunInstaller, {
     351        extraRoutes: function() {
     352            var self = this;
     353
     354            wp.themes.router.on( 'route:tag', function( tag ) {
     355                $( '#filter-id-' + tag).checked( true );
     356                self.view.applyFilters();
     357            });
     358        }
     359    });
     360
    260361}( jQuery, wp ) );

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/style.css

    r1021 r1034  
    2020p {
    2121    margin-bottom: 1.5em;
     22}
     23
     24p a,
     25p a:hover {
     26    border: none;
    2227}
    2328
    … …  
    5257.wrap {
    5358    box-sizing: border-box;
     59    clear: both;
    5460    margin: 0 auto;
    5561    max-width: 960px;
    5662    padding: 0 10px;
    5763}
     64
     65.theme-overlay .theme-backdrop {
     66    position: fixed;
     67}
     68
    5869.theme-overlay .theme-wrap {
    5970    left: 30px;
     71    overflow: hidden;
    6072    top: 3%;
    6173}
    … …  
    6577}
    6678
    67 @media only screen and (max-width: 782px) {
    68     .theme-overlay .theme-wrap {
    69         bottom: 3%;
    70         left: 10px;
    71         right: 10px;
    72     }
    73 }
    74 
    75 .theme-wrap .theme-about > div:not(.notice) {
     79.theme-browser .themes {
     80    font-size: 0;
     81}
     82.theme-browser .theme {
     83    display: inline-block;
     84    float: none;
     85}
     86.theme-browser .theme:hover,
     87.theme-browser .theme:focus {
     88    border-color: #5b9dd9;
     89    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     90    box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     91}
     92
     93.theme-browser .theme:hover .theme-screenshot img,
     94.theme-browser .theme:focus .theme-screenshot img {
     95    opacity: 0.4;
     96}
     97
     98.theme-browser .theme:hover .more-details,
     99.theme-browser .theme:focus .more-details,
     100.theme-browser .theme .more-details:focus {
     101    opacity: 1;
     102}
     103
     104.theme-overlay .theme-about {
     105    bottom: 0;
     106}
     107
     108.theme-wrap .theme-info > div {
    76109    margin-bottom: 75px;
    77110}
    … …  
    86119
    87120.theme-wrap .theme-screenshots {
    88     float: none;
    89 }
    90 
    91 .theme-wrap .theme-downloads {
     121    float: left;
     122    margin-bottom: 75px;
     123    max-width: 880px;
     124    text-align: center;
    92125    width: 55%;
    93126}
     127
     128.theme-wrap .screenshot {
     129    overflow: initial;
     130}
     131
     132.theme-wrap .theme-actions {
     133    background: none;
     134    border: none;
     135    padding: 10px 25px 5px;
     136    position: relative;
     137    text-align: center;
     138    z-index: auto;
     139}
     140
    94141.theme-wrap .theme-devs,
    95142.theme-wrap .theme-ratings {
    96143    display: inline-block;
    97144    vertical-align: top;
    98     width: 26%;
     145    width: 46%;
    99146}
    100147
    … …  
    103150}
    104151
    105 .theme-wrap .theme-ratings {
    106     margin-right: 3%;
    107 }
    108 
    109152.theme-wrap .theme-devs h5 {
    110153    margin: 1em 0 0 0;
    … …  
    112155.theme-wrap .theme-devs li {
    113156    line-height: 1.5;
     157}
     158
     159.theme-wrap .theme-ratings {
     160    margin-right: 7%;
     161}
     162
     163.theme-wrap .theme-ratings .counter-label {
     164    float: left;
     165    margin-right: 5px;
     166}
     167.theme-wrap .theme-ratings .counter-back,
     168.theme-wrap .theme-ratings .counter-bar {
     169    float: left;
     170    height: 17px;
     171}
     172.theme-wrap .theme-ratings .counter-back {
     173    background-color: #ececec;
     174    width: 92px;
     175}
     176.theme-wrap .theme-ratings .counter-bar {
     177    background-color: #fddb5a;
     178}
     179.theme-wrap .theme-ratings .counter-count {
     180    margin-left: 5px;
     181}
     182
     183.theme-wrap .theme-tags {
     184    border: none;
    114185}
    115186
    … …  
    196267}
    197268
     269.theme-wrap .theme-downloads .total-downloads {
     270    color: #555;
     271    font-size: 14px;
     272    font-weight: 400;
     273    line-height: 1.5;
     274    margin: 1.5em 0 0 0;
     275}
     276
    198277.single .theme-wrap .theme-tags {
    199278    border-top: 3px solid #eee;
    … …  
    211290}
    212291
    213 .single .theme-wrap .theme-screenshots {
    214     margin: 0 30px 0 0;
    215     width: 55%;
    216     max-width: 880px;
    217     text-align: center;
    218 }
    219292.single .theme-wrap .screenshot {
    220293    border: 1px solid #fff;
    … …  
    231304}
    232305
    233 .single .theme-wrap .theme-actions {
    234     background: #f3f3f3;
    235     border-top: 1px solid #eee;
    236     box-sizing: border-box;
    237     margin: 0 -4.3% -2.1%;
    238     padding: 10px 25px 5px;
    239     text-align: center;
    240 }
    241 
    242306.ie8 .single .theme-wrap .theme-actions {
    243307    border: 1px solid #eee;
    244 }
    245 
    246 .single .theme-wrap .theme-actions a {
    247     margin-right: 5px;
    248     margin-bottom: 5px;
    249308}
    250309
    … …  
    255314    background-size: 20px 20px;
    256315    display: none;
    257     float: right;
    258316    opacity: 0.7;
    259317    filter: alpha(opacity=70);
    260318    width: 20px;
    261319    height: 20px;
    262     margin: 2px 5px 0;
     320    margin: 25% auto 70%;
    263321}
    264322
    265323.loading-content .spinner {
    266324    display: block;
    267     float: none;
    268     margin: 40px auto 0;
    269325}
    270326
    … …  
    277333    margin: 0 !important;
    278334}
    279 
     335.theme-overlay .theme-header .close {
     336    border-left: 0;
     337    border-right: 1px solid #ddd;
     338    float: left;
     339}
    280340.theme-overlay .theme-header .right {
    281341    float: left !important;
    … …  
    373433    float: right;
    374434    margin: 12px 0;
    375 }
    376 
    377 .wp-filter .search-form input[type="search"] {
     435    display: inline-block;
     436}
     437
     438.wp-filter .wp-filter-search {
    378439    margin: 0;
    379440    padding: 3px 5px;
    … …  
    461522
    462523.filter-group {
    463     -webkit-box-sizing: border-box;
    464     -moz-box-sizing: border-box;
     524    background: #fff;
     525    border: 1px solid #e5e5e5;
    465526    box-sizing: border-box;
    466527    float: left;
     528    height: 710px;
    467529    margin: 0 1% 0 0;
    468530    padding: 10px;
    469     width: 19%;
    470     background: #fff;
    471     border: 1px solid #e5e5e5;
     531    width: calc(100% / 4 - 7px);
    472532    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    473533    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     534}
     535
     536.filter-group:last-of-type {
     537    margin: 0;
    474538}
    475539
    … …  
    564628.show-filters.filters-applied .content-filterable {
    565629    display: block;
    566 }
    567 
    568 .loading-content .spinner {
    569     display: block;
    570     margin: 40px auto 0;
    571     float: none;
    572 }
    573 
    574 @media only screen and (max-width: 1120px) {
    575     .wp-filter .search-form {
    576         float: none;
    577         margin: 20px 0;
    578     }
    579 
    580     .filter-drawer {
    581         border-bottom: 1px solid #eee;
    582     }
    583 
    584     .filter-group {
    585         margin-bottom: 0;
    586         margin-top: 5px;
    587         width: 100%;
    588     }
    589 
    590     .filter-group li {
    591         margin: 10px 0;
    592     }
    593 }
    594 
    595 @media only screen and (max-width: 782px) {
    596     .filter-group,
    597     .filter-group li {
    598         width: 100%;
    599     }
    600 
    601630}
    602631
    … …  
    652681}
    653682
     683.wrap .button-primary.hover,
     684.wrap .button-primary:hover,
     685.wrap .button-primary.focus,
     686.wrap .button-primary:focus {
     687    background: #1e8cbe;
     688    border-color: #0074a2;
     689    -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
     690    box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
     691    color: #fff;
     692}
     693
     694.wrap .button-secondary {
     695    color: #555;
     696    border-color: #ccc;
     697    background: #f7f7f7;
     698    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
     699    box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
     700    vertical-align: top;
     701}
     702
     703.wrap .button-secondary.hover,
     704.wrap .button-secondary:hover,
     705.wrap .button-secondary.focus,
     706.wrap .button-secondary:focus {
     707    background: #fafafa;
     708    border-color: #999;
     709    color: #222;
     710}
     711
    654712/* Theme notices */
    655 .notice {
     713.notice,
     714.error {
    656715    background: #fff;
    657716    border: 1px solid #fff;
    … …  
    663722}
    664723
    665 .notice p {
     724.notice p,
     725.error p {
    666726    margin: 0.5em 0;
    667727    padding: 2px;
    … …  
    676736}
    677737
    678 .notice-error {
     738.notice-error,
     739.error {
    679740    border-color: #dd3d36;
    680741}
    … …  
    688749    margin: 5px 0 15px;
    689750}
     751
     752@media only screen and (min-width: 1640px) {
     753    .theme-browser .themes .theme {
     754        width: 30.6%;
     755        margin: 0 4% 4% 0;
     756    }
     757
     758    .theme-browser .theme:nth-child(4n) {
     759        margin-right: 4%;
     760    }
     761
     762    .theme-browser .theme:nth-child(3n) {
     763        margin-right: 0;
     764    }
     765}
     766
     767@media only screen and (max-width: 1120px) {
     768    .filter-drawer {
     769        border-bottom: 1px solid #eee;
     770    }
     771
     772    .filter-group {
     773        margin-bottom: 0;
     774        margin-top: 5px;
     775        width: 100%;
     776    }
     777
     778    .filter-group li {
     779        margin: 10px 0;
     780    }
     781}
     782
     783@media only screen and (max-width: 960px) {
     784    /* Keep ratings and dev links stacked until they have enough room. */
     785    .theme-wrap .theme-devs,
     786    .theme-wrap .theme-ratings {
     787        margin: auto;
     788        width: 100%;
     789    }
     790}
     791
     792@media only screen and (max-width: 782px) {
     793    .theme-overlay .theme-wrap {
     794        bottom: 3%;
     795        left: 10px;
     796        right: 10px;
     797    }
     798
     799    .wp-filter .search-form {
     800        float: none;
     801        margin: 20px 0;
     802        width: 100%;
     803    }
     804
     805    .filter-group,
     806    .filter-group li {
     807        width: 100%;
     808    }
     809
     810    .theme-wrap .theme-screenshots {
     811        float: none;
     812        width: 100%;
     813    }
     814
     815    .theme-wrap .theme-actions {
     816        padding: 10px 0 5px;
     817    }
     818
     819    .theme-wrap .theme-actions .button-primary {
     820        display: none;
     821    }
     822
     823    .theme-wrap .theme-actions .button-secondary {
     824        font-size: 18px;
     825        height: auto;
     826        padding: 0.5em 0;
     827        width: 100%;
     828    }
     829
     830    .theme-wrap .theme-info {
     831        float: none;
     832        width: auto;
     833    }
     834
     835    .theme-install-overlay .wp-full-overlay-header .theme-install {
     836        line-height: 26px;
     837        margin-top: 8px;
     838    }
     839}
     840
     841@media only screen and (max-width: 480px) {
     842    /* Align login info with site title. */
     843    #headline .login {
     844        float: left;
     845        margin-left: 10px;
     846    }
     847
     848    /* Hide Feature Filter on mobile. */
     849    .wp-filter .drawer-toggle {
     850        display: none;
     851    }
     852
     853    /* Full width search form. */
     854    .wp-filter .search-form,
     855    .wp-filter .wp-filter-search {
     856        width: 100%;
     857    }
     858
     859    .admin-bar .theme-overlay .theme-wrap {
     860        top: 3%;
     861    }
     862
     863    .theme-browser .themes .theme {
     864        margin-right: 0;
     865    }
     866
     867    .theme-wrap .theme-screenshots,
     868    .theme-wrap .theme-info > div {
     869        margin-bottom: 30px;
     870    }
     871}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-preview.php

    r1006 r1034  
    55            <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
    66            <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
    7             <a href="#" class="button button-primary theme-install"><?php _e( 'Download' ); ?></a>
     7            <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary theme-install"><?php _e( 'Download' ); ?></a>
    88        </div>
    99        <div class="wp-full-overlay-sidebar-content">
    … …  
    2323
    2424                        <# if ( data.num_ratings ) { #>
    25                         <small class="ratings">{{ data.num_ratings }}</small>
     25                        <small class="ratings"><?php printf( __( '(based on %s ratings).', 'wporg-themes' ), '{{ data.num_ratings }}' ); ?></small>
    2626                        <# } else { #>
    2727                        <small class="ratings"><?php _e( 'No ratings.' ); ?></small>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

    r1021 r1034  
    1414            <# } #>
    1515
    16             <div class="theme-info hentry">
    17                 <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
    18                 <span class="theme-version">
    19                     <?php printf( __( 'Version: %s' ), sprintf( '<abbr title="%1$s">%2$s</abbr>', esc_attr( sprintf( __( 'Last updated: %s' ), '{{ new Date(data.last_updated).toLocaleDateString() }}' ) ), '{{{ data.version }}}' ) ); ?>
    20                 </span>
    21                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{{ data.author }}}</span>' ); ?></h4>
     16                <div class="theme-screenshots">
     17                    <# if ( data.screenshot_url ) { #>
     18                        <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
     19                    <# } else { #>
     20                        <div class="screenshot blank"></div>
     21                    <# } #>
    2222
    23                 <p class="theme-description entry-summary">{{{ data.description }}}</p>
    2423
    25                 <# if ( data.parent ) { #>
    26                     <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
    27                 <# } #>
     24                    <div class="theme-actions">
     25                        <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary"><?php _e( 'Download' ); ?></a>
     26                        <a href="{{{ data.preview_url }}}" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     27                    </div>
     28                </div><!-- .theme-screenshot -->
     29
     30                <div class="theme-info">
     31                <div class="theme hentry">
     32                    <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
     33                    <span class="theme-version">
     34                        <?php printf( __( 'Version: %s' ), sprintf( '<abbr title="%1$s">%2$s</abbr>', esc_attr( sprintf( __( 'Last updated: %s' ), '{{ new Date(data.last_updated).toLocaleDateString() }}' ) ), '{{{ data.version }}}' ) ); ?>
     35                    </span>
     36                    <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{{ data.author }}}</span>' ); ?></h4>
     37
     38                    <p class="theme-description entry-summary">{{{ data.description }}}</p>
     39
     40                    <# if ( data.parent ) { #>
     41                    <div class="theme-notice notice notice-info">
     42                        <p class="parent"><?php printf( __( 'This is a child theme of %s.' ), sprintf( '<a href="/%1$s">%2$s</a>', '{{{ data.parent.slug }}}', '{{{ data.parent.name }}}' ) ); ?></p>
     43                    </div>
     44                    <# } #>
     45                </div><!-- .theme-info -->
     46
     47                <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
     48                    <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
     49                    <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
     50                    <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     51                    <div class="star-holder">
     52                        <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
     53                    </div>
     54                    <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></span>
     55
     56                    <# if ( data.lvl_ratings ) { #>
     57                        <div class="counter-container">
     58                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=5" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 5 ); ?>">
     59                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 5 ); ?></span>
     60                                <span class="counter-back">
     61                                    <span class="counter-bar" style="width: {{ 92 * data.lvl_ratings[5] / data.num_ratings }}px;"></span>
     62                                </span>
     63                            </a>
     64                            <span class="counter-count">{{ data.lvl_ratings[5] }}</span>
     65                        </div>
     66                        <div class="counter-container">
     67                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=4" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 4 ); ?>">
     68                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 4 ); ?></span>
     69                                <span class="counter-back">
     70                                    <span class="counter-bar" style="width: {{ 92 * data.lvl_ratings[4] / data.num_ratings }}px;"></span>
     71                                </span>
     72                            </a>
     73                            <span class="counter-count">{{ data.lvl_ratings[4] }}</span>
     74                        </div>
     75                        <div class="counter-container">
     76                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=3" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 3 ); ?>">
     77                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 3 ); ?></span>
     78                                <span class="counter-back">
     79                                    <span class="counter-bar" style="width: {{ 92 * data.lvl_ratings[3] / data.num_ratings }}px;"></span>
     80                                </span>
     81                            </a>
     82                            <span class="counter-count">{{ data.lvl_ratings[3] }}</span>
     83                        </div>
     84                        <div class="counter-container">
     85                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=2" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 2 ); ?>">
     86                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 2 ); ?></span>
     87                                <span class="counter-back">
     88                                    <span class="counter-bar" style="width: {{ 92 * data.lvl_ratings[2] / data.num_ratings }}px;"></span>
     89                                </span>
     90                            </a>
     91                            <span class="counter-count">{{ data.lvl_ratings[2] }}</span>
     92                        </div>
     93                        <div class="counter-container">
     94                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=1" title="<?php printf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 1 ); ?>">
     95                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 1 ); ?></span>
     96                                <span class="counter-back">
     97                                    <span class="counter-bar" style="width: {{ 92 * data.lvl_ratings[1] / data.num_ratings }}px;"></span>
     98                                </span>
     99                            </a>
     100                            <span class="counter-count">{{ data.lvl_ratings[1] }}</span>
     101                        </div>
     102                    <# } #>
     103                </div><!-- .theme-rating -->
     104
     105                    <div class="theme-devs">
     106                        <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
     107                        <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     108                        <ul class="unmarked-list">
     109                            <li>
     110                                <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
     111                                    <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;" />
     112                                    <?php _e( 'Development Log', 'wporg' ); ?>
     113                                </a>
     114                            </li>
     115                        </ul>
     116
     117                        <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     118                        <ul class="unmarked-list">
     119                            <li><a href="//themes.trac.wordpress.org/log/{{data.id}}/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     120                            <li><a href="//themes.svn.wordpress.org/{{data.id}}/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     121                            <li><a href="//themes.trac.wordpress.org/browser/{{data.id}}/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     122                        </ul>
     123                    </div><!-- .theme-devs -->
     124
     125                <div class="theme-downloads">
     126                    <h4><?php _e( 'Downloads Per Day' ); ?></h4>
     127                    <div id="theme-download-stats-{{data.id}}" class="chart"></div>
     128                    <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>{{ new Number(data.downloaded).toLocaleString() }}</strong>' ); ?></p>
     129                </div><!-- .theme-downloads -->
    28130
    29131                <# if ( data.tags ) { #>
    30                 <p class="theme-tags">
    31                     <span><?php _e( 'Tags:' ); ?></span>
    32                     <# _.each( data.tags, function( tag ) { #>
    33                         <a href="">{{{ tag }}}</a>
    34                     <# }); #>
    35                 </p>
     132                    <div class="theme-tags">
     133                        <h4><?php _e( 'Tags:' ); ?></h4>
     134                        {{{ data.tags }}}
     135                    </div><!-- .theme-tags -->
    36136                <# } #>
    37             </div><!-- .theme-info -->
    38 
    39             <div class="theme-screenshots">
    40                 <# if ( data.screenshot_url ) { #>
    41                 <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
    42                 <# } else { #>
    43                 <div class="screenshot blank"></div>
    44                 <# } #>
    45             </div><!-- .theme-screenshot -->
    46 
    47             <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    48                 <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
    49                 <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
    50                 <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
    51                 <div class="star-holder">
    52                     <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
    53                 </div>
    54                 <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></span>
    55                 <?php
    56                 $ratingcount = array(); // TODO: Rating counts
    57                 foreach ( range( 1, 5 ) as $val ) {
    58                     if ( empty( $ratingcount[ $val ] ) ) {
    59                         $ratingcount[ $val ] = 0;
    60                     }
    61                 }
    62                 krsort( $ratingcount );
    63                 foreach ( $ratingcount as $key => $ratecount ) :
    64                     ?>
    65                     <div class="counter-container">
    66                         <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=<?php echo $key; ?>" title="<?php printf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key, 'wporg-themes' ), $key ); ?>">
    67                             <span class="counter-label" style="float:left; margin-right:5px;"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
    68                         <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
    69                             <span class="counter-bar" style="width: <?php echo 92 * ( $ratecount / count( 1 ) ); ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
    70                         </span>
    71                         </a>
    72                         <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
    73                     </div>
    74                 <?php endforeach; ?>
    75             </div><!-- .theme-rating -->
    76 
    77             <div class="theme-devs">
    78                 <h4><?php _e( 'Developers', 'wporg-themes' ); ?></h4>
    79                 <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
    80                 <ul class="unmarked-list">
    81                     <li>
    82                         <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
    83                             <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;" />
    84                             <?php _e( 'Development Log', 'wporg' ); ?>
    85                         </a>
    86                     </li>
    87                 </ul>
    88 
    89                 <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
    90                 <ul class="unmarked-list">
    91                     <li><a href="//themes.trac.wordpress.org/log/{{data.id}}/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
    92                     <li><a href="//themes.svn.wordpress.org/{{data.id}}/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
    93                     <li><a href="//themes.trac.wordpress.org/browser/{{data.id}}/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
    94                 </ul>
    95             </div><!-- .theme-devs -->
    96 
    97             <div class="theme-downloads">
    98                 <h4><?php _e( 'Downloads Per Day' ); ?></h4>
    99                 <div id="theme-download-stats-{{data.id}}" class="chart"></div>
    100             </div><!-- .theme-downloads -->
    101         </div>
    102 
    103         <div class="theme-actions">
    104             <a href="" class="button button-primary"><?php _e( 'Download' ); ?></a>
    105             <a href="{{{ data.preview_url }}}" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     137            </div>
    106138        </div>
    107139    </div>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme.php

    r1006 r1034  
    1212
    1313    <div class="theme-actions">
    14         <a class="button button-primary preview install-theme-preview" href="#"><?php esc_html_e( 'Download' ); ?></a>
     14        <a class="button button-primary preview install-theme-preview" href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip"><?php esc_html_e( 'Download' ); ?></a>
    1515    </div>
    1616</script>
Note: See TracChangeset for help on using the changeset viewer.