WordPress.org
Get WordPress

Making WordPress.org

Changeset 7491


Ignore:
Timestamp:
07/24/2018 05:27:23 PM (6 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.