WordPress.org
Get WordPress

Making WordPress.org

Changeset 7491


Ignore:
Timestamp:
07/24/2018 05:27:23 PM (8 years ago)
Author:
obenland
Message:

DevHub: Add short descriptions to Related section

Props keesiemeijer, kevinwhoffman.
Fixes #1847.

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

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/function-reference.js

    r3788 r7491  
    3333
    3434        function sourceCodeDisplay( element ) {
    35                  
     35
    3636                if ( element !== undefined ) {
    3737                        // Find table inside a specific source code element if passed.
    … …  
    8383
    8484                // We only expect one used_by and uses per document
    85                 $usedByList = $( '.used-by' ).find( 'li' );
    86                 $usesList   = $( '.uses' ).find( 'li' );
     85                $usedByList = $( 'tbody tr', '#used-by-table' );
     86                $usesList   = $( 'tbody tr', '#uses-table' );
    8787
    8888                if ( $usedByList.length > 5 ) {

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/reference/template-related.php

    r5597 r7491  
    1414        $has_used_by = ( post_type_has_usage_info() && ( $used_by = get_used_by() ) && $used_by->have_posts() );
    1515
     16        $uses_to_show    = 5;
     17        $used_by_to_show = 5;
     18
    1619        if ( $has_uses || $has_used_by ) :
    1720        ?>
    … …  
    2326                        <article class="uses">
    2427                                <h3><?php _e( 'Uses', 'wporg' ); ?></h3>
    25                                 <ul>
    26                                         <?php
    27                                         $uses_to_show = 5;
    28                                         while ( $uses->have_posts() ) : $uses->the_post()
    29                                                 ?>
    30                                                 <li>
    31                                                         <span><?php echo esc_attr( get_source_file() ); ?>:</span>
    32                                                         <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ) ) ) : ?>()<?php endif; ?></a>
    33                                                 </li>
    34                                         <?php endwhile; wp_reset_postdata(); ?>
    35                                         <?php if ( $uses->post_count > $uses_to_show ) : ?>
    36                                                 <a href="#" class="show-more"><?php
    37                                                         /* translators: %d: remaining 'uses' count */
    38                                                         printf( _n( 'Show %d more use', 'Show %d more uses', $uses->post_count - $uses_to_show, 'wporg' ),
    39                                                                 number_format_i18n( $uses->post_count - $uses_to_show )
    40                                                         );
    41                                                         ?></a>
    42                                                 <a href="#" class="hide-more"><?php _e( 'Hide more uses', 'wporg' ); ?></a>
    43                                         <?php endif; ?>
    44                                 </ul>
     28                                <table id="uses-table">
     29                                        <caption class="screen-reader-text"><?php esc_html_e( 'Uses', 'wporg' ); ?></caption>
     30                                        <thead>
     31                                                <tr>
     32                                                        <th><?php esc_html_e( 'Uses', 'wporg' ); ?></th>
     33                                                        <th class="related-desc"><?php esc_html_e( 'Description', 'wporg' ); ?></th>
     34                                                </tr>
     35                                        </thead>
     36                                        <tbody>
     37                                                <?php while ( $uses->have_posts() ) : $uses->the_post(); ?>
     38                                                <tr>
     39                                                        <td>
     40                                                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
     41                                                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ), true ) ) : ?>()<?php endif; ?></a>
     42                                                        </td>
     43                                                        <td class="related-desc">
     44                                                                <?php echo get_summary(); ?>
     45                                                        </td>
     46                                                </tr>
     47                                                <?php endwhile; wp_reset_postdata(); ?>
     48                                        <tbody>
     49                                </table>
     50
     51                                <?php if ( $uses->post_count > $uses_to_show ) : ?>
     52                                <a href="#" class="show-more"><?php
     53                                        /* translators: %d: remaining 'uses' count */
     54                                        printf( _n( 'Show %d more use', 'Show %d more uses', $uses->post_count - $uses_to_show, 'wporg' ),
     55                                                number_format_i18n( $uses->post_count - $uses_to_show )
     56                                        );
     57                                        ?></a>
     58                                <a href="#" class="hide-more"><?php esc_html_e( 'Hide more uses', 'wporg' ); ?></a>
     59                                <?php endif; ?>
    4560                        </article>
    4661                <?php endif; ?>
    4762
    4863                <?php if ( $has_used_by ) : ?>
     64                        <?php if ( $has_uses && $uses->post_count > $uses_to_show ) : ?><hr /><?php endif; ?>
    4965
    50                 <?php if ( $has_uses ) { ?><hr /><?php } ?>
     66                        <article class="used-by">
     67                                <h3><?php esc_html_e( 'Used By', 'wporg' ); ?></h3>
     68                                <table id="used-by-table">
     69                                        <caption class="screen-reader-text"><?php esc_html_e( 'Used By', 'wporg' ); ?></caption>
     70                                        <thead>
     71                                                <tr>
     72                                                        <th><?php esc_html_e( 'Used By', 'wporg' ); ?></th>
     73                                                        <th class="related-desc"><?php esc_html_e( 'Description', 'wporg' ); ?></th>
     74                                                </tr>
     75                                        </thead>
     76                                        <tbody>
     77                                                <?php while ( $used_by->have_posts() ) : $used_by->the_post(); ?>
     78                                                <tr>
     79                                                        <td>
     80                                                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
     81                                                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ), true ) ) : ?>()<?php endif; ?></a>
     82                                                        </td>
     83                                                        <td class="related-desc">
     84                                                                <?php echo get_summary(); ?>
     85                                                        </td>
     86                                                </tr>
     87                                                <?php endwhile; wp_reset_postdata(); ?>
     88                                        <tbody>
     89                                </table>
    5190
    52                 <article class="used-by">
    53                         <h3><?php _e( 'Used By', 'wporg' ); ?></h3>
    54                         <ul>
    55                                 <?php
    56                                 $used_by_to_show = 5;
    57                                 while ( $used_by->have_posts() ) : $used_by->the_post();
    58                                         ?>
    59                                         <li>
    60                                                 <span><?php echo esc_attr( get_source_file() ); ?>:</span>
    61                                                 <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ) ) ) : ?>()<?php endif; ?></a>
    62                                         </li>
    63                                 <?php endwhile; wp_reset_postdata(); ?>
    6491                                <?php if ( $used_by->post_count > $used_by_to_show ) : ?>
    65                                         <a href="#" class="show-more"><?php
    66                                                 /* translators: %d: remaining 'used by' count */
    67                                                 printf( _n( 'Show %d more used by', 'Show %d more used by', $used_by->post_count - $used_by_to_show, 'wporg' ),
    68                                                         number_format_i18n( $used_by->post_count - $used_by_to_show )
    69                                                 );
    70                                                 ?></a>
    71                                         <a href="#" class="hide-more"><?php _e( 'Hide more used by', 'wporg' ); ?></a>
     92                                <a href="#" class="show-more"><?php
     93                                        /* translators: %d: remaining 'used by' count */
     94                                        printf( _n( 'Show %d more used by', 'Show %d more used by', $used_by->post_count - $used_by_to_show, 'wporg' ),
     95                                                number_format_i18n( $used_by->post_count - $used_by_to_show )
     96                                        );
     97                                        ?></a>
     98                                <a href="#" class="hide-more"><?php esc_html_e( 'Hide more used by', 'wporg' ); ?></a>
    7299                                <?php endif; ?>
    73                         </ul>
    74                 </article>
     100                        </article>
    75101                <?php endif; ?>
    76 
    77102        </section>
    78103        <?php endif; ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r6912 r7491  
    342342                border-image: none;
    343343                border-style: solid solid none;
    344                 border-width: 1px 1px 0;   
     344                border-width: 1px 1px 0;
    345345                display: inline-block;
    346346                padding: .5em 1em;
    … …  
    352352                border-color: #ccc;
    353353                border-radius: 3px 3px 0 0;
    354                 color: #333; 
     354                color: #333;
    355355        }
    356356        .tab-section {
    … …  
    10611061        ----------------------------------------------- */
    10621062        .related {
    1063                 ul {
    1064                         line-height: 1.7; /* Slightly increase the line height for more readability */
    1065                         list-style-type: none;
    1066                         margin: 0;
    1067                         overflow-x: auto;
    1068                 }
    1069 
    10701063                .show-more, .hide-more {
    10711064                        display: none;
    10721065                }
    1073         }
    1074 
     1066
     1067                /* Hide the title and toc links (same as .screen-reader-text)
     1068                   this allows for linking from the toc. */
     1069                h3, .uses .toc-jump, .used-by .toc-jump {
     1070                        height: 0;
     1071                        margin-bottom: 0;
     1072                        clip: rect(1px, 1px, 1px, 1px);
     1073                        position: absolute !important;
     1074                }
     1075
     1076                .used-by, .uses {
     1077                        overflow-x: auto;
     1078                        clear: right;
     1079                }
     1080
     1081                td p  {
     1082                        margin-bottom: 0;
     1083                }
     1084
     1085                th, td {
     1086                        width: 50%;
     1087                }
     1088
     1089                @media (max-width: 43em) {
     1090                        .related-desc, span {
     1091                                display: none;
     1092                        }
     1093                }
     1094        }
    10751095
    10761096        .source-content {
    … …  
    11061126
    11071127        /* Changelog */
    1108         table {
     1128        .changelog table {
    11091129                .changelog-version {
    11101130                        width: 10%;
    … …  
    11131133                        width: 90%;
    11141134                }
    1115 
    11161135        }
    11171136
    … …  
    15871606                        color: #fff;
    15881607                        border-bottom: 1px solid #fff;
    1589                        
     1608
    15901609                        @media screen and (max-width: 48em) {
    15911610                                border-bottom: 0;
    … …  
    23932412                }
    23942413        }
    2395        
     2414
    23962415        .entry-content {
    23972416                margin-top: 2rem;
    … …  
    24802499                        background: #eee;
    24812500                }
    2482                
     2501
    24832502                &:focus, &:active {
    24842503                        border-color: #bbb;
    … …  
    24872506                        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    24882507                }
    2489                
     2508
    24902509                > span {
    24912510                        color: #757575;
    2492                        
     2511
    24932512                        &.red {
    24942513                                color: #dc3232;
    … …  
    25032522        .btn-group {
    25042523                display: inline;
    2505                
     2524
    25062525                > a {
    25072526                        position: relative;
    2508                        
     2527
    25092528                        @media(min-width: 571px) {
    25102529                                &:first-child {

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r7278 r7491  
    14461446}
    14471447
    1448 .devhub-wrap .related ul {
    1449   line-height: 1.7;
    1450   /* Slightly increase the line height for more readability */
    1451   list-style-type: none;
    1452   margin: 0;
    1453   overflow-x: auto;
     1448.devhub-wrap .related {
     1449  /* Hide the title and toc links (same as .screen-reader-text)
     1450                   this allows for linking from the toc. */
    14541451}
    14551452
    14561453.devhub-wrap .related .show-more, .devhub-wrap .related .hide-more {
    14571454  display: none;
     1455}
     1456
     1457.devhub-wrap .related h3, .devhub-wrap .related .uses .toc-jump, .devhub-wrap .related .used-by .toc-jump {
     1458  height: 0;
     1459  margin-bottom: 0;
     1460  clip: rect(1px, 1px, 1px, 1px);
     1461  position: absolute !important;
     1462}
     1463
     1464.devhub-wrap .related .used-by, .devhub-wrap .related .uses {
     1465  overflow-x: auto;
     1466  clear: right;
     1467}
     1468
     1469.devhub-wrap .related td p {
     1470  margin-bottom: 0;
     1471}
     1472
     1473.devhub-wrap .related th, .devhub-wrap .related td {
     1474  width: 50%;
     1475}
     1476
     1477@media (max-width: 43em) {
     1478  .devhub-wrap .related .related-desc, .devhub-wrap .related span {
     1479    display: none;
     1480  }
    14581481}
    14591482
    … …  
    14891512}
    14901513
    1491 .devhub-wrap table .changelog-version {
     1514.devhub-wrap .changelog table .changelog-version {
    14921515  width: 10%;
    14931516}
    14941517
    1495 .devhub-wrap table .changelog-desc {
     1518.devhub-wrap .changelog table .changelog-desc {
    14961519  width: 90%;
    14971520}
    … …  
    24472470body.responsive-show #secondary {
    24482471  left: 0;
    2449   overflow: auto;
    24502472}
    24512473
Note: See TracChangeset for help on using the changeset viewer.