Making WordPress.org


Ignore:
Timestamp:
05/27/2019 04:46:54 AM (5 years ago)
Author:
tellyworth
Message:

Plugin directory theme: Improve responsive design of tabs.

This replaces the pure CSS tabs with a JS implementation that makes changes more manageable, and deals with some accessibility and responsiveness issues.

Props ck3lee
See #2776

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

    r8547 r8880  
    5252
    5353    <?php if ( ! get_query_var( 'plugin_advanced' ) ) : ?>
     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>
     71            <?php if ( isset( $content['installation'] ) && ! $is_closed ) : ?>
     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>
     80            <?php endif; ?>
     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>
    5491        <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>
    62             <?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>
    66             <?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>
    7292    <?php endif; ?>
    7393
     
    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 -->
Note: See TracChangeset for help on using the changeset viewer.