WordPress.org
Get WordPress

Making WordPress.org

Changeset 3423


Ignore:
Timestamp:
06/18/2016 04:35:50 AM (8 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.