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.

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

Add responsive search functionality with sticky search bar and navigation #613

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Ryadav0654
Copy link

Title:

feat: add responsive search functionality with sticky search bar and navigation

Linked Issue(s)

fixes: #556

Acceptance Criteria fulfillment

  • Sticky search bar remains at the top of the page as logs are scrolled.
  • Search input field allows searching through logs with matching terms highlighted.
  • Previous and Next buttons allow navigation through highlighted search results.
  • The layout of the search bar and buttons is responsive and adapts to mobile screens.

Proposed changes (including videos or screenshots)

  • Implemented a sticky search bar and navigation buttons that remain visible while scrolling through system logs.
  • Added functionality to highlight matching logs based on search input.
  • Integrated Previous and Next buttons to navigate through the highlighted search results.
  • Applied responsive design: On smaller screens, the search bar and buttons stack vertically for better usability.
  • Created a new search-functionality.css file for styling the search and navigation components, ensuring responsiveness with media queries.
Screencast.from.2024-10-24.11-59-47.webm

Further comments

This change was made to improve the log searching experience within the application, eliminating the need to rely on browser-native search functionality. The sticky search bar ensures the search and navigation controls are always available, while responsive behavior enhances mobile usability.

@jayantbh
Copy link
Contributor

@Ryadav0654 please address the conflicts. Seems trivial enough. :)

@Ryadav0654
Copy link
Author

Ryadav0654 commented Oct 28, 2024

please address the conflicts. Seems trivial enough. :)

resolved

@jayantbh
Copy link
Contributor

Hey @Ryadav0654, please pull these changes into your PR:
457a50b

It's basically some linting fixes + case insensitive search.

@Ryadav0654
Copy link
Author

Hey @Ryadav0654, please pull these changes into your PR: 457a50b

It's basically some linting fixes + case insensitive search.

Done

@jayantbh
Copy link
Contributor

jayantbh commented Nov 6, 2024

@Ryadav0654 there are linting failures. Please fix. You'd want to rebase on main first.

Reterics and others added 4 commits November 7, 2024 09:57
* fix: updated Next to 14.2.16

* fix: updated Next to 15.0.1

* fix: pre-commit hook update for eslint-config-next

* fix: pre-commit hook update for eslint-config-next

* fix: pre-commit hook update for eslint-plugin-react, eslint-plugin-unused-imports
* chore: downgrade axios version

* feat: add count-up hook

* feat: add the count-up animation in Dora Cards

* refactor: update code as per review comment

* fix: linting issue
@Ryadav0654
Copy link
Author

@Ryadav0654 there are linting failures. Please fix. You'd want to rebase on main first.

@jayantbh Thank you for the feedback! I've fixed the linting issues and rebased this branch on the latest main. Could you please review it when you have a moment?

Thanks again!

@jayantbh
Copy link
Contributor

@Ryadav0654 something went wrong with your rebase, and things that aren't a part of your PR are showing up as well.

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.

Search functionality in the system logs UI
4 participants