Changeset 50115

Timestamp:

01/31/2021 08:09:53 PM (2 years ago)

Author:

joedolson

Message:

Menus: Add sticky footer to avoid duplicate save buttons.

Make the navigation menu footer sticky so a Save Menu button is always available in the viewport. Improves usability and effectiveness of the interface when in a responsive view.

Props garrett-eclipse, audrasjb, maxpertici, sabernhardt, kburgoine, poena
Fixes #51631

Location:

trunk/src

Files:

• js/_enqueues/lib/nav-menu.js (modified) (1 diff)
• wp-admin/css/nav-menus.css (modified) (1 diff)

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

@@ -1332 +1332 @@
     };
 
-    $(document).ready(function(){ wpNavMenu.init(); });
+    $(document).ready(function() {
+
+        wpNavMenu.init();
+
+        // Prevent focused element from being hidden by the sticky footer.
+        $( '.menu-edit a, .menu-edit button, .menu-edit input, .menu-edit textarea, .menu-edit select' ).on('focus', function() {
+            if ( window.innerWidth >= 783 ) {
+                var navMenuHeight = $( '#nav-menu-footer' ).height() + 20;
+                var bottomOffset = $(this).offset().top - ( $(window).scrollTop() + $(window).height() - $(this).height() );
+
+                if ( bottomOffset > 0 ) {
+                    bottomOffset = 0;
+                }
+                bottomOffset = bottomOffset * -1;
+
+                if( bottomOffset < navMenuHeight ) {
+                    var scrollTop = $(document).scrollTop();
+                    $(document).scrollTop( scrollTop + ( navMenuHeight - bottomOffset ) );
+                }
+            }
+        });
+    });
 
 })(jQuery);

trunk/src/wp-admin/css/nav-menus.css

@@ -892 +892 @@
 }
 
+@media only screen and (min-width: 783px) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) and (scroll-margin-bottom: 130px) {
+        
+        #nav-menu-footer {
+                position: -webkit-sticky;
+                position: sticky;
+                bottom: 0;
+                z-index: 10;
+                box-shadow: 0 -1px 0 0px #ddd;
+        }
+
+        #save_menu_header {
+                display: none;
+        }
+    }
+}
+
 @media only screen and (max-width: 768px) {
     /* menu locations */