Ticket #42526: 42526.diff
File 42526.diff, 6.4 KB (added by , 7 years ago) |
---|
-
src/wp-admin/about.php
53 53 </div> 54 54 55 55 <div class="floating-header-section"> 56 <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2> 56 <div class="section-header"> 57 <h2><?php _e( 'Customizer Workflow Improved' ); ?></h2> 58 </div> 57 59 58 60 <div class="section-content"> 59 61 <div class="section-item"> … … 88 90 </div> 89 91 90 92 <div class="floating-header-section"> 91 <h2><?php _e( 'Coding Enhancements' ); ?></h2> 93 <div class="section-header"> 94 <h2><?php _e( 'Coding Enhancements' ); ?></h2> 95 </div> 92 96 93 97 <div class="section-content"> 94 98 <div class="section-item"> … … 116 120 </div> 117 121 118 122 <div class="floating-header-section"> 119 <h2><?php _e( 'Even More Widget Updates' ); ?></h2> 123 <div class="section-header"> 124 <h2><?php _e( 'Even More Widget Updates' ); ?></h2> 125 </div> 120 126 121 127 <div class="section-content"> 122 128 <div class="section-item"> … … 137 143 </div> 138 144 139 145 <div class="floating-header-section"> 140 <h2><?php _e( 'Site Building Improvements' ); ?></h2> 146 <div class="section-header"> 147 <h2><?php _e( 'Site Building Improvements' ); ?></h2> 148 </div> 141 149 142 150 <div class="section-content"> 143 151 <div class="section-item"> … … 242 250 offset += $adminbar.height(); 243 251 } 244 252 245 var adjustScrollClass = _.throttle( function adjustScrollClass() {253 function setup() { 246 254 $sections.each( function( i, section ) { 247 255 var $section = $( section ); 256 // Set width on header to prevent column jump 257 var $header = $section.find('.section-header'); 258 $header.css( { 259 width: $header.innerWidth() + 'px' 260 } ); 261 262 // If the title is long, switch the layout 263 var $title = $section.find( 'h2' ); 264 if ( $title.innerWidth() > 300 ) { 265 $section.addClass( 'has-long-title' ); 266 } 267 } ); 268 } 269 270 var adjustScrollPosition = _.throttle( function adjustScrollPosition() { 271 $sections.each( function( i, section ) { 272 var $section = $( section ); 248 273 var $header = $section.find( 'h2' ); 249 274 var width = $header.innerWidth(); 275 var height = $header.innerHeight(); 250 276 277 if ( $section.hasClass( 'has-long-title' ) ) { 278 return; 279 } 280 251 281 var sectionStart = $section.offset().top - offset; 252 var sectionEnd = sectionStart + $section.innerHeight() - 60; 282 var sectionEnd = sectionStart + $section.innerHeight(); 283 var scrollPos = $window.scrollTop(); 253 284 254 285 // If we're scrolled into a section, stick the header 255 if ( $window.scrollTop() >= sectionStart && $window.scrollTop() < sectionEnd ) { 256 $header.addClass( 'header-fixed' ); 257 $header.css( { top: offset + 'px', width: width + 'px' } ); 286 if ( scrollPos >= sectionStart && scrollPos < sectionEnd - height ) { 287 $header.css( { 288 position: 'fixed', 289 top: offset + 'px', 290 bottom: 'auto', 291 width: width + 'px' 292 } ); 293 // If we're at the end of the section, stick the header to the bottom 294 } else if ( scrollPos >= sectionEnd - height && scrollPos < sectionEnd ) { 295 $header.css( { 296 position: 'absolute', 297 top: 'auto', 298 bottom: 0, 299 width: width + 'px' 300 } ); 301 // Unstick the header 258 302 } else { 259 $header.removeClass( 'header-fixed' ); 260 $header.css( { top: 0, width: 'auto' } ); 303 $header.css( { 304 position: 'static', 305 top: 'auto', 306 bottom: 'auto', 307 width: 'auto' 308 } ); 261 309 } 262 310 } ); 263 311 }, 100 ); 312 264 313 function enableFixedHeaders() { 265 314 if ( $window.width() > 782 ) { 266 adjustScrollClass(); 267 $window.on( 'scroll', adjustScrollClass ); 315 setup(); 316 adjustScrollPosition(); 317 $window.on( 'scroll', adjustScrollPosition ); 268 318 } else { 269 $window.off( 'scroll', adjustScrollClass ); 319 $window.off( 'scroll', adjustScrollPosition ); 320 $sections.find( '.section-header' ) 321 .css( { 322 width: 'auto' 323 } ); 270 324 $sections.find( 'h2' ) 271 .removeClass( 'header-fixed' ) 272 .css( { top: 0, width: 'auto' } ); 325 .css( { 326 position: 'static', 327 top: 'auto', 328 bottom: 'auto', 329 width: 'auto' 330 } ); 273 331 } 274 332 } 275 333 $( window ).resize( enableFixedHeaders ); -
src/wp-admin/css/about.css
364 364 margin: 0 auto 120px; 365 365 } 366 366 367 .about-wrap .floating-header-section h2{367 .about-wrap .floating-header-section .section-header { 368 368 -ms-grid-column: 1; 369 369 grid-column: 1; 370 text-align: left; 371 margin: 0; 370 position: relative; 372 371 } 373 372 374 .about-wrap .floating-header-section .header-fixed{375 position: fixed;376 width: 300px;373 .about-wrap .floating-header-section h2 { 374 margin: 0; 375 text-align: left; 377 376 } 378 377 379 378 .about-wrap .floating-header-section .section-content { … … 396 395 grid-column: 2; 397 396 } 398 397 398 .about-wrap .floating-header-section.has-long-title { 399 -ms-grid-columns: 1fr; 400 grid-template-columns: 1fr; 401 grid-gap: 60px 0; 402 } 403 404 .about-wrap .floating-header-section.has-long-title .section-content { 405 -ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px); 406 grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px); 407 } 408 409 .about-wrap .floating-header-section.has-long-title .section-item { 410 max-width: 300px; 411 } 412 413 .about-wrap .floating-header-section.has-long-title .section-header, 414 .about-wrap .floating-header-section.has-long-title .section-content { 415 -ms-grid-column: 1; 416 grid-column: 1; 417 } 418 399 419 /*------------------------------------------------------------------------------ 400 420 3.0 - Credits & Freedoms Pages 401 421 ------------------------------------------------------------------------------*/ … … 415 435 } 416 436 417 437 .about-wrap .compact { 418 margin-bottom: 0 438 margin-bottom: 0; 419 439 } 420 440 421 441 .about-wrap .wp-person { … … 509 529 grid-gap: 60px 0; 510 530 } 511 531 512 .about-wrap .floating-header-section h2,532 .about-wrap .floating-header-section .section-header, 513 533 .about-wrap .floating-header-section .section-content { 514 534 -ms-grid-column: 1; 515 535 grid-column: 1; … … 577 597 .about-wrap .floating-header-section .section-content .section-item { 578 598 -ms-grid-column: 1; 579 599 grid-column: 1; 600 max-width: 100%; 580 601 } 581 602 }