Making WordPress.org

Ticket #2776: 2776.1.diff

File 2776.1.diff, 13.8 KB (added by ck3lee, 6 years ago)
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/build.jsx
    index f1af419b9..5db507cb7 100644
    if ( images.length > 0 ) { 
    3131        );
    3232
    3333        container.replaceChild( temp.querySelector( '#screenshots' ), document.getElementById( 'screenshots' ) );
     34
     35        // On page load, we want to show or hide <Screenshots /> after it is rendered, based on the #hash in url.
     36        if ( typeof window.showUrlHashTargetTab === 'function' ) {
     37                window.showUrlHashTargetTab();
     38        }
    3439}
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx
    index 3d1cda1cc..e2b40ca55 100644
    export const Screenshots = ( { screenshots } ) => { 
    2121
    2222        if ( items ) {
    2323                return (
    24                         <div id="screenshots" className="plugin-screenshots">
     24                        <div id="screenshots" className="plugin-screenshots tabcontent">
    2525                                <h2>{ localeData.screenshots }</h2>
    2626                                <ImageGallery items={ items } />
    2727                        </div>
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss
    index cf0ce66ec..1a47e57c5 100644
     
    4040                padding-top: 0;
    4141        }
    4242
    43         .tabs {
    44                 list-style: none;
    45                 margin:0;
     43        .tab {
     44
     45                display: flex;
     46                flex-wrap: wrap;
     47                margin: 0;
    4648                border-bottom: 2px solid #eee;
    4749
    48                 li {
    49                         display: inline-block;
    50                         margin-bottom: -2px;
    51                         border: 2px solid transparent;
     50                button, a {
     51                        cursor: pointer;
     52                        padding: 8px 22px;
    5253                        font-size: 0.8rem;
    53                         color: #0073aa;
    54                         transition: background .2s ease;
     54                        border: 0;
     55                        margin: 4px;
     56                        background: #fff;
     57                }
    5558
    56                         a {
    57                                 border: 0;
    58                                 display: block;
    59                                 padding: 0.64rem 1.25rem;
    60                                 background: white;
    61                                 text-decoration: none;
     59                button {
     60                        color: #0073aa;
    6261
    63                                 &.active, &:hover {
    64                                         background: #eee;
    65                                 }
     62                        &:hover {
     63                                background-color: #ddd;
    6664                        }
    6765
    6866                        &.active, &:hover {
    69                                 padding-bottom: 0 !important;
    70                                 border: 2px solid #eee;
     67                                border-top: 2px solid #eee;
     68                                border-left: 2px solid #eee;
     69                                border-right: 2px solid #eee;
     70                                background: #fff;
     71                                margin: -2px 2px;
     72                                padding-bottom: 10px;
    7173                        }
    7274                }
     75        }
    7376
    74                 @media screen and (max-width:34em) {
    75                         border-top: 2px solid #eee;
    76 
    77                         li {
    78                                 display: block;
    79                                 border: none;
    80                                 border-bottom: 1px solid #eee;
    81                                 margin-bottom: 1px;
    8277
    83                                 &.active, &:hover {
    84                                         border: none;
    85                                         border-bottom: 1px solid #eee;
    86                                 }
    87                         }
    88                 }
     78        .tabcontent {
     79                display: none;
     80                padding: 6px 12px;
     81                border: 1px solid #ccc;
     82                border-top: none;
    8983        }
    9084
    9185        .entry-content {
     
    9993                }
    10094
    10195                > div {
    102                         display:none;
    10396                        border: 0;
    10497
    10598                        ~ button {
     
    125118                padding: 0 ms( 4 );
    126119        }
    127120
    128         span#description,
    129         span#reviews,
    130         span#developers,
    131         span#installation {
    132                 position:fixed;
    133         }
    134 
    135         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .tabs li#tablink-description ,
    136         span#reviews:target ~ .tabs li#tablink-reviews,
    137         span#installation:target ~ .tabs li#tablink-installation,
    138         span#developers:target ~ .tabs li#tablink-developers  {
    139                 border-top: 2px solid #eee;
    140                 border-left: 2px solid #eee;
    141                 border-right: 2px solid #eee;
    142                 border-bottom: 0;
    143                 padding-bottom: 2px;
    144                 background: #fff;
    145         }
    146 
    147         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-description,
    148         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #screenshots,
    149         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #faq,
    150         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #blocks,
    151         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers,
    152         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers ~ button,
    153         span#reviews:target ~ .entry-content #tab-reviews,
    154         span#installation:target ~ .entry-content #tab-installation,
    155         span#developers:target ~ .entry-content #tab-changelog,
    156         span#developers:target ~ .entry-content #tab-developers,
    157         span#developers:target ~ .entry-content #tab-developers ~ button,
    158         span#developers:target ~ .entry-content #tab-developers .plugin-development {
    159                 display:block;
    160         }
    161 
    162         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers .plugin-development,
    163         span#developers:target ~ .entry-content #tab-developers .plugin-contributors {
    164                 display:none;
    165         }
    166 
    167         span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-meta .plugin-contributors,
    168         span#reviews:target ~ .entry-meta .plugin-meta,
    169         span#reviews:target ~ .entry-meta .plugin-support,
    170         span#reviews:target ~ .entry-meta .plugin-donate,
    171         span#reviews:target ~ .entry-meta .plugin-contributors,
    172         span#installation:target ~ .entry-meta .plugin-contributors {
    173                 display:none;
    174         }
    175121
    176122        @media screen and ( min-width: $ms-breakpoint ) {
    177123                .plugin-header,
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/functions.php
    index 3d18e8fa8..ec6537c81 100644
    function scripts() { 
    8484        if ( is_singular( 'plugin' ) ) {
    8585                wp_enqueue_script( 'wporg-plugins-popover', get_stylesheet_directory_uri() . '/js/popover.js', array( 'jquery' ), '20171002', true );
    8686                wp_enqueue_script( 'wporg-plugins-faq', get_stylesheet_directory_uri() . '/js/section-faq.js', array( 'jquery' ), '20180131', true );
     87                wp_enqueue_script( 'wporg-plugins-tabs', get_stylesheet_directory_uri() . '/js/tabs.js', array(), '20190501', true );
    8788        }
    8889
    8990        if ( ! is_404() ) {
  • new file wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/js/tabs.js
    new file mode 100644
    index 000000000..758151d3a
    - +  
     1/* eslint-disable no-var */
     2
     3( function( $ ) {
     4        var openTab = function( tabButton, tabs, widgets ) {
     5                $( '#main' ).find( '.tabcontent' ).css( 'display', 'none' );
     6                $( '#main' ).find( '.entry-meta .widget' ).css( 'display', 'none' );
     7
     8                $( '#main' ).find( '.tablinks' ).removeClass( 'active' ).attr( 'aria-selected', 'false' );
     9                $( '#' + tabButton ).addClass( 'active' ).attr( 'aria-selected', 'true' );
     10
     11                for ( var i = 0; i < tabs.length; i++ ) {
     12                        $( '#' + tabs[ i ] ).css( 'display', 'block' );
     13                }
     14
     15                for ( var j = 0; j < widgets.length; j++ ) {
     16                        $( '#main' ).find( '.entry-meta .widget.' + widgets[ j ] ).css( 'style', 'block' );
     17                }
     18        };
     19
     20        var openTargetTab = function( targetTab ) {
     21                if ( targetTab === 'reviews' ) {
     22                        openTab(
     23                                'tab-button-reviews',
     24                                [ 'tab-reviews' ],
     25                                [ 'plugin-ratings' ] );
     26                } else if ( targetTab === 'installation' ) {
     27                        openTab(
     28                                'tab-button-installation',
     29                                [ 'tab-installation' ],
     30                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     31                } else if ( targetTab === 'developers' ) {
     32                        openTab(
     33                                'tab-button-developers',
     34                                [ 'tab-developers', 'tab-changelog' ],
     35                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     36                } else {
     37                        openTab(
     38                                'tab-button-description',
     39                                [ 'tab-description', 'screenshots', 'faq' ],
     40                                [ 'plugin-meta', 'plugin-ratings', 'plugin-support' ] );
     41                }
     42        };
     43
     44        $( '#tab-button-description' ).bind( 'click', function() {
     45                openTargetTab( 'description' );
     46        } );
     47
     48        $( '#tab-button-reviews' ).bind( 'click', function() {
     49                openTargetTab( 'reviews' );
     50        } );
     51
     52        $( '#tab-button-installation' ).bind( 'click', function() {
     53                openTargetTab( 'installation' );
     54        } );
     55
     56        $( '#tab-button-developers' ).bind( 'click', function() {
     57                openTargetTab( 'developers' );
     58        } );
     59
     60        window.showUrlHashTargetTab = function() {
     61                var targetTab = window.location.hash.substr( 1 );
     62                openTargetTab( targetTab );
     63        };
     64
     65        window.showUrlHashTargetTab();
     66} )( jQuery );
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php
    index 9b4e3ef42..9f01442a9 100644
    $plugin_title = $is_closed ? $post->post_name : get_the_title(); 
    5151        </header><!-- .entry-header -->
    5252
    5353        <?php if ( ! get_query_var( 'plugin_advanced' ) ) : ?>
    54                 <script type="text/javascript">if ( '#changelog' == window.location.hash ) { window.location.hash = '#developers'; }</script>
    55                 <span id="description"></span>
    56                 <span id="reviews"></span>
    57                 <span id="installation"></span>
    58                 <span id="developers"></span>
    59                 <ul class="tabs clear">
    60                         <li id="tablink-description"><a href="#description"><?php esc_html_e( 'Details', 'wporg-plugins' ); ?></a></li>
    61                         <li id="tablink-reviews"><a href="#reviews"><?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?></a></li>
     54                <div class="tab" role="tablist">
     55                        <button
     56                                id="tab-button-description"
     57                                class="tablinks"
     58                                role="tab"
     59                                aria-controls="tab-description"
     60                        >
     61                                <?php esc_html_e( 'Details', 'wporg-plugins' ); ?>
     62                        </button>
     63                        <button
     64                                id="tab-button-reviews"
     65                                class="tablinks"
     66                                role="tab"
     67                                aria-controls="tab-reviews"
     68                        >
     69                                <?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?>
     70                        </button>
    6271                        <?php if ( isset( $content['installation'] ) && ! $is_closed ) : ?>
    63                                 <li id="tablink-installation">
    64                                         <a href="#installation"><?php esc_html_e( 'Installation', 'wporg-plugins' ); ?></a>
    65                                 </li>
     72                                <button
     73                                        id="tab-button-installation"
     74                                        class="tablinks"
     75                                        role="tab"
     76                                        aria-controls="tab-installation"
     77                                >
     78                                        <?php esc_html_e( 'Installation', 'wporg-plugins' ); ?>
     79                                </button>
    6680                        <?php endif; ?>
    67                         <li id="tablink-support">
    68                                 <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
    69                         </li>
    70                         <li id="tablink-developers"><a href="#developers"><?php esc_html_e( 'Development', 'wporg-plugins' ); ?></a></li>
    71                 </ul>
     81                        <button
     82                                id="tab-button-developers"
     83                                class="tablinks"
     84                                role="tab"
     85                                aria-controls="tab-developers"
     86                        >
     87                                <?php esc_html_e( 'Development', 'wporg-plugins' ); ?>
     88                        </button>
     89                        <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
     90                </div>
     91                <script type="text/javascript">if ( '#changelog' == window.location.hash ) { window.location.hash = '#developers'; }</script>
    7292        <?php endif; ?>
    7393
    7494        <div class="entry-content">
    $plugin_title = $is_closed ? $post->post_name : get_the_title(); 
    112132
    113133        <div class="entry-meta">
    114134                <?php
    115                         if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
    116                                 get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
    117                         } elseif ( $is_closed ) {
    118                                 get_template_part( 'template-parts/plugin-sidebar', 'closed' );
    119                         } else {
    120                                 get_template_part( 'template-parts/plugin-sidebar' );
    121                         }
     135                if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
     136                        get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
     137                } elseif ( $is_closed ) {
     138                        get_template_part( 'template-parts/plugin-sidebar', 'closed' );
     139                } else {
     140                        get_template_part( 'template-parts/plugin-sidebar' );
     141                }
    122142                ?>
    123143        </div><!-- .entry-meta -->
    124144</article><!-- #post-## -->
  • wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section.php
    index 2961d2470..9c930eaa7 100644
    global $section, $section_slug, $section_content; 
    1111
    1212$prefix = in_array( $section_slug, array( 'screenshots', 'faq' ), true ) ? '' : 'tab-';
    1313
    14 $classes = [ 'plugin-' . $section_slug, 'section' ];
     14$classes = [ 'plugin-' . $section_slug, 'section', 'tabcontent' ];
    1515$classes = implode( ' ', $classes );
    1616?>
    1717
    18 <div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
     18<div id="<?php echo esc_attr( $prefix . $section_slug ); ?>" role="tabpanel" aria-labelled-by="<?php echo esc_attr( 'tab-button-' . $section_slug ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    1919        <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo esc_html( $section['title'] ); ?></h2>
    2020        <?php echo $section_content; ?>
    2121</div>