sts-sponsors team mailing list archive

[Peter Makowski <mp+441918@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main.

Commit message:
fix: secondary navigation on mobile
- hide secondary navigation on mobile
- simplify stylesheet declarations

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/441918

### QA Steps
Open google chrome
Go to MAAS Site Manager
Toggle device toolbar (ctrl/cmd + shift + M)
Choose mobile phone dimensions (e.g. Google Pixel)
Go to /sites and verify that there is no empty space below the primary navigation
Go to /settings
Verify that the secondary navigation is shown

-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main.

diff --git a/frontend/src/components/Navigation/_Navigation.scss b/frontend/src/components/Navigation/_Navigation.scss
index c170d98..4621d21 100644
--- a/frontend/src/components/Navigation/_Navigation.scss
+++ b/frontend/src/components/Navigation/_Navigation.scss
@@ -3,8 +3,10 @@
   &:hover,
   &:focus-within,
   &.is-pinned {
-      grid-area: nav;
+    grid-area: nav;
+    @media only screen and (min-width: ($breakpoint-small + 1)) {
       position: static;
+    }
     .l-navigation__controls {
       opacity: 1;
       visibility: visible;
@@ -45,7 +47,6 @@
   .l-navigation--item-icon {
     margin-right: $sph--small;
   }
-  
 }
 .p-panel.is-dark {
   .p-panel__header {
diff --git a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
index 1533ba7..a8e0e28 100644
--- a/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
+++ b/frontend/src/components/SecondaryNavigation/_SecondaryNavigation.scss
@@ -2,26 +2,25 @@
   transition-duration: 0.165s;
   transition-property: width, box-shadow, background;
   transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  background: #444444;
   width: 0;
+  height: 0;
   visibility: hidden;
 
   &.is-open {
     visibility: visible;
     width: 100%;
+    height: 100%;
     @media (min-width: $breakpoint-small) {
       width: $application-layout--side-nav-width-expanded;
     }
   }
-
-  &,
-  .p-side-navigation__drawer {
-    background: #444444;
-    height: 100%;
-  }
   .p-side-navigation__drawer {
+    background: inherit;
     transform: none;
     position: static;
     max-width: 100%;
+    height: inherit;
   }
   .p-side-navigation__title {
     @extend %vf-heading-4;