Allow nav menu to take up all available space instead of scrolling (#4746)

CHANGELOG.txt

@@ -17,6 +17,7 @@ Changelog
  * Fix: Additional fields on custom document models now show on the multiple document upload view (Robert Rollins, Sergey Fedoseev)
  * Fix: Help text is partially hidden when using a combination of BooleanField and FieldPanel in page model (Dzianis Sheka)
  * Fix: Allow custom logos of any height in the admin menu (Meteor0id)
+ * Fix: Allow nav menu to take up all available space instead of scrolling (Meteor0id)
  * Fix: Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
 
 

docs/releases/2.4.rst

@@ -40,6 +40,7 @@ Bug fixes
  * Help text does not overflow when using a combination of BooleanField and FieldPanel in page model (Dzianis Sheka)
  * Document chooser now displays more useful help message when there are no documents in Wagtail document library (gmmoraes, Stas Rudakou)
  * Allow custom logos of any height in the admin menu (Meteor0id)
+ * Allow nav menu to take up all available space instead of scrolling (Meteor0id)
  * Users without the edit permission no longer see "Edit" links in list of pages waiting for moderation (Justin Focus, Fedor Selitsky)
  * Redirects now return 404 when destination is unspecified or a page with no site (Hillary Jeffrey)
 

wagtail/admin/static_src/wagtailadmin/js/core.js

@@ -91,7 +91,7 @@ $(function() {
 
     // Enable toggle to open/close user settings
     $(document).on('click', '#account-settings', function() {
-        $('#footer').toggleClass('footer-open');
+        $('.nav-main').toggleClass('nav-main--open-footer');
         $(this).find('em').toggleClass('icon-arrow-down-after icon-arrow-up-after');
     });
 

wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -295,26 +295,34 @@ body.explorer-open {
     }
 
     .nav-main {
-        margin-bottom: 127px; // WARNING - magic number - the height of the .footer
+        $footer-closed-height: 50px;
+        $footer-submenu-height: 77px;
+        $footer-open-height: $footer-closed-height + $footer-submenu-height;
         overflow: auto;
+        margin-bottom: $footer-closed-height;
+        @include transition(margin-bottom 0.2s ease);
 
         .footer {
             position: fixed;
             width: $menu-width;
             bottom: 0;
-        }
-
-        .footer-open .footer-submenu {
-            max-height: 127px; // WARNING - magic number - the height of the .footer
+            background-color: $footer-submenu;
         }
 
         .footer-submenu {
             @include transition(max-height 0.2s ease);
-            background-color: $footer-submenu;
             overflow: hidden;
             max-height: 0;
         }
 
+        &--open-footer {
+            margin-bottom: $footer-open-height;
+
+            .footer-submenu {
+                max-height: $footer-submenu-height;
+            }
+        }
+
         .account {
             @include clearfix;
             background: $footer-account;