sts-sponsors team mailing list archive
-
sts-sponsors team
-
Mailing list archive
-
Message #07615
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
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;
Follow ups
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: MAAS Lander, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
Re: [Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Nick De Villiers, 2023-04-26
-
Re: [UNITTESTS] -b fix-mobile-nav lp:~petermakowski/maas-site-manager/+git/site-manager into -b main lp:~maas-committers/maas-site-manager - TESTS PASS
From: MAAS Lander, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
Re: [UNITTESTS] -b fix-mobile-nav lp:~petermakowski/maas-site-manager/+git/site-manager into -b main lp:~maas-committers/maas-site-manager - TESTS PASS
From: MAAS Lander, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26
-
[Merge] ~petermakowski/maas-site-manager:fix-mobile-nav into maas-site-manager:main
From: Peter Makowski, 2023-04-26