About: Fix jumping behavior for titles and columns when scrolling.
Props ryelle. See #42087. Fixes #42514, #42526. Built from https://develop.svn.wordpress.org/trunk@42173 git-svn-id: http://core.svn.wordpress.org/trunk@42003 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
parent
e484b66335
commit
54a2c0dd1f
|
|
@ -53,7 +53,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
</div>
|
||||
|
||||
<div class="floating-header-section">
|
||||
<h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
|
||||
<div class="section-header">
|
||||
<h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
|
|
@ -88,7 +90,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
</div>
|
||||
|
||||
<div class="floating-header-section">
|
||||
<h2><?php _e( 'Coding Enhancements' ); ?></h2>
|
||||
<div class="section-header">
|
||||
<h2><?php _e( 'Coding Enhancements' ); ?></h2>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
|
|
@ -116,7 +120,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
</div>
|
||||
|
||||
<div class="floating-header-section">
|
||||
<h2><?php _e( 'Even More Widget Updates' ); ?></h2>
|
||||
<div class="section-header">
|
||||
<h2><?php _e( 'Even More Widget Updates' ); ?></h2>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
|
|
@ -137,7 +143,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
</div>
|
||||
|
||||
<div class="floating-header-section">
|
||||
<h2><?php _e( 'Site Building Improvements' ); ?></h2>
|
||||
<div class="section-header">
|
||||
<h2><?php _e( 'Site Building Improvements' ); ?></h2>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-item">
|
||||
|
|
@ -242,34 +250,84 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
|||
offset += $adminbar.height();
|
||||
}
|
||||
|
||||
var adjustScrollClass = _.throttle( function adjustScrollClass() {
|
||||
function setup() {
|
||||
$sections.each( function( i, section ) {
|
||||
var $section = $( section );
|
||||
// Set width on header to prevent column jump
|
||||
var $header = $section.find('.section-header');
|
||||
$header.css( {
|
||||
width: $header.innerWidth() + 'px'
|
||||
} );
|
||||
|
||||
// If the title is long, switch the layout
|
||||
var $title = $section.find( 'h2' );
|
||||
if ( $title.innerWidth() > 300 ) {
|
||||
$section.addClass( 'has-long-title' );
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
var adjustScrollPosition = _.throttle( function adjustScrollPosition() {
|
||||
$sections.each( function( i, section ) {
|
||||
var $section = $( section );
|
||||
var $header = $section.find( 'h2' );
|
||||
var width = $header.innerWidth();
|
||||
var height = $header.innerHeight();
|
||||
|
||||
if ( $section.hasClass( 'has-long-title' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var sectionStart = $section.offset().top - offset;
|
||||
var sectionEnd = sectionStart + $section.innerHeight() - 60;
|
||||
var sectionEnd = sectionStart + $section.innerHeight();
|
||||
var scrollPos = $window.scrollTop();
|
||||
|
||||
// If we're scrolled into a section, stick the header
|
||||
if ( $window.scrollTop() >= sectionStart && $window.scrollTop() < sectionEnd ) {
|
||||
$header.addClass( 'header-fixed' );
|
||||
$header.css( { top: offset + 'px', width: width + 'px' } );
|
||||
if ( scrollPos >= sectionStart && scrollPos < sectionEnd - height ) {
|
||||
$header.css( {
|
||||
position: 'fixed',
|
||||
top: offset + 'px',
|
||||
bottom: 'auto',
|
||||
width: width + 'px'
|
||||
} );
|
||||
// If we're at the end of the section, stick the header to the bottom
|
||||
} else if ( scrollPos >= sectionEnd - height && scrollPos < sectionEnd ) {
|
||||
$header.css( {
|
||||
position: 'absolute',
|
||||
top: 'auto',
|
||||
bottom: 0,
|
||||
width: width + 'px'
|
||||
} );
|
||||
// Unstick the header
|
||||
} else {
|
||||
$header.removeClass( 'header-fixed' );
|
||||
$header.css( { top: 0, width: 'auto' } );
|
||||
$header.css( {
|
||||
position: 'static',
|
||||
top: 'auto',
|
||||
bottom: 'auto',
|
||||
width: 'auto'
|
||||
} );
|
||||
}
|
||||
} );
|
||||
}, 100 );
|
||||
|
||||
function enableFixedHeaders() {
|
||||
if ( $window.width() > 782 ) {
|
||||
adjustScrollClass();
|
||||
$window.on( 'scroll', adjustScrollClass );
|
||||
setup();
|
||||
adjustScrollPosition();
|
||||
$window.on( 'scroll', adjustScrollPosition );
|
||||
} else {
|
||||
$window.off( 'scroll', adjustScrollClass );
|
||||
$window.off( 'scroll', adjustScrollPosition );
|
||||
$sections.find( '.section-header' )
|
||||
.css( {
|
||||
width: 'auto'
|
||||
} );
|
||||
$sections.find( 'h2' )
|
||||
.removeClass( 'header-fixed' )
|
||||
.css( { top: 0, width: 'auto' } );
|
||||
.css( {
|
||||
position: 'static',
|
||||
top: 'auto',
|
||||
bottom: 'auto',
|
||||
width: 'auto'
|
||||
} );
|
||||
}
|
||||
}
|
||||
$( window ).resize( enableFixedHeaders );
|
||||
|
|
|
|||
|
|
@ -364,16 +364,15 @@
|
|||
margin: 0 auto 120px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2 {
|
||||
.about-wrap .floating-header-section .section-header {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .header-fixed {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
.about-wrap .floating-header-section h2 {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
|
|
@ -396,6 +395,27 @@
|
|||
grid-column: 2;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title {
|
||||
-ms-grid-columns: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 60px 0;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-content {
|
||||
-ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px);
|
||||
grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px);
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-item {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-header,
|
||||
.about-wrap .floating-header-section.has-long-title .section-content {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
3.0 - Credits & Freedoms Pages
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
@ -415,7 +435,7 @@
|
|||
}
|
||||
|
||||
.about-wrap .compact {
|
||||
margin-bottom: 0
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about-wrap .wp-person {
|
||||
|
|
@ -509,7 +529,7 @@
|
|||
grid-gap: 60px 0;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2,
|
||||
.about-wrap .floating-header-section .section-header,
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
|
|
@ -568,6 +588,13 @@
|
|||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2 {
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
-ms-grid-columns: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -577,5 +604,6 @@
|
|||
.about-wrap .floating-header-section .section-content .section-item {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -364,16 +364,15 @@
|
|||
margin: 0 auto 120px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2 {
|
||||
.about-wrap .floating-header-section .section-header {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .header-fixed {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
.about-wrap .floating-header-section h2 {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
|
|
@ -396,6 +395,27 @@
|
|||
grid-column: 2;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title {
|
||||
-ms-grid-columns: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 60px 0;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-content {
|
||||
-ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px);
|
||||
grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px);
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-item {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section.has-long-title .section-header,
|
||||
.about-wrap .floating-header-section.has-long-title .section-content {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
/*------------------------------------------------------------------------------
|
||||
3.0 - Credits & Freedoms Pages
|
||||
------------------------------------------------------------------------------*/
|
||||
|
|
@ -415,7 +435,7 @@
|
|||
}
|
||||
|
||||
.about-wrap .compact {
|
||||
margin-bottom: 0
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about-wrap .wp-person {
|
||||
|
|
@ -509,7 +529,7 @@
|
|||
grid-gap: 60px 0;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2,
|
||||
.about-wrap .floating-header-section .section-header,
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
|
|
@ -568,6 +588,13 @@
|
|||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section h2 {
|
||||
word-break: break-all;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.about-wrap .floating-header-section .section-content {
|
||||
-ms-grid-columns: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -577,5 +604,6 @@
|
|||
.about-wrap .floating-header-section .section-content .section-item {
|
||||
-ms-grid-column: 1;
|
||||
grid-column: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.0-alpha-42171';
|
||||
$wp_version = '5.0-alpha-42173';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue