WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
03/17/2015 11:37:22 PM (10 years ago)
Author:
obenland
Message:

WP.org Themes: Design parity between modal and singular theme page.

  • Uses Dashicons to display rating stars.
  • Removes the dependency on admin themes styles.

See #950.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r1383 r1409  
    11<script id="tmpl-theme-single" type="text/template">
    2     <div class="theme-backdrop"></div>
    3     <div class="theme-wrap">
    4         <div class="theme-header">
    5             <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span></button>
     2    <div class="theme-navigation">
     3        <button class="close"><?php _e( 'Return to Themes List', 'wporg-themes' ); ?></button>
     4        <div class="navigation post-navigation">
    65            <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
    76            <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    87        </div>
    9 
     8    </div>
     9    <div class="theme-wrap">
    1010        <div class="theme-about hentry" itemscope itemtype="http://schema.org/CreativeWork">
    1111            <# if ( data.is_outdated ) { #>
    … …  
    1515            <# } #>
    1616
     17            <div>
     18                <h3 class="theme-name entry-title" itemprop="name">{{{ data.name }}}</h3>
     19                <h4 class="theme-author"><?php printf( __( 'by %s' ), '<a href="https://wordpress.org/themes/author/{{ data.author.user_nicename }}/"><span class="author" itemprop="author">{{{ data.author.display_name }}}</span></a>' ); ?></h4>
     20            </div>
     21
    1722            <div class="theme-head">
    18                 <h3 class="theme-name entry-title" itemprop="name">{{{ data.name }}}</h3>
    19                 <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="https://profiles.wordpress.org/{{ data.author.user_nicename }}"><span class="author" itemprop="author">{{{ data.author.display_name }}}</span></a>' ); ?></h4>
    20 
    21                 <div class="theme-actions">
    22                     <a href="{{{ data.preview_url }}}" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    23                     <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary"><?php _e( 'Download' ); ?></a>
     23                <div class="theme-actions clear">
     24                    <a href="{{{ data.preview_url }}}" class="button button-secondary alignleft"><?php _e( 'Preview' ); ?></a>
     25                    <a href="//downloads.wordpress.org/theme/{{ data.slug }}.{{ data.version }}.zip" class="button button-primary alignright"><?php _e( 'Download' ); ?></a>
    2426                </div>
    2527
    … …  
    4042            <div class="theme-info">
    4143                <# if ( data.screenshot_url ) { #>
    42                 <div class="screenshot"><img src="{{ data.screenshot_url }}?w=798&strip=all" alt=""/></div>
     44                <div class="screenshot"><img src="{{ data.screenshot_url }}?w=571&strip=all" alt=""/></div>
    4345                <# } else { #>
    4446                <div class="screenshot blank"></div>
    … …  
    6365            <div class="theme-meta">
    6466                <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    65                     <meta itemprop="itemReviewed" content="{{ data.name }}" />
    66                     <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
    6767                    <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
    6868                    <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     69
     70                    <# if ( data.rating ) { #>
     71                    <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     72                        <span class="one"></span>
     73                        <span class="two"></span>
     74                        <span class="three"></span>
     75                        <span class="four"></span>
     76                        <span class="five"></span>
     77                        <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '<span itemprop="ratingValue">{{ ( data.rating / 20 ).toFixed( 1 ) }}</span>' ); ?></p>
     78                    </div>
     79                    <# } else { #>
    6980                    <div class="rating">
    70                         <div class="star-holder">
    71                             <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
    72                         </div>
    73                         <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></p>
     81                        <div class="ratings"><?php _e( 'This theme has not been rated yet.', 'wporg-themes' ); ?></div>
    7482                    </div>
     83                    <# } #>
    7584
    7685                    <# if ( data.ratings ) { #>
    7786                    <ul>
    7887                        <li class="counter-container">
    79                             <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 ); ?>">
     88                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=5" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 5 ) ); ?>">
    8089                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 5 ); ?></span>
    8190                                <span class="counter-back">
    … …  
    8695                        </li>
    8796                        <li class="counter-container">
    88                             <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 ); ?>">
     97                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=4" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 4 ) ); ?>">
    8998                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 4 ); ?></span>
    9099                                <span class="counter-back">
    … …  
    95104                        </li>
    96105                        <li class="counter-container">
    97                             <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 ); ?>">
     106                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=3" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 3 ) ); ?>">
    98107                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 3 ); ?></span>
    99108                                <span class="counter-back">
    … …  
    104113                        </li>
    105114                        <li class="counter-container">
    106                             <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 ); ?>">
     115                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=2" title="<?php echo esc_attr( sprintf( __( 'Click to see reviews that provided a rating of %d stars', 'wporg-themes' ), 2 ) ); ?>">
    107116                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 2 ); ?></span>
    108117                                <span class="counter-back">
    … …  
    113122                        </li>
    114123                        <li class="counter-container">
    115                             <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 ); ?>">
    116                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 1 ); ?></span>
     124                            <a href="//wordpress.org/support/view/theme-reviews/{{ data.id }}?filter=1" title="<?php esc_attr_e( 'Click to see reviews that provided a rating of 1 star', 'wporg-themes' ); ?>">
     125                                <span class="counter-label"><?php _e( '1 star', 'wporg-themes' ); ?></span>
    117126                                <span class="counter-back">
    118127                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[1] / data.num_ratings }}%;"></span>
Note: See TracChangeset for help on using the changeset viewer.