refactor: relocate and redesign search bar in dataset and proposal pages
Description
This PR relocates the search bar into the dynamic-mat-table header with improved styling.
Dataset page:
Proposal page:
Search bar when writing:
Motivation
- https://jira.ess.eu/browse/SWAP-5061
Fixes:
Please provide a list of the fixes implemented in this PR
- Items added
Changes:
Please provide a list of the changes implemented by this PR
- changes made
Tests included
- [ ] Included for each change/fix?
- [ ] Passing? (Merge will not be approved unless this is checked)
Documentation
- [ ] swagger documentation updated [required]
- [ ] official documentation updated [nice-to-have]
official documentation info
If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included
Backend version
- [ ] Does it require a specific version of the backend
- which version of the backend is required:
Summary by Sourcery
Relocate and redesign the global search bar by embedding it within the dynamic material table header on both dataset and proposal pages, revamp layout and styling of dashboard and table header controls, and wire up new search event handling in table components.
New Features:
- Relocate global text search into the dynamic material table header with dedicated input, clear, and apply controls
- Expose globalTextSearch inputs and outputs on dataset and proposal table components to handle search state and actions
Enhancements:
- Refactor dataset dashboard layout by introducing .dashboard-main and .dashboard-header wrappers and reorganizing action and table columns
- Redesign search input styling with rounded borders, focused state shadows, and inline paginator alignment in table headers
- Update default placeholder text for proposal table global search
Chores:
- Adjust top offset of proposal sidebar filter panel and remove unused margin in dataset filter
Please double check to make sure no obvious UI breaks.
Couple of issues I found:
-
searchbar placerholder show
proposal id, title, abstract namein datasets table -
big empty space before the searchbox in proposal table
-
pagination content should be one row instead of two rows
-
search bar is too long, max-width 500px should be more than enough
-
breadcrum is missing bottom line
Before:
After:
I wonder if we can further improve the design, specifically for the datasets list page.
I think we should try to waste less space and condense the elements between the header and the table with the dataset list.
Here is what I have in mind:
We can do this in a following PR.