Make WordPress Core

Changeset 42174


Ignore:
Timestamp:
11/13/2017 10:29:28 PM (7 years ago)
Author:
westonruter
Message:

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

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

Location:
branches/4.9
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • branches/4.9

  • branches/4.9/src/wp-admin/about.php

    r42160 r42174  
    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">
     
    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">
     
    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">
     
    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">
     
    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                }
  • branches/4.9/src/wp-admin/css/about.css

    r42162 r42174  
    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    position: relative;
     371}
     372
     373.about-wrap .floating-header-section h2 {
     374    margin: 0;
    370375    text-align: left;
    371     margin: 0;
    372 }
    373 
    374 .about-wrap .floating-header-section .header-fixed {
    375     position: fixed;
    376     width: 300px;
    377376}
    378377
     
    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
     
    416436
    417437.about-wrap .compact {
    418     margin-bottom: 0
     438    margin-bottom: 0;
    419439}
    420440
     
    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;
     
    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;
     
    578605        -ms-grid-column: 1;
    579606        grid-column: 1;
    580     }
    581 }
     607        max-width: 100%;
     608    }
     609}
Note: See TracChangeset for help on using the changeset viewer.