@@ -88,7 +90,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
+
+
+
@@ -116,7 +120,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
+
+
+
@@ -137,7 +143,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-
+
+
+
@@ -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 );
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index e38cd10bb8..4ff91c7755 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -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%;
}
}