WordPress.org
Get WordPress

Making WordPress.org

Changeset 3423


Ignore:
Timestamp:
06/18/2016 04:35:50 AM (10 years ago)
Author:
obenland
Message:

Plugin Directory: Design updates to closer reflect the details mockup.

  • Version number and top margin for meta widget.
  • "Loading" bar for resolved support threads.
  • Circular avatars.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/widgets/class-meta.php

    r3351 r3423  
    4242
    4343                <ul>
    44                         <li><?php printf( __( 'Last updated: %s ago', 'wporg-plugins' ), '<span itemprop="dateModified" content="' . esc_attr( get_post_modified_time( 'c' ) ) . '">' . human_time_diff( get_post_modified_time() ) . '</span>' ); ?></li>
    45                         <li><?php printf( __( 'Active installs: %s', 'wporg-plugins' ), Template::active_installs( false ) ); ?></li>
    46                         <?php if ( $categories = get_the_term_list( $post->ID, 'plugin_category', '<div class="tags">', '', '</div>' ) ) : ?>
    47                                 <li><?php printf( _n( 'Category: %s', 'Categories: %s', count( get_the_terms( $post, 'plugin_category' ) ), 'wporg-plugins' ), $categories ); ?></li>
    48                         <?php endif; ?>
    4944                        <?php if ( $built_for = get_the_term_list( $post->ID, 'plugin_built_for', '', ', ' ) ) : ?>
    5045                                <li><?php printf( __( 'Designed to work with: %s', 'wporg-plugins' ), $built_for ); ?></li>
    5146                        <?php endif; ?>
    52                         <?php if ( $business_model = get_the_term_list( $post->ID, 'plugin_business_model', '', ', ' ) ) : ?>
    53                                 <li><?php printf( __( 'Business Model: %s', 'wporg-plugins' ), $business_model ); ?></li>
     47                        <li><?php printf( __( 'Version: %s', 'wporg-plugins' ), '<strong>' . get_post_meta( $post->ID, 'version', true ) . '</strong>' ); ?></li>
     48                        <li>
     49                                <?php
     50                                printf( __( 'Last updated: %s', 'wporg-plugins' ),
     51                                        /* Translators: Plugin modified time. */
     52                                        '<strong>' . sprintf( __( '%s ago', 'wporg-plugins' ), '<span itemprop="dateModified" content="' . esc_attr( get_post_modified_time( 'c' ) ) . '">' . human_time_diff( get_post_modified_time() ) . '</span>' ) . '</strong>'
     53                                );
     54                                ?>
     55                        </li>
     56                        <li><?php printf( __( 'Active installs: %s', 'wporg-plugins' ), '<strong>' . Template::active_installs( false ) . '</strong>' ); ?></li>
     57                        <?php if ( $categories = get_the_term_list( $post->ID, 'plugin_category', '<div class="tags">', '', '</div>' ) ) : ?>
     58                                <li><?php printf( _n( 'Category: %s', 'Categories: %s', count( get_the_terms( $post, 'plugin_category' ) ), 'wporg-plugins' ), $categories ); ?></li>
    5459                        <?php endif; ?>
    5560                </ul>

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/widgets/class-support.php

    r3344 r3423  
    99class Support extends \WP_Widget {
    1010
     11        /**
     12         * Support constructor.
     13         */
    1114        public function __construct() {
    1215                parent::__construct( 'plugin_support', __( 'Plugin Support', 'wporg-plugins' ), array(
    … …  
    4649                echo $args['before_title'] . $title . $args['after_title'];
    4750
    48                 if ( $resolutions ) : ?>
    49                 <p>
    50                         <?php
    51                         /* translators: 1: Number of resolved threads; 2: Number of all threads; */
    52                         printf( _n(
    53                                 '%1$s support thread (of %2$s) in the last two months has been marked resolved.',
    54                                 '%1$s support threads (of %2$s) in the last two months have been marked resolved.',
    55                                 $resolved,
    56                                 'wporg-plugins'
    57                         ), $resolved, $threads );
     51                if ( $resolutions ) :
    5852                        ?>
    59                 </p>
     53                        <p class="aside"><?php _e( 'Issues resolved in last two months:', 'wporg-plugins' ); ?></p>
     54                        <p class="counter-container">
     55                                <span class="counter-back">
     56                                        <span class="counter-bar" style="width: <?php echo esc_attr( 100 * $resolved / $threads ); ?>%;"></span>
     57                                </span>
     58                                <span class="counter-count">
     59                                        <?php
     60                                        /* Translators: 1: AMount of resolved threads; 2: Amount of total threads; */
     61                                        printf( __( '%1$s out of %2$s'), $resolved, $threads );
     62                                        ?>
     63                                </span>
     64                        </p>
     65
     66                <?php else: ?>
     67                        <p><?php _e( 'Got something to say? Need help?', 'wporg-plugins' ); ?></p>
    6068                <?php endif; ?>
    6169
    62                 <p><?php _e( 'Got something to say? Need help?', 'wporg-plugins' ); ?></p>
    63                 <p><a class="button" href="<?php echo esc_url( $support_url ); ?>"><?php _e( 'View support forum', 'wporg-plugins' ); ?></a></p>
     70                <p>
     71                        <a class="button" href="<?php echo esc_url( $support_url ); ?>"><?php _e( 'View support forum', 'wporg-plugins' ); ?></a>
     72                </p>
    6473
    6574                <?php

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

    r3419 r3423  
    15291529.plugin-ratings .ratings-list .counter-bar {
    15301530  display: inline-block;
     1531  height: 16px;
    15311532  height: 1rem;
    15321533  vertical-align: middle;
    … …  
    15511552  font-size: 12.8px;
    15521553  font-size: 0.8rem;
     1554}
     1555
     1556.plugin-support .counter-container {
     1557  position: relative;
     1558  margin-bottom: 16px;
     1559  margin-bottom: 1rem;
     1560}
     1561
     1562.plugin-support .counter-back,
     1563.plugin-support .counter-bar {
     1564  display: inline-block;
     1565  height: 30px;
     1566  vertical-align: middle;
     1567}
     1568
     1569.plugin-support .counter-back {
     1570  background-color: #ececec;
     1571  width: 100%;
     1572}
     1573
     1574.plugin-support .counter-bar {
     1575  background-color: #c7e8ca;
     1576  display: block;
     1577}
     1578
     1579.plugin-support .counter-count {
     1580  font-size: 10.24px;
     1581  font-size: 0.64rem;
     1582  position: absolute;
     1583  right: 8px;
     1584  top: 8px;
     1585  width: 100%;
     1586  width: calc(100% - 8px);
     1587}
     1588
     1589@media screen and (min-width: 48em) {
     1590  .plugin-support .counter-count {
     1591    top: 5px;
     1592  }
     1593}
     1594
     1595.plugin-meta {
     1596  margin-top: 32px;
     1597  margin-top: 2rem;
    15531598}
    15541599
    … …  
    15641609  border-top: 1px solid #eee;
    15651610  padding: 0.5rem 0;
     1611}
     1612
     1613.plugin-meta li strong {
     1614  float: left;
    15661615}
    15671616
    … …  
    21602209
    21612210.single .type-plugin .entry-content .plugin-developers .avatar {
     2211  border-radius: 50%;
    21622212  margin-left: 10px;
    21632213  vertical-align: middle;
    2164 }
    2165 
    2166 .single .type-plugin .entry-meta {
    2167   padding: 0 1.5625rem;
    21682214}
    21692215
    … …  
    21712217  .single .type-plugin .entry-meta {
    21722218    float: left;
    2173     padding: 0;
    21742219    width: 30%;
    21752220  }

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

    r3419 r3423  
    15291529.plugin-ratings .ratings-list .counter-bar {
    15301530  display: inline-block;
     1531  height: 16px;
    15311532  height: 1rem;
    15321533  vertical-align: middle;
    … …  
    15511552  font-size: 12.8px;
    15521553  font-size: 0.8rem;
     1554}
     1555
     1556.plugin-support .counter-container {
     1557  position: relative;
     1558  margin-bottom: 16px;
     1559  margin-bottom: 1rem;
     1560}
     1561
     1562.plugin-support .counter-back,
     1563.plugin-support .counter-bar {
     1564  display: inline-block;
     1565  height: 30px;
     1566  vertical-align: middle;
     1567}
     1568
     1569.plugin-support .counter-back {
     1570  background-color: #ececec;
     1571  width: 100%;
     1572}
     1573
     1574.plugin-support .counter-bar {
     1575  background-color: #c7e8ca;
     1576  display: block;
     1577}
     1578
     1579.plugin-support .counter-count {
     1580  font-size: 10.24px;
     1581  font-size: 0.64rem;
     1582  position: absolute;
     1583  left: 8px;
     1584  top: 8px;
     1585  width: 100%;
     1586  width: calc(100% - 8px);
     1587}
     1588
     1589@media screen and (min-width: 48em) {
     1590  .plugin-support .counter-count {
     1591    top: 5px;
     1592  }
     1593}
     1594
     1595.plugin-meta {
     1596  margin-top: 32px;
     1597  margin-top: 2rem;
    15531598}
    15541599
    … …  
    15641609  border-top: 1px solid #eee;
    15651610  padding: 0.5rem 0;
     1611}
     1612
     1613.plugin-meta li strong {
     1614  float: right;
    15661615}
    15671616
    … …  
    21602209
    21612210.single .type-plugin .entry-content .plugin-developers .avatar {
     2211  border-radius: 50%;
    21622212  margin-right: 10px;
    21632213  vertical-align: middle;
    2164 }
    2165 
    2166 .single .type-plugin .entry-meta {
    2167   padding: 0 1.5625rem;
    21682214}
    21692215
    … …  
    21712217  .single .type-plugin .entry-meta {
    21722218    float: right;
    2173     padding: 0;
    21742219    width: 30%;
    21752220  }

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

    r3405 r3423  
    164164
    165165                        .avatar {
     166                                border-radius: 50%;
    166167                                margin-right: 10px;
    167168                                vertical-align: middle;
    … …  
    169170                }
    170171        }
    171 
    172         .entry-meta {
    173                 padding: 0 ms(4);
    174 
    175                 @media screen and ( min-width: $ms-breakpoint ) {
     172        @media screen and ( min-width: $ms-breakpoint ) {
     173                .entry-meta {
    176174                        float: right;
    177                         padding: 0;
    178175                        width: 30%;
    179176                }

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/secondary/_widgets.scss

    r3397 r3423  
    6767                .counter-bar {
    6868                        display: inline-block;
     69                        height: 16px;
    6970                        height: 1rem;
    7071                        vertical-align: middle;
    … …  
    9091.plugin-support {
    9192        @include font-size( ms-unitless( ms(-2) ) );
     93
     94        .counter-container {
     95                position: relative;
     96                margin-bottom: 16px;
     97                margin-bottom: 1rem;
     98        }
     99
     100        .counter-back,
     101        .counter-bar {
     102                display: inline-block;
     103                height: 30px;
     104                vertical-align: middle;
     105        }
     106
     107        .counter-back {
     108                background-color: #ececec;
     109                width: 100%;
     110        }
     111
     112        .counter-bar {
     113                background-color: #c7e8ca;
     114                display: block;
     115        }
     116
     117        .counter-count {
     118                @include font-size( ms-unitless( ms(-4) ) );
     119                position: absolute;
     120                left: 8px;
     121                top: 8px;
     122                width: 100%;
     123                width: calc(100% - 8px);
     124
     125                @media screen and ( min-width: $ms-breakpoint ) {
     126                        top: 5px;
     127                }
     128        }
    92129}
    93130
    94131.plugin-meta {
    95132        @extend .clear;
     133        margin-top: 32px;
     134        margin-top: 2rem;
    96135
    97136        ul {
    … …  
    105144                border-top: 1px solid #eee;
    106145                padding: 0.5rem 0;
     146
     147                strong {
     148                        float: right;
     149                }
    107150        }
    108151
Note: See TracChangeset for help on using the changeset viewer.