Making WordPress.org


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

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

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

File:
1 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>
Note: See TracChangeset for help on using the changeset viewer.