Changeset 42174
- Timestamp:
- 11/13/2017 10:29:28 PM (7 years ago)
- Location:
- branches/4.9
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/4.9
-
branches/4.9/src/wp-admin/about.php
r42160 r42174 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"> … … 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"> … … 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"> … … 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"> … … 243 251 } 244 252 245 var adjustScrollClass = _.throttle( function adjustScrollClass() { 253 function setup() { 254 $sections.each( function( i, section ) { 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() { 246 271 $sections.each( function( i, section ) { 247 272 var $section = $( section ); 248 273 var $header = $section.find( 'h2' ); 249 274 var width = $header.innerWidth(); 275 var height = $header.innerHeight(); 276 277 if ( $section.hasClass( 'has-long-title' ) ) { 278 return; 279 } 250 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 } -
branches/4.9/src/wp-admin/css/about.css
r42162 r42174 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 position: relative; 371 } 372 373 .about-wrap .floating-header-section h2 { 374 margin: 0; 370 375 text-align: left; 371 margin: 0;372 }373 374 .about-wrap .floating-header-section .header-fixed {375 position: fixed;376 width: 300px;377 376 } 378 377 … … 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 … … 416 436 417 437 .about-wrap .compact { 418 margin-bottom: 0 438 margin-bottom: 0; 419 439 } 420 440 … … 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; … … 569 589 } 570 590 591 .about-wrap .floating-header-section h2 { 592 word-break: break-all; 593 -webkit-hyphens: auto; 594 -ms-hyphens: auto; 595 hyphens: auto; 596 } 597 571 598 .about-wrap .floating-header-section .section-content { 572 599 -ms-grid-columns: 1fr; … … 578 605 -ms-grid-column: 1; 579 606 grid-column: 1; 580 } 581 } 607 max-width: 100%; 608 } 609 }
Note: See TracChangeset
for help on using the changeset viewer.