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.