WordPress.org

Make WordPress Core

Ticket #51631: 51631.4.diff

File 51631.4.diff, 1.7 KB (added by maxpertici, 8 months ago)

footer sticky + js shift on focus

  • src/js/_enqueues/lib/nav-menu.js

    diff --git a/src/js/_enqueues/lib/nav-menu.js b/src/js/_enqueues/lib/nav-menu.js
    index 03da8bc65b..aebad2d242 100644
    a b  
    13311331
    13321332        };
    13331333
    1334         $(document).ready(function(){ wpNavMenu.init(); });
     1334        $(document).ready(function(){
     1335               
     1336                wpNavMenu.init();
     1337
     1338                // Prevent element focused to be hidden by the sticky footer
     1339                $('.menu-edit a, .menu-edit button, .menu-edit input, .menu-edit textarea, .menu-edit select').on('focus',function(e){
     1340                        if( window.innerWidth  >= 783 ){
     1341                               
     1342                                var bottomOffset = $(this).offset().top - ( $(window).scrollTop() + $(window).height() - $(this).height() ) ;
     1343                                if( bottomOffset > 0 ){ bottomOffset = 0 ; }
     1344                                bottomOffset = bottomOffset * -1 ;
     1345
     1346                                if( bottomOffset < 72 ){
     1347                                        scrollTop = $(document).scrollTop();
     1348                                        $(document).scrollTop( scrollTop + ( 72 - bottomOffset ) );
     1349                                }
     1350                        }
     1351                });
     1352       
     1353        });
    13351354
    1336 })(jQuery);
     1355})(jQuery);
     1356 No newline at end of file
  • src/wp-admin/css/nav-menus.css

    diff --git a/src/wp-admin/css/nav-menus.css b/src/wp-admin/css/nav-menus.css
    index e92923d849..d38fc3105d 100644
    a b body.menu-max-depth-11 { min-width: 1280px !important; } 
    891891        }
    892892}
    893893
     894@media only screen and (min-width: 783px) {
     895    @supports (position: sticky) and (scroll-margin-bottom: 130px) {
     896               
     897                #nav-menu-footer {
     898                position: sticky;
     899                                bottom: 0;
     900                                z-index: 10;
     901                                box-shadow: 0 -1px 0 0px #ddd;
     902        }
     903
     904        #save_menu_header {
     905                display: none;
     906        }
     907    }
     908}
     909
    894910@media only screen and (max-width: 768px) {
    895911        /* menu locations */
    896912        #menu-locations-wrap .widefat {