Moved docs search bar to top navigation in prep for global search. #2262
Conversation
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
3 times, most recently
from
ff16542 to
635c2e6
Compare
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
2 times, most recently
from
690cf57 to
a1bd252
Compare
There was a problem hiding this comment.
This is great work, I'm very happy to see some progress in that area 💚
I've only reviewed the non-CSS changes and found some minor issues.
For the CSS I find it hard to tell the motivation behind some of the changes like the new SVG logo and the change to the breakpoint sizes. Can you explain the motivation behind those, and maybe how you figured out what to change (trial and error, LLM, just your natural expertise 😁 , ...)?
I'll also note that I haven't tested this locally (yet).
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
2 times, most recently
from
eb6bada to
44782b7
Compare
|
Note that I plan to review the scss over the weekend and add some comments to explain what things are 👍 |
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
from
44782b7 to
6c42c5a
Compare
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
from
6c42c5a to
6340f0c
Compare
sarahboyce
force-pushed
the
add-search-bar-everywhere
branch
from
6340f0c to
d67809e
Compare
There was a problem hiding this comment.
I have added some commentary to the scss updates.
I have roughly tried to acheive something that looks reasonable on multiple screen sizes
Most updates are around having vertical alignment of header items and tweaking margin
I am not a css expert. I tried to remove things I deemed as unneeded (from testing) . Happy for any comments around better ways to achieve a "good enough" header
There was a problem hiding this comment.
This is used in the header for mobile screens to give enough room for the searchbar
| align-items: center; | ||
|
|
||
| @include respond-min(768px) { | ||
| @include respond-min(1080px) { |
There was a problem hiding this comment.
I have updated the point where the header would like the list items into a menu from 768px to 1080px and have used this consistently in header related styling. 1080px is not special, this was roughly what felt like the right point when testing.
Here is a video to show how the header is changing as the screen gets smaller:
Screencast.from.2025-10-18.09-40-41.mp4
4 participants
Relates to #1499
This moves the "docs" searchbar to the header of the website so that searching (which currently only searches the docs) is available everywhere from a UI perspective.
When you search, the search results are in the Docs area of the webiste (which currently makes sense as only the docs are searchable)
The next piece of work is extending the search for the website. But we can review whether these design changes are acceptable before we get into the weeds of this 😁
Notable consequence
As the docs search requires information of the release to be searched, this now means there is an extra query required to render the header (and so 1 query added to a page load in most cases, the docs already had this).
This also means that in order to test a view, you should have a default
DocumentReleaseobject created. I have added this into the existing view tests with aReleaseMixinMobile 412x915
Tablet 810x1080
Laptop 1492x1080