sphinx
sphinx copied to clipboard
sphinx-doc
Use a magnifying glass instead of a text "Go" for the search button
additionally:
- Change placeholder text from "Search" to "Search...", which seems more common
- CSS changes: Use a fixed height to make sure search field and button have the same hight. Also reduce button width a little because the icon needs less space.
Preview:
I would just give some a little more left-padding to the text input cheers
Not sure if it's me but... could you vertically center the glass?
Yeh actually I see that now also 😅
The text is centered. If I double the height, I get
I believe this is an effect how the font renders the glyph: On another system (windows), I get:
While one could add padding to shift it for a specific font, that might make it worse for other font. I believe one has to live with this. Or do you have an idea?
Edit: I believe we don't want to add fontawesome or some web fonts. One solution might be to embed a svg icon (e.g. https://uxwing.com/search-icon/) but I'm not a HTML expert, so not sure if/how that works.
I don't believe it is feasible to add an SVG icon to the submit button as is. I therefore propose to close because we cannot guarantee reasonable positioning with unicode glyphs.
An alternative route would be an adaption of https://pagedart.com/blog/how-to-add-a-search-bar-in-html/, which for example could be styled like this:
Or, how Furo, where the looking glass is only decoration and you don't have any button (submit only by enter)
The downside is that this uses other html elements and styling (border runs around the complete form not only the input box, the looking glass is actually the button). Thus customization of downstream themes would be broken. - Likely their CSS just does not have any effect and they would get the default styling we provide. Would that be acceptable?
Moving to draft until a decision is reached on https://github.com/sphinx-doc/sphinx/pull/12590#issuecomment-2231867182