WordPress.org
Get WordPress

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