Ticket #2776: 2776.1.diff
File 2776.1.diff, 13.8 KB (added by , 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 ) { 31 31 ); 32 32 33 33 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 } 34 39 } -
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 } ) => { 21 21 22 22 if ( items ) { 23 23 return ( 24 <div id="screenshots" className="plugin-screenshots ">24 <div id="screenshots" className="plugin-screenshots tabcontent"> 25 25 <h2>{ localeData.screenshots }</h2> 26 26 <ImageGallery items={ items } /> 27 27 </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
40 40 padding-top: 0; 41 41 } 42 42 43 .tabs { 44 list-style: none; 45 margin:0; 43 .tab { 44 45 display: flex; 46 flex-wrap: wrap; 47 margin: 0; 46 48 border-bottom: 2px solid #eee; 47 49 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; 52 53 font-size: 0.8rem; 53 color: #0073aa; 54 transition: background .2s ease; 54 border: 0; 55 margin: 4px; 56 background: #fff; 57 } 55 58 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; 62 61 63 &.active, &:hover { 64 background: #eee; 65 } 62 &:hover { 63 background-color: #ddd; 66 64 } 67 65 68 66 &.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; 71 73 } 72 74 } 75 } 73 76 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;82 77 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; 89 83 } 90 84 91 85 .entry-content { … … 99 93 } 100 94 101 95 > div { 102 display:none;103 96 border: 0; 104 97 105 98 ~ button { … … 125 118 padding: 0 ms( 4 ); 126 119 } 127 120 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 }175 121 176 122 @media screen and ( min-width: $ms-breakpoint ) { 177 123 .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() { 84 84 if ( is_singular( 'plugin' ) ) { 85 85 wp_enqueue_script( 'wporg-plugins-popover', get_stylesheet_directory_uri() . '/js/popover.js', array( 'jquery' ), '20171002', true ); 86 86 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 ); 87 88 } 88 89 89 90 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(); 51 51 </header><!-- .entry-header --> 52 52 53 53 <?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> 62 71 <?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> 66 80 <?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> 72 92 <?php endif; ?> 73 93 74 94 <div class="entry-content"> … … $plugin_title = $is_closed ? $post->post_name : get_the_title(); 112 132 113 133 <div class="entry-meta"> 114 134 <?php 115 116 117 118 119 120 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 } 122 142 ?> 123 143 </div><!-- .entry-meta --> 124 144 </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; 11 11 12 12 $prefix = in_array( $section_slug, array( 'screenshots', 'faq' ), true ) ? '' : 'tab-'; 13 13 14 $classes = [ 'plugin-' . $section_slug, 'section' ];14 $classes = [ 'plugin-' . $section_slug, 'section', 'tabcontent' ]; 15 15 $classes = implode( ' ', $classes ); 16 16 ?> 17 17 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 ); ?>"> 19 19 <h2 id="<?php echo esc_attr( $section_slug . '-header' ); ?>"><?php echo esc_html( $section['title'] ); ?></h2> 20 20 <?php echo $section_content; ?> 21 21 </div>