WordPress.org
Get WordPress

Making WordPress.org

Changeset 1021


Ignore:
Timestamp:
12/02/2014 11:03:33 PM (10 years ago)
Author:
obenland
Message:

WP.org Themes: First pass at improved single theme page.

  • Synchronizes content between modal and single view.
  • Displays a banner if the theme is outdated.
  • Removes unused inline CSS for easier code scanning.

See #745.

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

Legend:

Unmodified
Added
Removed

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

    r1009 r1021  
    1 <?php global $theme; ?>
     1<?php
     2include ABSPATH . 'wp-admin/includes/theme.php';
     3$theme = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
     4?>
     5<div id="themes" class="wrap">
     6    <div class="theme-wrap">
     7        <div class="theme-about">
    28
    3 <div class="theme-backdrop"></div>
    4 <div class="theme-wrap">
    5     <div class="theme-header">
    6         <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
    7         <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    8         <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    9     </div>
    10     <div class="theme-about">
    11         <div class="theme-screenshots">
    12             <div class="screenshot"><?php the_post_thumbnail(); ?></div>
     9            <?php if ( strtotime( '-2 years' ) > strtotime( $theme->last_updated ) ) : ?>
     10                <div class="theme-notice notice notice-warning">
     11                    <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
     12                </div><!-- .theme-info -->
     13            <?php endif; ?>
     14
     15            <div class="theme-info hentry">
     16                <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
     17                <span class="theme-version">
     18                    <?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                        );
     25                    ?>
     26                </span>
     27                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
     28
     29                <div class="theme-description entry-summary"><?php the_content(); ?></div>
     30
     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; ?>
     36
     37                <p class="theme-tags">
     38                    <span><?php _e( 'Tags:' ); ?></span>
     39                    <?php
     40                        foreach( $theme->tags as &$tag ) :
     41                            $tag = sprintf( '<a href="/tags/%1$s">%1$s</a>', $tag );
     42                        endforeach;
     43                        echo implode( ', ', $theme->tags );
     44                    ?>
     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
    13166        </div>
    14167
    15         <div class="theme-info hentry">
    16             <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
    17             <span class="theme-version"><?php printf( __( 'Version: %s' ), $theme->version ); ?></span>
    18             <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">' . $theme->author . '</span>' ); ?></h4>
    19 
    20             <p class="theme-description entry-summary"><?php the_content(); ?></p>
    21 
    22             <div class="rating rating-<?php echo round( $theme->rating, -1 ); ?>">
    23                 <span class="one"></span>
    24                 <span class="two"></span>
    25                 <span class="three"></span>
    26                 <span class="four"></span>
    27                 <span class="five"></span>
    28 
    29                 <p class="votes"><?php printf( __( 'Based on %s ratings.' ), $theme->num_ratings ); ?></p>
    30             </div>
    31 
    32             <div class="theme-stats">
    33                 <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated"><?php echo $theme->last_updated; ?></span></div>
    34                 <div><strong><?php _e( 'Downloads:' ); ?></strong> <?php echo $theme->downloaded; ?></div>
    35                 <div><a href="<?php echo esc_url( $theme->homepage ); ?>"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
    36             </div>
    37 
    38             <p class="theme-tags">
    39                 <span><?php _e( 'Tags:' ); ?></span>
    40                 <?php echo implode( ', ', $theme->tags ); ?>
    41             </p>
     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>
    42171        </div>
    43172    </div>
    44 
    45     <div class="theme-actions">
    46         <a href="<?php echo esc_url( '//downloads.wordpress.org/theme/' . $theme->slug . '.' . $theme->version . '.zip' ); ?>" class="button button-primary"><?php _e( 'Download' ); ?></a>
    47         <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    48     </div>
    49173</div>

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

    r1009 r1021  
    104104        $theme->version     = wp_kses( $theme->version,     $themes_allowedtags );
    105105        $theme->description = wp_kses( $theme->description, $themes_allowedtags );
    106         $theme->num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
     106        $theme->num_ratings = number_format_i18n( $theme->num_ratings );
    107107        $theme->preview_url = set_url_scheme( $theme->preview_url );
    108108    }

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

    r1006 r1021  
    3434<![endif]-->
    3535
    36 
    37 <style type="text/css">
    38 h3.top {
    39     border-bottom: 1px solid #CCCCCC;
    40     margin-bottom: 20px;
    41 }
    42 div.plugin-block {
    43     margin-bottom: 20px;
    44 }
    45 .pending-theme {
    46     line-height: 200%;
    47 }
    48 span.button {
    49     padding: 3px;
    50 }
    51 .admin-message {
    52     background-color: #FFFBCC;
    53     border: 1px solid #E6DB55;
    54     padding: 4px;
    55     margin-bottom: 20px;
    56 }
    57 
    58 /* theme page (topic) */
    59 .block-content img.screenshot {
    60     border: 1px solid #cccccc;
    61     float: right;
    62     margin-left: 10px;
    63     margin-bottom: 10px;
    64     padding: 5px;
    65 }
    66 #plugin-tags,
    67 #theme-languages {
    68     padding-top: 5px;
    69     clear: both;
    70 }
    71 .col-3 p.button.preview-button {
    72     background: #4EAF21;
    73 }
    74 .col-3 p.button.preview-button a:hover {
    75     color: #ACFF90;
    76 }
    77 .col-3 p.button.parent-button {
    78     background: #4E21AF;
    79 }
    80 .col-3 p.button.parent-button a:hover {
    81     color: #AC90FF;
    82 }
    83 
    84 .postform {
    85     clear: both;
    86 }
    87 
    88 .float-it-left {
    89     float: left;
    90     margin-right: 15px;
    91 }
    92 
    93 .filter-tag {
    94     display: block;
    95 }
    96 </style>
    97 
    9836<meta name="generator" content="bbPress 1.1" />
    9937<link rel='stylesheet' id='forum-wp4-css'  href='//s.w.org/style/forum-wp4.css?ver=11' type='text/css' media='' />
    … …  
    10240<link rel='stylesheet' id='forum-ie7-css'  href='//s.w.org/style/forum-ie7.css?ver=7' type='text/css' media='' />
    10341<![endif]-->
    104     <style type="text/css">
    105     #theme-contributors .theme-contributor {
    106         overflow: auto;
    107         margin: 2px 0;
    108     }
    109     #theme-contributors .theme-contributor-info.no-profile {
    110         line-height: 36px;
    111     }
    112     #theme-contributors .theme-contributor-gravatar img {
    113         vertical-align: bottom;
    114         margin-right: 8px;
    115         margin-top: 4px;
    116         border-radius: 3px;
    117     }
    118     #theme-contributors .theme-contributor-profile {
    119         float:left;
    120     }
    121     #theme-contributors .theme-contributor-gravatar {
    122         float:left;
    123     }
    124     #theme-contributors .theme-contributor-info {
    125         margin: 6px 0 0;
    126         line-height: 15px;
    127     }
    128     #theme-contributors .theme-contributor-links {
    129         margin-top: 2px;
    130         font-size: 11px;
    131     }
    132     #theme-contributors {
    133         margin: 6px 0;
    134         padding-bottom: 12px;
    135         position: relative;
    136         overflow: auto;
    137     }
    138     #theme-contributors h4.head {
    139         display: inline-block;
    140         float: left;
    141         margin-top: 4px;
    142         margin-right: 8px;
    143     }
    144     #theme-contributors .theme-authors {
    145         display: inline-block;
    146         float: left;
    147         width: 300px;
    148     }
    149     </style>
    150         <style type="text/css">
    151     div.theme-notice {
    152         border: 1px solid;
    153         padding: 4px 12px;
    154         margin-bottom: 20px;
    155         border-radius: 6px;
    156         overflow: auto;
    157     }
    158     div.theme-notice-approved {
    159         background-color: #DFF2BF;
    160         color: #4F8A10;
    161     }
    162     div.theme-notice-closed, div.theme-notice-disabled, div.theme-notice-rejected {
    163         background-color: #FFBABA;
    164         color: #D8000C;
    165     }
    166     div.theme-notice-open-old {
    167         background-color: #FEEFB3;
    168         color: #9F6000;
    169     }
    170     div.theme-notice-requested {
    171         background-color: #BDE5F8;
    172         color: #00529B;
    173     }
    174     div.theme-notice span:first-child {
    175         padding: 1px 10px 3px;
    176         border-radius: 25px;
    177         color: white;
    178         font-size: 18px;
    179         font-weight: bold;
    180         font-family: Verdana;
    181         float: left;
    182         margin: 0 8px 0 0;
    183     }
    184     div.theme-notice-approved span:first-child {
    185         background-color: #4F8A10;
    186     }
    187     div.theme-notice-closed span:first-child, div.theme-notice-disabled span:first-child, div.theme-notice-rejected span:first-child {
    188         background-color: #D8000C;
    189     }
    190     div.theme-notice-open-old span:first-child {
    191         background-color: #9F6000;
    192     }
    193     div.theme-notice-requested span:first-child {
    194         background-color: #00529B;
    195     }
    196     span.theme-notice-banner-msg {
    197         float: left;
    198         width: 95%;
    199         line-height: 1.3em;
    200         padding-top: 5px;
    201     }
    202 
    203     div.theme-notice-open-old {
    204         padding-top: 8px;
    205         padding-bottom: 8px;
    206     }
    207     div.theme-notice-open-old span.theme-notice-banner-msg {
    208         padding-top: 0;
    209     }
    210     </style>
    211         <style type="text/css">
    212     #pagebody .support-sidebox p {
    213         margin: 0 0 8px 0;
    214     }
    215     #theme-submit-support {
    216         text-align: center;
    217     }
    218     #theme-submit-support a {
    219         display: block;
    220         margin: 4px auto 2px;
    221         padding: 3px 6px;
    222         border-radius: 6px;
    223         border: 1px solid #000;
    224         background-color: #439e47;
    225         width: 60%;
    226         color: #fff;
    227     }
    228     #theme-submit-support a:hover {
    229         background-color: #218834;
    230     }
    231     div.support-sidebox {
    232         margin: 6px 0;
    233         padding-bottom: 12px;
    234     }
    235     div.support-sidebox h3.head {
    236         padding-left: 0;
    237         margin-bottom: 6px;
    238     }
    239     a.theme-support-link {
    240         display: block;
    241         text-align: center;
    242     }
    243     </style>
    24442    <link rel='stylesheet' href='https://wordpress.org/extend/themes-plugins/bb-ratings/bb-ratings.css?4' type='text/css' />
    24543<link rel="alternate" type="application/rss+xml" title="Free WordPress Themes &raquo; Recent Posts" href="https://wordpress.org/themes/rss/" />

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

    r1006 r1021  
    1212 */
    1313
    14 $template_part = is_single() ? 'single' : 'index';
    1514include ABSPATH . 'wp-admin/includes/theme.php';
    16 if ( is_single() ) {
    17     $themes = themes_api( 'theme_information', array( 'slug' => get_post()->post_name ) );
    18 } else {
    19     $themes = themes_api( 'query_themes', array(
    20         'per_page' => 15,
    21         'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured',
    22         'fields'   => 'tags',
    23     ) );
    24 }
     15$themes = themes_api( 'query_themes', array(
     16    'per_page' => 15,
     17    'browse'   => get_query_var( 'attachment' ) ? get_query_var( 'attachment' ) : 'featured',
     18    'fields'   => 'tags',
     19) );
    2520
    2621get_header();
    … …  
    3025    <div class="wp-filter">
    3126        <div class="filter-count">
    32             <span class="count theme-count"></span>
     27            <span class="count theme-count"><?php echo count( $themes->themes ); ?></span>
    3328        </div>
    3429
    … …  
    7671                if ( ! is_wp_error( $themes ) ) :
    7772                    foreach ( $themes->themes as $theme ) :
    78                         get_template_part( 'content', $template_part );
     73                        get_template_part( 'content', 'index' );
    7974                    endforeach;
    8075                endif;

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

    r1009 r1021  
    3535
    3636        render: function() {
    37             var data = this.model.toJSON();
     37            var data = this.model.toJSON(),
     38                updated = new Date(data.last_updated);
     39
     40            // 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();
     42
    3843            this.$el.html( this.html( data ) );
    3944            // Renders active theme styles
    … …  
    248253        },
    249254
    250         themePath: 'themes/',
     255        themePath: '',
    251256        browsePath: 'browse/',
    252257        searchPath: 'search.php?q='

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

    r1009 r1021  
    1616body.modal-open {
    1717    overflow: hidden;
     18}
     19
     20p {
     21    margin-bottom: 1.5em;
    1822}
    1923
    … …  
    6973}
    7074
    71 .theme-overlay .theme-about > div {
     75.theme-wrap .theme-about > div:not(.notice) {
    7276    margin-bottom: 75px;
    7377}
    7478
    75 .theme-overlay .theme-info {
     79.theme-wrap .theme-info {
    7680    float: right;
    77 }
    78 .theme-overlay .theme-name {
    79     display: inline-block;
    80 }
    81 
    82 .theme-overlay .theme-screenshots {
     81    width: 40%;
     82}
     83.theme-wrap .theme-name {
     84    display: inline-block;
     85}
     86
     87.theme-wrap .theme-screenshots {
    8388    float: none;
    8489}
    8590
    86 .theme-overlay .theme-downloads,
    87 .theme-overlay .theme-devs {
     91.theme-wrap .theme-downloads {
    8892    width: 55%;
    8993}
    90 
    91 .theme-overlay .theme-devs {
     94.theme-wrap .theme-devs,
     95.theme-wrap .theme-ratings {
     96    display: inline-block;
     97    vertical-align: top;
     98    width: 26%;
     99}
     100
     101.theme-wrap .theme-devs {
    92102    font-size: 1.4em;
    93103}
    94104
    95 .theme-overlay .theme-devs h5 {
     105.theme-wrap .theme-ratings {
     106    margin-right: 3%;
     107}
     108
     109.theme-wrap .theme-devs h5 {
    96110    margin: 1em 0 0 0;
    97111}
    98 .theme-overlay .theme-devs li {
     112.theme-wrap .theme-devs li {
    99113    line-height: 1.5;
    100114}
    … …  
    109123}
    110124
     125.theme-version abbr {
     126    border-bottom: 1px dotted #666;
     127    cursor: help;
     128}
     129
     130/* Single View */
     131.single .theme-wrap {
     132    background: #fff;
     133    box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1);
     134    margin: 3% 0;
     135    overflow: hidden;
     136    padding: 2% 4%;
     137}
     138
     139
     140/**
     141 * Theme heading information
     142 */
     143.single .theme-wrap .current-label {
     144    background: #333;
     145    color: #fff;
     146    font-size: 11px;
     147    display: inline-block;
     148    padding: 2px 8px;
     149    -webkit-border-radius: 2px;
     150    border-radius: 2px;
     151    margin: 0 0 -10px;
     152    -webkit-user-select: none;
     153    -moz-user-select: none;
     154    -ms-user-select: none;
     155    user-select: none;
     156}
     157
     158.single .theme-wrap .theme-name {
     159    color: #222;
     160    font-size: 32px;
     161    font-weight: 100;
     162    margin: 10px 0 0;
     163    line-height: 1.3;
     164}
     165
     166.single .theme-wrap .theme-version {
     167    color: #999;
     168    font-size: 13px;
     169    font-weight: 400;
     170    float: none;
     171    display: inline-block;
     172    margin-left: 10px;
     173    -webkit-user-select: none;
     174    -moz-user-select: none;
     175    -ms-user-select: none;
     176    user-select: none;
     177}
     178
     179.single .theme-wrap .theme-author {
     180    color: #686868;
     181    font-size: 16px;
     182    font-weight: 400;
     183    margin: 15px 0 25px;
     184}
     185
     186.single .theme-wrap .theme-author a {
     187    text-decoration: none;
     188}
     189
     190.single .theme-wrap .theme-description {
     191    color: #555;
     192    font-size: 15px;
     193    font-weight: 400;
     194    line-height: 1.5;
     195    margin: 30px 0 0 0;
     196}
     197
     198.single .theme-wrap .theme-tags {
     199    border-top: 3px solid #eee;
     200    color: #888;
     201    font-size: 13px;
     202    font-weight: 400;
     203    margin: 30px 0 0 0;
     204    padding-top: 20px;
     205}
     206
     207.single .theme-wrap .theme-tags span {
     208    color: #444;
     209    font-weight: bold;
     210    margin-right: 5px;
     211}
     212
     213.single .theme-wrap .theme-screenshots {
     214    margin: 0 30px 0 0;
     215    width: 55%;
     216    max-width: 880px;
     217    text-align: center;
     218}
     219.single .theme-wrap .screenshot {
     220    border: 1px solid #fff;
     221    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
     222    box-sizing: border-box;
     223    overflow: hidden;
     224    position: relative;
     225}
     226
     227.single .theme-wrap .screenshot img {
     228    height: auto;
     229    vertical-align: middle;
     230    width: 100%;
     231}
     232
     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
     242.ie8 .single .theme-wrap .theme-actions {
     243    border: 1px solid #eee;
     244}
     245
     246.single .theme-wrap .theme-actions a {
     247    margin-right: 5px;
     248    margin-bottom: 5px;
     249}
     250
     251/* Spinner */
    111252.spinner {
    112253    background: url(/wp-admin/images/spinner.gif) no-repeat;
    … …  
    231372.wp-filter .search-form {
    232373    float: right;
    233     margin-top: 9px;
     374    margin: 12px 0;
    234375}
    235376
    … …  
    510651    text-decoration: none;
    511652}
     653
     654/* Theme notices */
     655.notice {
     656    background: #fff;
     657    border: 1px solid #fff;
     658    border-left-width: 5px;
     659    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
     660    font-size: 13px;
     661    margin: 5px 15px 2px;
     662    padding: 1px 12px;
     663}
     664
     665.notice p {
     666    margin: 0.5em 0;
     667    padding: 2px;
     668}
     669
     670.notice-success {
     671    border-color: #7ad03a;
     672}
     673
     674.notice-warning {
     675    border-color: #ffba00;
     676}
     677
     678.notice-error {
     679    border-color: #dd3d36;
     680}
     681
     682.notice-info {
     683    background: #f7fcfe;
     684    border-color: #2ea2cc;
     685}
     686
     687.wrap .notice {
     688    margin: 5px 0 15px;
     689}

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

    r1009 r1021  
    88        </div>
    99        <div class="theme-about">
     10            <# if ( data.is_outdated ) { #>
     11            <div class="theme-notice notice notice-warning">
     12                <p><?php _e( 'This theme <strong>hasn&#146;t been updated in over 2 years</strong>. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.', 'wporg-themes' ); ?></p>
     13            </div><!-- .theme-notice -->
     14            <# } #>
     15
    1016            <div class="theme-info hentry">
    1117                <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
    12                 <span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span>
     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>
    1321                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<span class="author">{{{ data.author }}}</span>' ); ?></h4>
    1422
    1523                <p class="theme-description entry-summary">{{{ data.description }}}</p>
    1624
    17                 <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
    18                     <span class="one"></span>
    19                     <span class="two"></span>
    20                     <span class="three"></span>
    21                     <span class="four"></span>
    22                     <span class="five"></span>
    23 
    24                     <p class="votes"><?php printf( __( 'Based on %s ratings.' ), '{{{ data.num_ratings }}}' ); ?></p>
    25                 </div>
    26 
    27                 <div class="theme-stats">
    28                     <div><strong><?php _e( 'Last updated:' ); ?></strong> <span class="updated">{{ data.last_updated }}</span></div>
    29                     <div><strong><?php _e( 'Downloads:' ); ?></strong> {{ data.downloaded }}</div>
    30                     <div><a href="{{ data.homepage }}"><?php _e( 'Theme Homepage &raquo;' ); ?></a></div>
    31                 </div>
     25                <# if ( data.parent ) { #>
     26                    <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
     27                <# } #>
    3228
    3329                <# if ( data.tags ) { #>
    … …  
    4945            </div><!-- .theme-screenshot -->
    5046
    51             <div class="theme-downloads">
    52                 <h4><?php _e( 'Downloads Per Day' ); ?></h4>
    53                 <div id="theme-download-stats-{{data.id}}" class="chart"></div>
    54             </div>
     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 -->
    5576
    5677            <div class="theme-devs">
    … …  
    6889                <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
    6990                <ul class="unmarked-list">
    70                     <li><a href='//themes.trac.wordpress.org/log/{{data.id}}/' rel='nofollow'><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
    71                     <li><a href='//themes.svn.wordpress.org/{{data.id}}/' rel='nofollow'><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
    72                     <li><a href='//themes.trac.wordpress.org/browser/{{data.id}}/' rel='nofollow'><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     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>
    7394                </ul>
    74             </div>
     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 -->
    75101        </div>
    76102
Note: See TracChangeset for help on using the changeset viewer.