-
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement dashboard layout #13
Conversation
@@ -3,6 +3,13 @@ | |||
"parserOptions": { | |||
"project": "./tsconfig.json" | |||
}, | |||
"settings": { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It allows ESLint plugin to resolve path alias
user: UserInfo | ||
} | ||
|
||
export const User = ({ user }: UserProps) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Composed out of design system components, but can't be design system itself, because different projects might require different user options
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #13 +/- ##
===========================================
+ Coverage 50.14% 61.47% +11.34%
===========================================
Files 51 73 +22
Lines 359 558 +199
Branches 51 90 +39
===========================================
+ Hits 180 343 +163
- Misses 171 204 +33
- Partials 8 11 +3
Continue to review full report in Codecov by Sentry.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<span className="interactive-opacity w-full px-2 pt-4 text-center"> | ||
Logo | ||
</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Logos might look differently depending on the logo, so leaving it up to user-land
<span className="interactive-opacity w-full px-2 pt-4 text-center"> | ||
Logo | ||
</span> | ||
<nav className="mt-24 flex flex-col gap-1 xl:w-full">{menuLinks}</nav> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here, some apps might have nested menus and stuff, leaving it up to user-land
34605f2
to
5ef0cff
Compare
ee90d7d
to
3f16460
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for all the work here @arkadiuszbachorski; I only had a few smaller layout suggestions but those might be easy to address. The individual components look great, thanks for getting them into place and adapting them to our project.
const user = <User user={getUserInfo(currentUser)} /> | ||
|
||
return ( | ||
<DashboardLayoutBase |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That is very cool. Thank you for the outline.
I have a few high-level feedbacks on the UI components:
- Would be good to move this closer to the top, maybe below the horizontal title line with some small padding?
- I have the feeling this main bar has a bit too much vertical (and maybe slightly horizontal) spacing, might be cool to explore how this can be reduced a bit, e.g. taking the GitHub Main Bar as some inspiration.
- I would suggest making the sidebar a bit wider in its expanded form. It might be a bit of a bias, but it would be great if my name would fit without truncation 😄
I have also encountered a small bug:
- Resize the browser to go into the mobile view
- Open the menu in the view by pressing the hamburger menu
- Resize the view again to its full size: The menu stays open, but the button to dismiss it disappears. The expected behavior would be to show the normal navigation menu size instead; there might be some state handling here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Would be good to move this closer to the top, maybe below the horizontal title line with some small padding?
Sure, that works too.
- I have the feeling this main bar has a bit too much vertical (and maybe slightly horizontal) spacing, might be cool to explore how this can be reduced a bit, e.g. taking the GitHub Main Bar as some inspiration.
Header bar is just mostly empty for now. It can contain way more, like action button, search input, controls, tabs, breadcrumbs. I think your feeling might be caused because of it's current emptiness. When you compare it against GitHub Main bar, it's way more crowded, but at the same GH's bar is even more vertical (86px ours vs 106px GH). I'd keep as is for now and possibly iterate later if needed.
- I would suggest making the sidebar a bit wider in its expanded form. It might be a bit of a bias, but it would be great if my name would fit without truncation 😄
Mine doesn't fit either 😄 It's not easy to fit our names! I would love not to expand sidebar more, because it's going to occupy more working space.
I played around making dashboard more compact in general. Let me know what you think
Make Dashboard more compact
I was very generous with white space, but more compact design is more universal.
I have also encountered a small bug
Fixed, thanks for catching it. It was actually caused by design system vs app classes clash. I might resolve it different way in the future, but for now this is ok. Fix classes clash
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for looking at all of this! Will check this out later today but feel free to merge the PR if you feel comfortable in merging it before 👍
116fe7e
to
024e9f2
Compare
Implement dashboard layout
♻️ Current situation & Problem
Dashboard needs layout with accessible navigation and profile settings.
⚙️ Release Notes
Avatar
,Tooltip
,DropdownMenu
,Table
,DataTable
componentsNil
,useOpenState
and other utilitiesTable
andDataTable
are pretty basic for now, they'll grow according to our future needs.Code of Conduct & Contributing Guidelines
By submitting creating this pull request, you agree to follow our Code of Conduct and Contributing Guidelines: