-
Notifications
You must be signed in to change notification settings - Fork 116
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
Implemented Customized Scrollbar Feature #333
base: master
Are you sure you want to change the base?
Implemented Customized Scrollbar Feature #333
Conversation
In response to user feedback, this commit addresses the spacing concerns within the GetNighthawk website's UI. The existing design was visually appealing but lacked sufficient spacing between certain components. Changes Made: - Added margin-bottom to the analysis, distribution, and standards-based cards to create a clear distinction between them and improve readability. - Introduced appropriate spacing between the 'Nighthawk & Meshery' section and the 'Layer 7 Performance Analysis' division to enhance the overall visual balance. These adjustments have been carefully implemented to maintain the smooth and polished UI while ensuring a more comfortable viewing experience for users. The improved spacing creates a harmonious layout, allowing each component to breathe and stand out effectively. Resolves Issue: layer5io#290 Signed-off-by: Akhilender akhilenderb9@gmail.com Signed-off-by: Akhilender <akhilenderb9@gmail.com>
Refactored the CSS code to introduce a custom scrollbar consistent with modern design trends. The new scrollbar design aligns with the desired appearance, replacing the default one. Changes Made: - Added custom scrollbar CSS rules. - Removed the default scrollbar appearance. These adjustments have been carefully implemented to maintain the smooth and polished UI. Resolves Issue: layer5io#327 Signed-off-by: Akhilender <akhilenderb9@gmail.com>
In response to user feedback, this commit addresses the spacing concerns within the GetNighthawk website's UI. The existing design was visually appealing but lacked sufficient spacing between certain components. Changes Made: - Added margin-bottom to the analysis, distribution, and standards-based cards to create a clear distinction between them and improve readability. - Introduced appropriate spacing between the 'Nighthawk & Meshery' section and the 'Layer 7 Performance Analysis' division to enhance the overall visual balance. These adjustments have been carefully implemented to maintain the smooth and polished UI while ensuring a more comfortable viewing experience for users. The improved spacing creates a harmonious layout, allowing each component to breathe and stand out effectively. Resolves Issue: layer5io#290 Signed-off-by: Akhilender <akhilenderb9@gmail.com>
Refactored the CSS code to introduce a custom scrollbar consistent with modern design trends. The new scrollbar design aligns with the desired appearance, replacing the default one. Changes Made: - Added custom scrollbar CSS rules. - Removed the default scrollbar appearance. These adjustments have been carefully implemented to maintain the smooth and polished UI. Resolves Issue: layer5io#327 Signed-off-by: Akhilender <akhilenderb9@gmail.com>
✅ Website preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
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.
Have this type of styling on the scrollbar to keep it in Sync for all websites
Reference: Layer5.io
…ighthawk into customscrollbar
- Made the required changes for the custom scrollbar to be in sync with remaining all websites of Layer5 Organization. Signed-off-by: Akhilender <akhilenderb9@gmail.com>
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.
Change
::-webkit-scrollbar-thumb:hover { background: rgb(85, 91, 102); }
to
::-webkit-scrollbar-thumb:hover { background: rgb(85, 85, 85); }
Other things for the scrollbar are as required Great job🚀!
Signed-off-by: Akhilender <akhilenderb9@gmail.com>
Sure @malaviya-parth. Thank you : ) ... |
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.
The code for scrollbar in docs/_sass/getnighthawk.scss
differs from the one you defined in docs/_sass/layout.scss
either remove the scrollbar code from docs/_sass/getnighthawk.scss
if this doesn't work then make it the same to the one in docs/_sass/layout.scss
.
Also the margin changes was not defined in the issue, so I guess we should it as it was originally.
Signed-off-by: Akhilender Bongirwar <112749383+akhilender-bongirwar@users.noreply.github.com>
Removed the extra spacing code form the issue customscrollbar. Signed-off-by: Akhilender Bongirwar <112749383+akhilender-bongirwar@users.noreply.github.com>
@malaviya-parth, Could you please review the changes. |
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.
LGTM🚀
@malaviya-parth , Could you please merge the PR : ) |
I can't as I am currently don't hold that position, but don't worry after the discussion in the meeting, Maintainers will merge it. |
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.
LGTM.
Thanks for this @akhilender-bongirwar
LGTM 👍 |
// @Mohith234 |
@leecalcote ^^ |
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.
LGTM Thanks!
Description
Refactored the CSS code to introduce a custom scrollbar consistent with modern design trends. The new scrollbar design aligns with the desired appearance, replacing the default one.
Changes Made:
These adjustments have been carefully implemented to maintain the smooth
and polished UI.
This PR fixes #327
Notes for Reviewers
Signed commits