Making WordPress.org


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