8000 [ENHANCEMENT] Reduce navbars size by AntoineThebaud · Pull Request #1492 · perses/perses · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[ENHANCEMENT] Reduce navbars size #1492

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

Merged
merged 1 commit into from
Oct 20, 2023
Merged

Conversation

AntoineThebaud
Copy link
Contributor
@AntoineThebaud AntoineThebaud commented Oct 19, 2023

Description

Reduce the size of the various navbars (top one, the one with breadcrumb & timerange controls in read mode, the one with variables dropdowns & timerange controls in edit mode, also the sticky version of the latter) to spare vertical space for the dashboard content.

Screenshots

before/after comparison:

image

image

2023-10-20_07h42_22

Checklist

  • Pull request has a descriptive 8000 title and context useful to a reviewer.
  • Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, IGNORE.
  • All commits have DCO signoffs.

UI Changes

  • Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
  • Code follows the UI guidelines.
  • Visual tests are stable and unlikely to be flaky. See Storybook and e2e docs for more details. Common issues include:
    • Is the data inconsistent? You need to mock API requests.
    • Does the time change? You need to use consistent time values or mock time utilities.
    • Does it have loading states? You need to wait for loading to complete.

@AntoineThebaud AntoineThebaud force-pushed the antoinethebaud/reduce-navb-h branch from 64a4724 to 7d48c7c Compare October 19, 2023 13:20
@AntoineThebaud AntoineThebaud marked this pull request as ready for review October 19, 2023 13:35
'&': {
minHeight: '40px',
paddingLeft: 0,
paddingRight: 0.75,
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
paddingRight: 0.75,
paddingRight: 2,

In order to have the same padding as "body" content

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah ok it's a matter of either having the button zone aligned with the rest (padding 2)
image
or with the slider itself (padding 0.75)
image

Personally I have a slight preference for the 2nd one even it looks a bit like a hack here I agree :D.

Copy link
Member
@Gladorme Gladorme Oct 19, 2023

Choose a reason for hiding this comment

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

This hover effect size is pretty annoying, ok for me

@Gladorme
Copy link
Member
Gladorme commented Oct 19, 2023

I think, we could also remove the paddingTop of perses/ui/dashboards/src/components/DashboardToolbar/DashboardToolbar:tsx at ligne 119

Signed-off-by: Antoine THEBAUD <antoine.thebaud@yahoo.fr>
@AntoineThebaud AntoineThebaud force-pushed the antoinethebaud/reduce-navb-h branch from 7d48c7c to f574553 Compare October 19, 2023 14:29
Copy link
Member
@Nexucis Nexucis left a comment

Choose a reason for hiding this comment

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

nice !

@Nexucis
Copy link
Member
Nexucis commented Oct 19, 2023

by the way does it reduce the navbar size of the variable ?

@AntoineThebaud
Copy link
Contributor Author

by the way does it reduce the navbar size of the variable ?

You mean the sticky bar I assume? Then yes, actually my bad I forgot to put a screenshot for this one, you can see one now in the PR description.

@nicolastakashi
Copy link
Collaborator

Much much better 🥳

@AntoineThebaud AntoineThebaud merged commit c8967fb into main Oct 20, 2023
@AntoineThebaud AntoineThebaud deleted the antoinethebaud/reduce-navb-h branch October 20, 2023 09:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants
0