WordPress.org
Get WordPress

Making WordPress.org

Changeset 1255


Ignore:
Timestamp:
02/12/2015 07:56:30 PM (10 years ago)
Author:
obenland
Message:

WP.org Themes: First pass at revised modal styles.

Props melchoyce.

See ​http://make.wordpress.org/meta/2015/01/23/theme-directory-mockups/
Fixes missing forum link for #852,
Fixes #847.

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

Legend:

Unmodified
Added
Removed

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

    r1254 r1255  
    44?>
    55<div class="theme-wrap">
    6     <div class="theme-about">
     6    <div class="theme-about hentry">
    77
    88        <?php if ( strtotime( '-2 years' ) > strtotime( $theme->last_updated ) ) : ?>
    9             <div class="theme-notice notice notice-warning">
    10                 <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>
    11             </div><!-- .theme-info -->
     9        <div class="theme-notice notice notice-warning">
     10            <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>
     11        </div><!-- .theme-info -->
    1212        <?php endif; ?>
    1313
    14         <div class="theme-screenshots">
    15             <div class="screenshot"><?php echo esc_url( $theme->screenshot_url . '?w=732&strip=all' ); ?></div>
     14        <div class="theme-head">
     15            <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
     16            <h4 class="theme-author"><?php printf( __( 'By %s' ), sprintf( '<a href="https://profiles.wordpress.org/%s"><span class="author">%s</span><a/>', $theme->author ) ); ?></h4>
    1617
    1718            <div class="theme-actions">
    … …  
    1920                <a href="<?php echo esc_url( $theme->preview_url ); ?>" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
    2021            </div>
    21         </div><!-- .theme-screenshots -->
     22
     23            <?php if ( ! empty( $theme->parent ) ) : ?>
     24            <div class="theme-notice notice notice-info">
     25                <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>
     26            </div>
     27            <?php endif; ?>
     28        </div><!-- .theme-head -->
    2229
    2330        <div class="theme-info">
    24             <div class="hentry">
    25                 <h3 class="theme-name entry-title"><?php the_title(); ?></h3>
    26                 <h4 class="theme-author"><?php printf( __( 'By %s' ), sprintf( '<a href="https://profiles.wordpress.org/%s"><span class="author">%s</span><a/>', $theme->author ) ); ?></h4>
     31            <div class="screenshot"><?php echo esc_url( $theme->screenshot_url . '?w=732&strip=all' ); ?></div>
    2732
    28                 <div class="theme-description entry-summary"><?php the_content(); ?></div>
     33            <div class="theme-description entry-summary"><?php the_content(); ?></div>
    2934
    30                 <?php if ( ! empty( $theme->parent ) ) : ?>
    31                 <div class="theme-notice notice notice-info">
    32                     <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>
    33                 </div>
    34                 <?php endif; ?>
    35             </div><!-- .theme-info -->
    36 
    37             <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    38                 <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
    39                 <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
    40                 <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
    41 
    42                 <div class="star-holder">
    43                     <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
    44                         <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
    45                     </div>
    46                 </div>
    47                 <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></span>
    48 
     35            <div class="theme-tags">
     36                <h4><?php _e( 'Tags:' ); ?></h4>
    4937                <?php
    50                     if ( ! empty( $theme->ratings ) && ! empty( $theme->num_ratings ) ) :
    51                         foreach ( $theme->ratings as $key => $rate_count ) :
     38                foreach( $theme->tags as &$tag ) :
     39                    $tag = sprintf( '<a href="%1$s">%2$s</a>', esc_url( home_url( "/tag/{$tag}/" ) ), $tag );
     40                endforeach;
     41                echo implode( ', ', $theme->tags );
    5242                ?>
    53                 <div class="counter-container">
    54                     <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 ); ?>">
    55                         <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
    56                         <span class="counter-back">
    57                             <span class="counter-bar" style="width: <?php echo 92 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
    58                         </span>
    59                         <span class="counter-count"><?php echo $rate_count; ?></span>
    60                     </a>
    61                 </div>
    62                 <?php
    63                         endforeach;
    64                     endif;
    65                 ?>
    66             </div><!-- .theme-rating -->
    67 
    68             <div class="theme-devs">
    69                 <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
    70                 <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
    71                 <ul class="unmarked-list">
    72                     <li>
    73                         <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
    74                             <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;"/>
    75                             <?php _e( 'Development Log', 'wporg' ); ?>
    76                         </a>
    77                     </li>
    78                 </ul>
    79 
    80                 <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
    81                 <ul class="unmarked-list">
    82                     <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
    83                     <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
    84                     <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>
    85                 </ul>
    86             </div><!-- .theme-devs -->
     43            </div><!-- .theme-tags -->
    8744
    8845            <div class="theme-downloads">
    … …  
    14299                <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>' . number_format_i18n( $theme->downloaded ) . '</strong>' ); ?></p>
    143100            </div><!-- .theme-downloads -->
     101        </div><!-- .theme-info -->
    144102
    145             <div class="theme-tags">
    146                 <h4><?php _e( 'Tags:' ); ?></h4>
    147                 <?php
    148                     foreach( $theme->tags as &$tag ) :
    149                         $tag = sprintf( '<a href="%1$s">%2$s</a>', esc_url( home_url( "/tag/{$tag}/" ) ), $tag );
    150                     endforeach;
    151                     echo implode( ', ', $theme->tags );
    152                 ?>
    153             </div><!-- .theme-tags -->
    154         </div>
     103        <div class="theme-meta">
     104            <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
     105                <meta itemprop="ratingValue" content="<?php echo esc_attr( number_format_i18n( $theme->rating / 20, 1 ) ); ?>"/>
     106                <meta itemprop="ratingCount" content="<?php echo esc_attr( $theme->num_ratings ); ?>"/>
     107                <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     108
     109                <div class="rating">
     110                    <div class="star-holder">
     111                        <div class="star-rating" style="width: <?php echo esc_attr( number_format_i18n( $theme->rating, 1 ) ); ?>%">
     112                            <?php printf( __( '%d stars', 'wporg-themes' ), number_format_i18n( $theme->rating / 20 ) ); ?>
     113                        </div>
     114                    </div>
     115                    <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), number_format_i18n( $theme->rating / 20, 1 ) ); ?></p>
     116                </div>
     117
     118                <?php if ( ! empty( $theme->ratings ) && ! empty( $theme->num_ratings ) ) : ?>
     119                <ul>
     120                    <?php foreach ( $theme->ratings as $key => $rate_count ) : ?>
     121                    <li class="counter-container">
     122                        <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 ); ?>">
     123                            <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), $key ); ?></span>
     124                            <span class="counter-back">
     125                                <span class="counter-bar" style="width: <?php echo 100 * ( $rate_count / $theme->num_ratings ); ?>px;"></span>
     126                            </span>
     127                            <span class="counter-count"><?php echo $rate_count; ?></span>
     128                        </a>
     129                    </li>
     130                    <?php endforeach; ?>
     131                </ul>
     132                <?php endif; ?>
     133            </div><!-- .theme-rating -->
     134
     135            <div class="theme-devs">
     136                <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
     137                <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     138                <ul class="unmarked-list">
     139                    <li>
     140                        <a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>?limit=100&mode=stop_on_copy&format=rss">
     141                            <img src="//s.w.org/style/images/feedicon.png" />
     142                            <?php _e( 'Development Log', 'wporg' ); ?>
     143                        </a>
     144                    </li>
     145                </ul>
     146
     147                <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     148                <ul class="unmarked-list">
     149                    <li><a href="//themes.trac.wordpress.org/log/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     150                    <li><a href="//themes.svn.wordpress.org/<?php echo esc_attr( $theme->slug ); ?>/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     151                    <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>
     152                </ul>
     153            </div><!-- .theme-devs -->
     154        </div><!-- .theme-meta -->
    155155    </div>
    156156</div>

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

    r1254 r1255  
    9191.theme-overlay .theme-wrap {
    9292    left: 30px;
     93    margin: 0 auto;
     94    max-width: 1290px;
    9395    -webkit-overflow-scrolling: touch;
    9496    overflow-y: scroll;
    … …  
    137139}
    138140
    139 .theme-wrap .theme-info > div {
    140     margin-bottom: 75px;
    141 }
    142 
    143 .theme-wrap .theme-info {
     141.theme-wrap .theme-about .theme-info {
     142    float: left;
     143    width: calc(70% - 30px);
     144}
     145
     146.theme-wrap .theme-about .theme-head,
     147.theme-wrap .theme-about .theme-meta {
    144148    float: right;
    145     width: 40%;
    146 }
     149    width: calc(32% - 30px);
     150}
     151
     152.theme-wrap .theme-about .theme-head,
     153.theme-wrap .theme-about .theme-info > div:not(:last-of-type),
     154.theme-wrap .theme-about .theme-meta > div:not(:last-of-type) {
     155    margin-bottom: 50px;
     156}
     157
    147158.theme-wrap .theme-name {
    148159    display: inline-block;
    149 }
    150 
    151 .theme-wrap .theme-screenshots {
    152     float: left;
    153     margin-bottom: 75px;
    154     max-width: 880px;
    155     text-align: center;
    156     width: 55%;
    157 }
    158 
    159 .theme-wrap .screenshot {
    160     overflow: initial;
    161160}
    162161
    … …  
    164163    background: none;
    165164    border: none;
    166     padding: 10px 25px 5px;
     165    padding: 0;
    167166    position: relative;
    168167    text-align: center;
    … …  
    170169}
    171170
     171.theme-wrap .theme-actions a {
     172    height: 36px;
     173    padding: 4px 10px;
     174    width: 45%;
     175}
     176
     177.theme-overlay .theme-description,
     178.theme-overlay .theme-tags {
     179    margin: 0;
     180    padding: 0;
     181}
     182
    172183.theme-wrap .theme-devs,
    173 .theme-wrap .theme-ratings {
    174     display: inline-block;
    175     vertical-align: top;
    176     width: 46%;
    177 }
    178 
    179 .theme-wrap .theme-devs {
     184.theme-wrap .theme-support {
    180185    font-size: 1.4em;
    181186}
    … …  
    187192    line-height: 1.5;
    188193}
    189 
    190 .theme-wrap .theme-ratings {
    191     margin-right: 7%;
     194.theme-wrap .theme-ratings .rating {
     195    margin: 0 0 1.5em;
     196}
     197.theme-wrap .theme-ratings .star-holder,
     198.theme-wrap .theme-ratings .description {
     199    display: inline-block;
     200}
     201.theme-wrap .theme-ratings .description {
     202    color: #aa9;
     203    font-style: italic;
     204    margin: 0 5px;
     205    vertical-align: text-bottom;
     206}
     207.theme-wrap .theme-ratings ul {
     208    list-style-type: none;
     209    margin: 0;
     210    padding: 0;
    192211}
    193212.theme-wrap .theme-ratings .counter-container,
    194213.theme-wrap .theme-ratings .counter-container a {
    195214    display: inline-block;
     215    width: 100%;
    196216}
    197217.theme-wrap .theme-ratings .counter-label,
    … …  
    210230.theme-wrap .theme-ratings .counter-back {
    211231    background-color: #ececec;
    212     width: 92px;
     232    width: 70%;
     233    width: -webkit-calc(100% - 60px);
     234    width: calc(100% - 60px);
    213235}
    214236.theme-wrap .theme-ratings .counter-bar {
    … …  
    216238}
    217239.theme-wrap .theme-ratings .counter-count {
    218     float: right;
     240    float: left;
    219241    margin-left: 5px;
    220242}
    … …  
    884906
    885907@media only screen and (max-width: 960px) {
     908
     909}
     910
     911@media only screen and (max-width: 782px) {
     912    .theme-overlay .theme-wrap {
     913        bottom: 3%;
     914        left: 10px;
     915        right: 10px;
     916    }
     917
     918    .wp-filter .search-form {
     919        float: none;
     920        margin: 20px 0;
     921        width: 100%;
     922    }
     923
     924    .theme-wrap .theme-about .theme-head,
     925    .theme-wrap .theme-about .theme-info,
     926    .theme-wrap .theme-about .theme-meta {
     927        float: none;
     928        width: auto;
     929    }
     930
     931    .theme-wrap .theme-about .theme-info {
     932        margin-bottom: 50px;
     933    }
     934
     935    .theme-wrap .theme-actions {
     936        padding: 10px 0 5px;
     937    }
     938
     939    .theme-wrap .theme-actions .button-primary {
     940        display: none;
     941    }
     942
     943    .theme-wrap .theme-actions .button-secondary {
     944        font-size: 18px;
     945        height: auto;
     946        padding: 0.5em 0;
     947        width: 100%;
     948    }
     949
     950    .theme-wrap .theme-ratings,
     951    .theme-wrap .theme-devs {
     952        display: inline-block;
     953        width: 47%;
     954        vertical-align: top;
     955    }
     956
     957    .theme-wrap .theme-devs {
     958        margin-left: 5%;
     959    }
     960
     961    .theme-install-overlay .wp-full-overlay-header .theme-install {
     962        line-height: 26px;
     963        margin-top: 8px;
     964    }
     965}
     966
     967@media only screen and (max-width: 480px) {
     968    /* Align login info with site title. */
     969    #headline .login {
     970        float: left;
     971        margin-left: 10px;
     972    }
     973
     974    /* Hide Feature Filter on mobile. */
     975    .wp-filter .drawer-toggle {
     976        display: none;
     977    }
     978
     979    /* Full width search form. */
     980    .wp-filter .search-form,
     981    .wp-filter .wp-filter-search {
     982        width: 100%;
     983    }
     984
     985    .admin-bar .theme-overlay .theme-wrap {
     986        top: 3%;
     987    }
     988
     989    .theme-browser .themes .theme {
     990        margin-right: 0;
     991    }
     992
     993    .theme-wrap .theme-about .theme-head,
     994    .theme-wrap .theme-about .theme-info,
     995    .theme-wrap .theme-about .theme-info > div:not(:last-of-type),
     996    .theme-wrap .theme-about .theme-meta > div:not(:last-of-type) {
     997        margin-bottom: 30px;
     998    }
     999
    8861000    /* Keep ratings and dev links stacked until they have enough room. */
    8871001    .theme-wrap .theme-devs,
    … …  
    8911005    }
    8921006}
    893 
    894 @media only screen and (max-width: 782px) {
    895     .theme-overlay .theme-wrap {
    896         bottom: 3%;
    897         left: 10px;
    898         right: 10px;
    899     }
    900 
    901     .wp-filter .search-form {
    902         float: none;
    903         margin: 20px 0;
    904         width: 100%;
    905     }
    906 
    907     .theme-wrap .theme-screenshots {
    908         float: none;
    909         width: 100%;
    910     }
    911 
    912     .theme-wrap .theme-actions {
    913         padding: 10px 0 5px;
    914     }
    915 
    916     .theme-wrap .theme-actions .button-primary {
    917         display: none;
    918     }
    919 
    920     .theme-wrap .theme-actions .button-secondary {
    921         font-size: 18px;
    922         height: auto;
    923         padding: 0.5em 0;
    924         width: 100%;
    925     }
    926 
    927     .theme-wrap .theme-info {
    928         float: none;
    929         width: auto;
    930     }
    931 
    932     .theme-install-overlay .wp-full-overlay-header .theme-install {
    933         line-height: 26px;
    934         margin-top: 8px;
    935     }
    936 }
    937 
    938 @media only screen and (max-width: 480px) {
    939     /* Align login info with site title. */
    940     #headline .login {
    941         float: left;
    942         margin-left: 10px;
    943     }
    944 
    945     /* Hide Feature Filter on mobile. */
    946     .wp-filter .drawer-toggle {
    947         display: none;
    948     }
    949 
    950     /* Full width search form. */
    951     .wp-filter .search-form,
    952     .wp-filter .wp-filter-search {
    953         width: 100%;
    954     }
    955 
    956     .admin-bar .theme-overlay .theme-wrap {
    957         top: 3%;
    958     }
    959 
    960     .theme-browser .themes .theme {
    961         margin-right: 0;
    962     }
    963 
    964     .theme-wrap .theme-screenshots,
    965     .theme-wrap .theme-info > div {
    966         margin-bottom: 30px;
    967     }
    968 }

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

    r1254 r1255  
    77            <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
    88        </div>
    9         <div class="theme-about">
     9
     10        <div class="theme-about hentry">
    1011            <# if ( data.is_outdated ) { #>
    1112            <div class="theme-notice notice notice-warning">
    … …  
    1415            <# } #>
    1516
    16                 <div class="theme-screenshots">
    17                     <# if ( data.screenshot_url ) { #>
    18                         <div class="screenshot"><img src="{{ data.screenshot_url }}?w=732&strip=all" alt=""/></div>
    19                     <# } else { #>
    20                         <div class="screenshot blank"></div>
    21                     <# } #>
     17            <div class="theme-head">
     18                <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
     19                <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="https://profiles.wordpress.org/{{ data.author }}"><span class="author">{{{ data.author }}}</span></a>' ); ?></h4>
    2220
     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>
     24                </div>
    2325
    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 -->
     26                <# if ( data.parent ) { #>
     27                <div class="theme-notice notice notice-info">
     28                    <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>
     29                </div>
     30                <# } #>
     31            </div><!-- .theme-head -->
    2932
    30                 <div class="theme-info">
    31                 <div class="theme hentry">
    32                     <h3 class="theme-name entry-title">{{{ data.name }}}</h3>
    33                     <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="https://profiles.wordpress.org/{{ data.author }}"><span class="author">{{{ data.author }}}</span></a>' ); ?></h4>
     33            <div class="theme-info">
     34                <# if ( data.screenshot_url ) { #>
     35                <div class="screenshot"><img src="{{ data.screenshot_url }}?w=798&strip=all" alt=""/></div>
     36                <# } else { #>
     37                <div class="screenshot blank"></div>
     38                <# } #>
    3439
    35                     <p class="theme-description entry-summary">{{{ data.description }}}</p>
     40                <div class="theme-description entry-summary"><p>{{{ data.description }}}</p></div>
    3641
    37                     <# if ( data.parent ) { #>
    38                     <div class="theme-notice notice notice-info">
    39                         <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>
    40                     </div>
    41                     <# } #>
    42                 </div><!-- .theme-info -->
    43 
    44                 <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    45                     <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
    46                     <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
    47                     <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
    48                     <div class="star-holder">
    49                         <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
    50                     </div>
    51                     <span><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></span>
    52 
    53                     <# if ( data.ratings ) { #>
    54                         <div class="counter-container">
    55                             <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 ); ?>">
    56                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 5 ); ?></span>
    57                                 <span class="counter-back">
    58                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[5] / data.num_ratings }}px;"></span>
    59                                 </span>
    60                                 <span class="counter-count">{{ data.ratings[5] }}</span>
    61                             </a>
    62                         </div>
    63                         <div class="counter-container">
    64                             <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 ); ?>">
    65                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 4 ); ?></span>
    66                                 <span class="counter-back">
    67                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[4] / data.num_ratings }}px;"></span>
    68                                 </span>
    69                                 <span class="counter-count">{{ data.ratings[4] }}</span>
    70                             </a>
    71                         </div>
    72                         <div class="counter-container">
    73                             <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 ); ?>">
    74                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 3 ); ?></span>
    75                                 <span class="counter-back">
    76                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[3] / data.num_ratings }}px;"></span>
    77                                 </span>
    78                             </a>
    79                             <span class="counter-count">{{ data.ratings[3] }}</span>
    80                         </div>
    81                         <div class="counter-container">
    82                             <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 ); ?>">
    83                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 2 ); ?></span>
    84                                 <span class="counter-back">
    85                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[2] / data.num_ratings }}px;"></span>
    86                                 </span>
    87                                 <span class="counter-count">{{ data.ratings[2] }}</span>
    88                             </a>
    89                         </div>
    90                         <div class="counter-container">
    91                             <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 ); ?>">
    92                                 <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 1 ); ?></span>
    93                                 <span class="counter-back">
    94                                     <span class="counter-bar" style="width: {{ 92 * data.ratings[1] / data.num_ratings }}px;"></span>
    95                                 </span>
    96                                 <span class="counter-count">{{ data.ratings[1] }}</span>
    97                             </a>
    98                         </div>
    99                     <# } #>
    100                 </div><!-- .theme-rating -->
    101 
    102                     <div class="theme-devs">
    103                         <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
    104                         <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
    105                         <ul class="unmarked-list">
    106                             <li>
    107                                 <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
    108                                     <img src="//s.w.org/style/images/feedicon.png" style="vertical-align:text-top;" />
    109                                     <?php _e( 'Development Log', 'wporg' ); ?>
    110                                 </a>
    111                             </li>
    112                         </ul>
    113 
    114                         <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
    115                         <ul class="unmarked-list">
    116                             <li><a href="//themes.trac.wordpress.org/log/{{data.id}}/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
    117                             <li><a href="//themes.svn.wordpress.org/{{data.id}}/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
    118                             <li><a href="//themes.trac.wordpress.org/browser/{{data.id}}/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
    119                         </ul>
    120                     </div><!-- .theme-devs -->
     42                <# if ( data.tags ) { #>
     43                <div class="theme-tags">
     44                    <h4><?php _e( 'Tags:' ); ?></h4>
     45                    {{{ data.tags }}}
     46                </div><!-- .theme-tags -->
     47                <# } #>
    12148
    12249                <div class="theme-downloads">
    … …  
    12552                    <p class="total-downloads"><?php printf( __( 'Total downloads: %s' ), '<strong>{{ new Number(data.downloaded).toLocaleString() }}</strong>' ); ?></p>
    12653                </div><!-- .theme-downloads -->
     54            </div>
    12755
    128                 <# if ( data.tags ) { #>
    129                     <div class="theme-tags">
    130                         <h4><?php _e( 'Tags:' ); ?></h4>
    131                         {{{ data.tags }}}
    132                     </div><!-- .theme-tags -->
    133                 <# } #>
     56            <div class="theme-meta">
     57                <div class="theme-ratings" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
     58                    <meta itemprop="ratingValue" content="{{ (data.rating/20).toFixed(1) }}"/>
     59                    <meta itemprop="ratingCount" content="{{ data.num_ratings }}"/>
     60                    <h4><?php _e( 'Ratings', 'wporg-themes' ); ?></h4>
     61                    <div class="rating">
     62                        <div class="star-holder">
     63                            <div class="star-rating" style="width: {{ (data.rating).toFixed(1) }}%"><?php printf( __( '%d stars', 'wporg-themes' ), '{{ Math.round( data.rating ) }}' ); ?></div>
     64                        </div>
     65                        <p class="description"><?php printf( __( '%s out of 5 stars.', 'wporg-themes' ), '{{ (data.rating/20).toFixed(1) }}' ); ?></p>
     66                    </div>
     67
     68                    <# if ( data.ratings ) { #>
     69                    <ul>
     70                        <li class="counter-container">
     71                            <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 ); ?>">
     72                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 5 ); ?></span>
     73                                <span class="counter-back">
     74                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[5] / data.num_ratings }}%;"></span>
     75                                </span>
     76                                <span class="counter-count">{{ data.ratings[5] }}</span>
     77                            </a>
     78                        </li>
     79                        <li class="counter-container">
     80                            <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 ); ?>">
     81                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 4 ); ?></span>
     82                                <span class="counter-back">
     83                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[4] / data.num_ratings }}%;"></span>
     84                                </span>
     85                                <span class="counter-count">{{ data.ratings[4] }}</span>
     86                            </a>
     87                        </li>
     88                        <li class="counter-container">
     89                            <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 ); ?>">
     90                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 3 ); ?></span>
     91                                <span class="counter-back">
     92                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[3] / data.num_ratings }}%;"></span>
     93                                </span>
     94                                <span class="counter-count">{{ data.ratings[3] }}</span>
     95                            </a>
     96                        </li>
     97                        <li class="counter-container">
     98                            <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 ); ?>">
     99                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 2 ); ?></span>
     100                                <span class="counter-back">
     101                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[2] / data.num_ratings }}%;"></span>
     102                                </span>
     103                                <span class="counter-count">{{ data.ratings[2] }}</span>
     104                            </a>
     105                        </li>
     106                        <li class="counter-container">
     107                            <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 ); ?>">
     108                                <span class="counter-label"><?php printf( __( '%d stars', 'wporg-themes' ), 1 ); ?></span>
     109                                <span class="counter-back">
     110                                    <span class="counter-bar" style="width: {{ 100 * data.ratings[1] / data.num_ratings }}%;"></span>
     111                                </span>
     112                                <span class="counter-count">{{ data.ratings[1] }}</span>
     113                            </a>
     114                        </li>
     115                    </ul>
     116                    <# } #>
     117                </div><!-- .theme-rating -->
     118
     119                <div class="theme-devs">
     120                    <h4><?php _e( 'Development', 'wporg-themes' ); ?></h4>
     121                    <h5><?php _e( 'Subscribe', 'wporg-themes' ); ?></h5>
     122                    <ul class="unmarked-list">
     123                        <li>
     124                            <a href="//themes.trac.wordpress.org/log/{{data.id}}?limit=100&mode=stop_on_copy&format=rss">
     125                                <img src="//s.w.org/style/images/feedicon.png" />
     126                                <?php _e( 'Development Log', 'wporg' ); ?>
     127                            </a>
     128                        </li>
     129                    </ul>
     130
     131                    <h5><?php _e( 'Browse the Code', 'wporg-themes' ); ?></h5>
     132                    <ul class="unmarked-list">
     133                        <li><a href="//themes.trac.wordpress.org/log/{{data.id}}/" rel="nofollow"><?php _e( 'Development Log', 'wporg-themes' ); ?></a></li>
     134                        <li><a href="//themes.svn.wordpress.org/{{data.id}}/" rel="nofollow"><?php _e( 'Subversion Repository', 'wporg-themes' ); ?></a></li>
     135                        <li><a href="//themes.trac.wordpress.org/browser/{{data.id}}/" rel="nofollow"><?php _e( 'Browse in Trac', 'wporg-themes' ); ?></a></li>
     136                    </ul>
     137                </div><!-- .theme-devs -->
     138
     139                <div class="theme-support">
     140                    <h4><?php _e( 'Support', 'wporg-themes' ); ?></h4>
     141                    <p><?php _e( 'Got something to say? Neeed help?', 'wporg-themes' ); ?></p>
     142                    <a href="//wordpress.org/support/theme/{{ data.slug }}" class="button button-secondary"><?php _e( 'View support forum', 'wporg-themes' ); ?></a>
     143                </div><!-- .theme-support -->
    134144            </div>
    135145        </div>
Note: See TracChangeset for help on using the changeset viewer.