Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[UI]: Add Dashboard responsiveness #10980

Draft
wants to merge 9 commits into
base: master
Choose a base branch
from
Draft

[UI]: Add Dashboard responsiveness #10980

wants to merge 9 commits into from

Conversation

dottharun
Copy link
Contributor

@dottharun dottharun commented May 16, 2024 •
edited

Notes for Reviewers

This PR adds responsiveness to Dashboard UI

Progress

  • Overview Tab.
  • Kubernetes Tabs.
  • Adjust dashboard gutters/padding.

Side effects fix:

  • Tool bar overflow in designs page.
  • Fixed-size patterns loading screen for designs page.
  • ActionModals cutoff issue.
  • Flip Card width issue.
  • InfoModal Grid correction.
  • Configurator Toolbar aligment fix.

Note:

  • Input on design and styling are welcome

image

image

image

Signed commits

  • Yes, I signed my commits.

@github-actions github-actions bot added the component/ui User Interface label May 16, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented May 16, 2024 •
edited

leecalcote
leecalcote reviewed May 17, 2024
View reviewed changes
Copy link
Member

@leecalcote leecalcote left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dottharun this is looking good so far.

Charts aside, how are we doing on the Kubernetes dashboards?

Is this still a draft or are you ready for review?

@leecalcote
Copy link
Member

@dottharun this is looking good so far.

Charts aside, how are we doing on the Kubernetes dashboards?

Is this still a draft or are you ready for review?

@dottharun, are we tossing in the towel here?

@dottharun
Copy link
Contributor Author

Charts aside, how are we doing on the Kubernetes dashboards?

Is this still a draft or are you ready for review?

@leecalcote
Yes, Now fixed the issue.

resp_demo-2024-05-23_11.07.01.mp4

@dottharun dottharun marked this pull request as ready for review May 23, 2024 05:53
@leecalcote
Copy link
Member

@sudhanshutech have you reviewed?

leecalcote
leecalcote previously approved these changes May 23, 2024
View reviewed changes
Copy link
Member

@leecalcote leecalcote left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

leecalcote
leecalcote reviewed May 23, 2024
View reviewed changes
ui/themes/app.js Outdated
@@ -614,10 +614,18 @@ export const styles = (theme) => ({
flex: 1,
display: 'flex',
flexDirection: 'column',
[theme.breakpoints.up('sm')]: {
width: `60%`,
overflowX: 'clip',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dottharun, confirm that no other page is negatively affected by these broad-sweeping changes, please.

Copy link
Contributor Author

@dottharun dottharun May 23, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes.

  • It does break the CSS on other pages, but only when the width is under 600px.
  • This needs to be fixed later for an easier path to responsiveness.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i didn't understand @dottharun , there is issue when using this breakpoint on other page right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes.

  • Now resolved 2 side-effects caused on other pages.
  • Nothing more I could find caused by this PR.

@dottharun dottharun force-pushed the fix/dashboard/reponsiveness branch from 935ffad to ae5c933 Compare May 29, 2024 11:30
@leecalcote
Copy link
Member

Ready for another review.

@dottharun dottharun force-pushed the fix/dashboard/reponsiveness branch 2 times, most recently from 067993a to 270354b Compare May 31, 2024 18:08
@dottharun
Copy link
Contributor Author

Ready for another review.

Latest Demo after the fixes in the designs page:

respy_design_demo-2024-05-31_23.55.05.mp4

dragon-slayer875
dragon-slayer875 requested changes Jun 5, 2024
View reviewed changes
Copy link
Contributor

@dragon-slayer875 dragon-slayer875 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dottharun please update the PR with the changes regarding padding.
If you need help let me know so that we get this merged quickly. 😁

@dottharun
fix(ui): dashboard responsiveness - Overview
d41dc07 
Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): kubernetes-dashboard responsiveness
2f89b29 
- padding fix in resourceSubTab

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): remove side effects from App css
a5a093c 
- use rem values
- fix patternLoadingScreen
- fix toolbarOverflow in designs page

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): Fix designs page toolbar overflow
1e89bfc 
- by reducing size of buttons
- and removing transition from search

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): adjust padding for reponsiveness
e9ca91a 
- fix grid collapse of dashboard overview
- fix padding in overrall app's mainContent
- fix padding in settings/registry-tabs

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): ActionModals cutoff issue in mobile
3576121 
- by wrapping the modals with a Box with breakpoint widths

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): flipCard width in mobile
f25f989 
Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun dottharun force-pushed the fix/dashboard/reponsiveness branch from 270354b to f25f989 Compare June 5, 2024 12:18
@dottharun
fix(ui): InfoModal Grid correction in Mobile
553534a 
Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
fix(ui): designConfigurator toolbor alignment fix
3af8cf3 
- for mobile

Signed-off-by: Tharun T <tharun242424@gmail.com>
@dottharun
Copy link
Contributor Author

Latest demo after updating padding and modal issues in designs page:

respy_pad_mod_demo-2024-06-05_19.16.42.mp4

@dottharun dottharun marked this pull request as draft June 11, 2024 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@leecalcote leecalcote leecalcote left review comments

@dragon-slayer875 dragon-slayer875 dragon-slayer875 requested changes

@sudhanshutech sudhanshutech Awaiting requested review from sudhanshutech

@captain-Akshay captain-Akshay Awaiting requested review from captain-Akshay

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
component/ui User Interface
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@dottharun @leecalcote @dragon-slayer875 @sudhanshutech