Changeset 42173

Timestamp:

11/13/2017 10:28:20 PM (7 years ago)

Author:

westonruter

Message:

About: Fix jumping behavior for titles and columns when scrolling.

Props ryelle.
See #42087.
Fixes #42514, #42526.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (5 diffs)
• css/about.css (modified) (6 diffs)

trunk/src/wp-admin/about.php

@@ -54 +54 @@
 
         <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">
@@ -89 +91 @@
 
         <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">
@@ -117 +121 @@
 
         <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">
@@ -138 +144 @@
 
         <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">
@@ -243 +251 @@
                 }
 
-                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'
+                            } );
                     }
                 }

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

@@ -365 +365 @@
 }
 
-.about-wrap .floating-header-section h2 {
+.about-wrap .floating-header-section .section-header {
     -ms-grid-column: 1;
     grid-column: 1;
+    position: relative;
+}
+
+.about-wrap .floating-header-section h2 {
+    margin: 0;
     text-align: left;
-    margin: 0;
-}
-
-.about-wrap .floating-header-section .header-fixed {
-    position: fixed;
-    width: 300px;
 }
 
@@ -397 +396 @@
 }
 
+.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
@@ -416 +436 @@
 
 .about-wrap .compact {
-    margin-bottom: 0
+    margin-bottom: 0;
 }
 
@@ -510 +530 @@
     }
 
-    .about-wrap .floating-header-section h2,
+    .about-wrap .floating-header-section .section-header,
     .about-wrap .floating-header-section .section-content {
         -ms-grid-column: 1;
@@ -569 +589 @@
     }
 
+    .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;
@@ -578 +605 @@
         -ms-grid-column: 1;
         grid-column: 1;
-    }
-}
+        max-width: 100%;
+    }
+}