WordPress.org

Making WordPress.org


Ignore:
Timestamp:
12/11/2014 07:39:05 PM (7 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.