WordPress.org

Make WordPress Core

Ticket #42526: 42526.diff

File 42526.diff, 6.4 KB (added by ryelle, 3 years ago)
  • src/wp-admin/about.php

     
    5353                </div>
    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">
    5961                                <div class="section-item">
     
    8890                </div>
    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">
    9498                                <div class="section-item">
     
    116120                </div>
    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">
    122128                                <div class="section-item">
     
    137143                </div>
    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">
    143151                                <div class="section-item">
     
    242250                                        offset += $adminbar.height();
    243251                                }
    244252
    245                                 var adjustScrollClass = _.throttle( function adjustScrollClass() {
     253                                function setup() {
    246254                                        $sections.each( function( i, section ) {
    247255                                                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() {
     271                                        $sections.each( function( i, section ) {
     272                                                var $section = $( section );
    248273                                                var $header = $section.find( 'h2' );
    249274                                                var width = $header.innerWidth();
     275                                                var height = $header.innerHeight();
    250276
     277                                                if ( $section.hasClass( 'has-long-title' ) ) {
     278                                                        return;
     279                                                }
     280
    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                                }
    275333                                $( window ).resize( enableFixedHeaders );
  • src/wp-admin/css/about.css

     
    364364        margin: 0 auto 120px;
    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         text-align: left;
    371         margin: 0;
     370        position: relative;
    372371}
    373372
    374 .about-wrap .floating-header-section .header-fixed {
    375         position: fixed;
    376         width: 300px;
     373.about-wrap .floating-header-section h2 {
     374        margin: 0;
     375        text-align: left;
    377376}
    378377
    379378.about-wrap .floating-header-section .section-content {
     
    396395        grid-column: 2;
    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
    401421------------------------------------------------------------------------------*/
     
    415435}
    416436
    417437.about-wrap .compact {
    418         margin-bottom: 0
     438        margin-bottom: 0;
    419439}
    420440
    421441.about-wrap .wp-person {
     
    509529                grid-gap: 60px 0;
    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;
    515535                grid-column: 1;
     
    577597        .about-wrap .floating-header-section .section-content .section-item {
    578598                -ms-grid-column: 1;
    579599                grid-column: 1;
     600                max-width: 100%;
    580601        }
    581602}