diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index a24745d1df..496cb4e78d 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -53,7 +53,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
-

+
+

+
@@ -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%; } }