Update the results information bar in global search to be more clear in what it represents
Problem to solve
As we move the content type/scope filters to the left sidebar in Global Search (#293740 (closed)), the Results Information (image below) needs relocated so that it is contextual to the results and clear that the information is based off any filter selections (both content types and other filters) that have been made.
In addition, we want to draw greater attention to the content type ("Issues" in the example above) that is selected, as this can be pre-applied based on where the user searched from when using the navbar search field.
Proposal
Moving the Results Information to be within the same container as search-results (above the result list) will help in visually associating the Results Information to the results that have come back based on selections. This also places the Results Information after the filters in the DOM, which helps from an architecture and hierarchy standpoint to better order the elements on the page and show their relationship.
To draw more attention to the selected content type, we can increase the main Results Information to be an H3 which will help elevate these details. Simplifying and breaking the information down a bit can also assist with this. We can remove the repetitive portion of restating the search query, as well as move the "Showing X - Y" information to be next to our view options (Sorting) – see designs below.
| before |  |
| after |  |
Implementation Guide
-
Move the current results overview information (Ex: "Showing 1-20 of X issues...") to within the main results container (above the result listing) -
Update the results overview information to put more prominence on the content type selected (see design) -
Make the "9,324 issues in project GitLab.org / GitLab" information a H3 -
Break out the "Showing X-Y" information and move it next to the sort options (when sort is present) or far right (when sort isn't present) -
Ensure this is also applied to Basic search
-