WordPress.org

Making WordPress.org


Ignore:
Timestamp:
02/12/2015 07:56:30 PM (7 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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.