Changeset 8880 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

Timestamp:

05/27/2019 04:46:54 AM (6 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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php (modified) (2 diffs)

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

@@ -52 +52 @@
 
     <?php if ( ! get_query_var( 'plugin_advanced' ) ) : ?>
+        <div class="tab" role="tablist">
+            <button 
+                id="tab-button-description"
+                class="tablinks"
+                role="tab"
+                aria-controls="tab-description"
+            >
+                <?php esc_html_e( 'Details', 'wporg-plugins' ); ?>
+            </button>
+            <button 
+                id="tab-button-reviews"
+                class="tablinks"
+                role="tab"
+                aria-controls="tab-reviews"
+            >
+                <?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?>
+            </button>
+            <?php if ( isset( $content['installation'] ) && ! $is_closed ) : ?>
+                <button 
+                    id="tab-button-installation"
+                    class="tablinks"
+                    role="tab"
+                    aria-controls="tab-installation"
+                >
+                    <?php esc_html_e( 'Installation', 'wporg-plugins' ); ?>
+                </button>
+            <?php endif; ?>
+            <button 
+                id="tab-button-developers"
+                class="tablinks"
+                role="tab"
+                aria-controls="tab-developers"
+            >
+                <?php esc_html_e( 'Development', 'wporg-plugins' ); ?>
+            </button>
+            <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
+        </div>
         <script type="text/javascript">if ( '#changelog' == window.location.hash ) { window.location.hash = '#developers'; }</script>
-        <span id="description"></span>
-        <span id="reviews"></span>
-        <span id="installation"></span>
-        <span id="developers"></span>
-        <ul class="tabs clear">
-            <li id="tablink-description"><a href="#description"><?php esc_html_e( 'Details', 'wporg-plugins' ); ?></a></li>
-            <li id="tablink-reviews"><a href="#reviews"><?php esc_html_e( 'Reviews', 'wporg-plugins' ); ?></a></li>
-            <?php if ( isset( $content['installation'] ) && ! $is_closed ) : ?>
-                <li id="tablink-installation">
-                    <a href="#installation"><?php esc_html_e( 'Installation', 'wporg-plugins' ); ?></a>
-                </li>
-            <?php endif; ?>
-            <li id="tablink-support">
-                <a href="<?php echo esc_url( Template::get_support_url() ); ?>"><?php esc_html_e( 'Support', 'wporg-plugins' ); ?></a>
-            </li>
-            <li id="tablink-developers"><a href="#developers"><?php esc_html_e( 'Development', 'wporg-plugins' ); ?></a></li>
-        </ul>
     <?php endif; ?>
 
@@ -113 +133 @@
     <div class="entry-meta">
         <?php
-            if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
-                get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
-            } elseif ( $is_closed ) {
-                get_template_part( 'template-parts/plugin-sidebar', 'closed' );
-            } else {
-                get_template_part( 'template-parts/plugin-sidebar' );
-            }
+        if ( get_query_var( 'plugin_advanced' ) && ( ! $is_closed || current_user_can( 'plugin_admin_view', $post ) ) ) {
+            get_template_part( 'template-parts/plugin-sidebar', 'advanced' );
+        } elseif ( $is_closed ) {
+            get_template_part( 'template-parts/plugin-sidebar', 'closed' );
+        } else {
+            get_template_part( 'template-parts/plugin-sidebar' );
+        }
         ?>
     </div><!-- .entry-meta -->