Allow custom logos of any height in the admin menu (#4747)

CHANGELOG.txt

@@ -12,6 +12,7 @@ Changelog
  * Fix: Add `rel="noopener noreferrer"` to target blank links (Anselm Bradford)
  * 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)
 
 
 2.3 LTS (23.10.2018)

docs/releases/2.4.rst

@@ -35,6 +35,7 @@ Bug fixes
  * Additional fields on custom document models now show on the multiple document upload view (Robert Rollins, Sergey Fedoseev)
  * 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)
 
 
 Upgrade considerations

wagtail/admin/static_src/wagtailadmin/scss/components/_logo.scss

@@ -24,11 +24,8 @@
 
 .logo {
     display: block;
-    text-align: left;
-    text-decoration: none;
     color: #aaa;
     padding: 0.9em 1.2em;
-    margin: 0;
     -webkit-font-smoothing: auto;
 }
 

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

@@ -10,6 +10,12 @@
 
     .inner {
         background: $nav-grey-1;
+
+        @include medium {
+            // On medium, make it possible for the nav links to scroll.
+            display: flex;
+            flex-flow: column nowrap;
+        }
     }
 }
 
@@ -162,8 +168,10 @@
 
 .nav-search {
     position: relative;
-    padding: 0;
-    margin: 0 1em 1em;
+    padding: 0 1em 1em;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
 
     label {
         @include visuallyhidden();
@@ -203,13 +211,10 @@
         background-color: transparent;
         position: absolute;
         top: 0;
-        right: 0;
+        right: 1em;
         bottom: 0;
-        margin: auto;
         padding: 0;
         width: 3em;
-        height: 100%;
-        overflow: hidden;
 
         &:hover {
             background-color: $nav-item-hover-bg;
@@ -290,11 +295,7 @@ body.explorer-open {
     }
 
     .nav-main {
-        position: absolute;
-        top: 175px; // WARNING - magic number - the height of the logo plus search box
-        bottom: 0;
         margin-bottom: 127px; // WARNING - magic number - the height of the .footer
-        width: 100%;
         overflow: auto;
 
         .footer {