search

algolia / sphinx-docsearch

Add Algolia DocSearch to your Sphinx documentation project
https://sphinx-docsearch.readthedocs.io/
MIT License
12 stars 1 forks source link

PyData Sphinx Theme searchbox design and accessibiity improvements #33

Closed agriyakhetarpal closed 1 month ago

agriyakhetarpal commented 1 month ago

Hi there! I see that my earlier request (#14) was merged and a new release with the theme is out (thanks! 🎉), but I wanted to highlight some potential areas of improvement and some workarounds that I have been using to add them:

1. Keyboard buttons are not correctly displayed Screenshot 2024-05-28 at 3 33 47 PM
2. Not available on smaller-width (mobile) devices (because of "navbar_persistent" I guess) Screenshot 2024-05-28 at 3 36 49 PM

Some CSS fixes can be adopted for this:

/* Do not add custom padding for keyboard buttons */

kbd:not(.compound) {
  padding: 0rem 0rem;
}

kbd.DocSearch-Commands-Key {
  border: 0;
  box-shadow: var(--docsearch-key-shadow);
  margin: 1px 5px 1px 0px;
  padding: inherit;
}

and some other improvements based on the styling for individual search results: https://github.com/pybamm-team/PyBaMM/blob/develop/docs/_static/pybamm.css#L107-L196. Not all of these are needed anymore, though, and this doesn't fix point 2, however...

agriyakhetarpal commented 1 month ago

These styles change on every minor update to the PyData Sphinx Theme, say, between 0.15.X and 0.16.Y, so there's not a lot that can be done unless the theme provides first-class support for configuring search boxes (https://github.com/pydata/pydata-sphinx-theme/issues/795)

kai687 commented 1 month ago

I split off issue #35 for the second issue. If you have any idea how to address it, I'd be happy about any help.

I added your extra CSS for the keys in PR #34.