frontend: Fix visibility of Sidebar Elements and Navigation Tabs #1720
Conversation
Signed-off-by: Mariusz Winnik <[email protected]>
tazo90
force-pushed
the
fix/1719-sidebar-and-topbar-mobile-fixes
branch
from
ea4c0dd
to
63c60b4
Compare
…topbar-mobile-fixes
Signed-off-by: Mariusz Winnik <[email protected]>
tazo90
force-pushed
the
fix/1719-sidebar-and-topbar-mobile-fixes
branch
from
830a907
to
bba6366
Compare
Signed-off-by: Mariusz Winnik <[email protected]>
tazo90
force-pushed
the
fix/1719-sidebar-and-topbar-mobile-fixes
branch
from
bdbd6b5
to
e500d42
Compare
|
Hey @tazo90 , thanks for this PR. I have noticed that the logo looks broken with it though (maybe due to the updates we had in the meanwhile): I will review the code now. |
There was a problem hiding this comment.
Thanks again @tazo90 . I left some comments on how to improve this PR.
| @@ -31,6 +31,7 @@ import VersionButton from './VersionButton'; | |||
| export const drawerWidth = 240; | |||
| export const mobileDrawerWidth = 320; | |||
| export const drawerWidthClosed = 64; | |||
| export const topBarHeight = 64; | |||
There was a problem hiding this comment.
The problem is that the sidebar is set from the top of the screen, without having the toolbar before it.
A more future-proof way of fixing this issue is to see what the normal case is doing: Adding a Box with the toolbar style mixin (look for the use of the toolbar class).
There was a problem hiding this comment.
This merge commit should be avoided by rebasing your changes + solving the conflicts.
There was a problem hiding this comment.
Snapshots should be added to the commits that introduce them (this avoids e.g. bisecting into a commit that doesn't test correctly because the snapshot is missing).
There was a problem hiding this comment.
We no longer have the frequent namespace. Only glossary + translation (default).
|
@tazo90 , have you had any more time to work on this? Really excited for this PR to get in so that headlamp is usable on mobile for me |
This PR fixes #1719 .
Problem 1: Sidebar elements not visible
Before:
After:
Problem 2: Invisible Navigation Tabs
Before:
After:
