Skip to content

Commit cc68415

Browse files
westonruterwestonruter
committed
About: Fix jumping behavior for titles and columns when scrolling.
Props ryelle. See #42087. Fixes #42514, #42526. git-svn-id: https://develop.svn.wordpress.org/trunk@42173 602fd350-edb4-49c9-b593-d223f7449a82
1 parent e260210 commit cc68415

2 files changed

Lines changed: 110 additions & 24 deletions

File tree

‎src/wp-admin/about.php‎

Lines changed: 74 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@
5353
</div>
5454

5555
<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>
5759

5860
<div class="section-content">
5961
<div class="section-item">
@@ -88,7 +90,9 @@
8890
</div>
8991

9092
<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>
9296

9397
<div class="section-content">
9498
<div class="section-item">
@@ -116,7 +120,9 @@
116120
</div>
117121

118122
<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>
120126

121127
<div class="section-content">
122128
<div class="section-item">
@@ -137,7 +143,9 @@
137143
</div>
138144

139145
<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>
141149

142150
<div class="section-content">
143151
<div class="section-item">
@@ -242,34 +250,84 @@
242250
offset += $adminbar.height();
243251
}
244252

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() {
246271
$sections.each( function( i, section ) {
247272
var $section = $( section );
248273
var $header = $section.find( 'h2' );
249274
var width = $header.innerWidth();
275+
var height = $header.innerHeight();
276+
277+
if ( $section.hasClass( 'has-long-title' ) ) {
278+
return;
279+
}
250280

251281
var sectionStart = $section.offset().top - offset;
252-
var sectionEnd = sectionStart + $section.innerHeight() - 60;
282+
var sectionEnd = sectionStart + $section.innerHeight();
283+
var scrollPos = $window.scrollTop();
253284

254285
// 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
258302
} 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+
} );
261309
}
262310
} );
263311
}, 100 );
312+
264313
function enableFixedHeaders() {
265314
if ( $window.width() > 782 ) {
266-
adjustScrollClass();
267-
$window.on( 'scroll', adjustScrollClass );
315+
setup();
316+
adjustScrollPosition();
317+
$window.on( 'scroll', adjustScrollPosition );
268318
} else {
269-
$window.off( 'scroll', adjustScrollClass );
319+
$window.off( 'scroll', adjustScrollPosition );
320+
$sections.find( '.section-header' )
321+
.css( {
322+
width: 'auto'
323+
} );
270324
$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+
} );
273331
}
274332
}
275333
$( window ).resize( enableFixedHeaders );

‎src/wp-admin/css/about.css‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -364,16 +364,15 @@
364364
margin: 0 auto 120px;
365365
}
366366

367-
.about-wrap .floating-header-section h2 {
367+
.about-wrap .floating-header-section .section-header {
368368
-ms-grid-column: 1;
369369
grid-column: 1;
370-
text-align: left;
371-
margin: 0;
370+
position: relative;
372371
}
373372

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;
377376
}
378377

379378
.about-wrap .floating-header-section .section-content {
@@ -396,6 +395,27 @@
396395
grid-column: 2;
397396
}
398397

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+
399419
/*------------------------------------------------------------------------------
400420
3.0 - Credits & Freedoms Pages
401421
------------------------------------------------------------------------------*/
@@ -415,7 +435,7 @@
415435
}
416436

417437
.about-wrap .compact {
418-
margin-bottom: 0
438+
margin-bottom: 0;
419439
}
420440

421441
.about-wrap .wp-person {
@@ -509,7 +529,7 @@
509529
grid-gap: 60px 0;
510530
}
511531

512-
.about-wrap .floating-header-section h2,
532+
.about-wrap .floating-header-section .section-header,
513533
.about-wrap .floating-header-section .section-content {
514534
-ms-grid-column: 1;
515535
grid-column: 1;
@@ -568,6 +588,13 @@
568588
margin-bottom: 60px;
569589
}
570590

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+
571598
.about-wrap .floating-header-section .section-content {
572599
-ms-grid-columns: 1fr;
573600
grid-template-columns: 1fr;
@@ -577,5 +604,6 @@
577604
.about-wrap .floating-header-section .section-content .section-item {
578605
-ms-grid-column: 1;
579606
grid-column: 1;
607+
max-width: 100%;
580608
}
581609
}

0 commit comments

Comments
 (0)