Full-screen panels on small screens #2289
Conversation
Coverage of commit
|
Coverage of commit
|
Coverage of commit
|
Coverage of commit
|
assets/src/components/nav.tsx
Outdated
| <div className="l-nav__nav-bar l-nav__nav-bar--left"> | ||
| <div | ||
| className="l-nav__nav-bar l-nav__nav-bar--left" | ||
| style={{ visibility: navVisibilityStyle }} |
There was a problem hiding this comment.
question: just wondering, why visibility here instead of something like the hidden attribute?
There was a problem hiding this comment.
I was working off of how <MobilePortraitNav/> is implemented, but if you feel like hidden would be more appropriate I could change it.
There was a problem hiding this comment.
Hmm, I feel like I'd need to know why that was chosen in <MobilePortraitNav/> originally. Using hidden instead of visibility would change the way it works(visibility: visible keeps the element taking up layout space, where hidden does display: none), and I'm not sure if there are assumptions else where that require that. But I would prefer hidden in both cases if there are no issues.
There was a problem hiding this comment.
It seems like using `hidden`` would work? #1719 (comment)
There was a problem hiding this comment.
I'll play around with it a bit and see if there are any drawbacks to hidden.
There was a problem hiding this comment.
Okay I don't see any drawbacks to hidden. Is it okay if I use hidden here but leave <MobilePortraitNav/> be for now?
Co-authored-by: Kayla Firestack <[email protected]>
Coverage of commit
|
Coverage of commit
|
Asana ticket: ⚙️ Views or panels should be full screen for < 800px
There were a couple of places that referenced a breakpoint of 480px from the old breakpoint variables, but I updated them to point to the new one because the new breakpoint was actually the relevant one for that context (the thing that determines which breakpoint the CSS should apply at is based on the
useScreenSizebreakpoints).I followed the same pattern as with the mobile portrait nav where the nav components are explicitly hidden when a view is opened over them - for one thing the order of the z-indexes isn't right to have the panel go on top of the nav and switching them around causes issues (the drop shadow of some panels bleeds out over the top nav on desktop).