Search improvements and upstream fixes to SPHT

[agriyakhetarpal]

Thanks @agriyakhetarpal, this looks really good and in terms of functionality it is working well 🚀

However there can be some UI improvements (I couldn't stop myself comparing it to https://docs.pybamm.org/en/stable/ search bar):

• We should have some hover over styling property on the search button

• While search is enabled, I can still scroll the page unlike on the docs

• Some text to indicate it's keybinding on wider screens

• It is so fast that I don't feel the necessity of a loading circle but can it take time in some scenario?

• I'd personally not prefer pitch colors used in the background to keep it familiar with the wesite colors:
  

• clear button on searchbar closes it and it should also have some hover effect

• And this one is also personal - I'd rather keep the icon a little more minimal but it depends upon how you and others also think about it.

Can't wait to see it 😄

EDIT : I see most of it is from the search implemented on scientific-python-hugo-theme so I'd not mind if these points are not addressed too. That being said, I'd still encourage you to see if we can override these properties.

Originally posted by @arjxn-py in #210 (review)

[Bashamega]

Hello @agriyakhetarpal
I would like to work on this. I think these can simply be overwritten in a CSS file.

[agriyakhetarpal]

Hi @Bashamega, thank you! Please feel free to work on these issues. I'm not sure which of these are still valid and which might have been resolved upstream already. Could you please investigate them? Once done, please send a PR to the Scientific Python Hugo Theme repository with the relevant updates to their styling, as it will benefit everyone who is using the theme, like us. Once those updates are merged and released, we can update our theme submodule with that.

[Bashamega]

Hi @Bashamega, thank you! Please feel free to work on these issues. I'm not sure which of these are still valid and which might have been resolved upstream already. Could you please investigate them? Once done, please send a PR to the Scientific Python Hugo Theme repository with the relevant updates to their styling, as it will benefit everyone who is using the theme, like us. Once those updates are merged and released, we can update our theme submodule with that.

Okay. Thank you

[Bashamega]

I have a question regarding the tasks.
Why is a hover effect needed on the search icon? It isn't an icon

[agriyakhetarpal]

I have a question regarding the tasks. Why is a hover effect needed on the search icon? It isn't an icon

@arjxn-py, it has been a while – is there a chance you remember why you suggested this point?

[Bashamega]

scientific-python/scientific-python-hugo-theme#669
I have opened a PR to fix the clear button hover effect.

[arjxn-py]

Why is a hover effect needed on the search icon? It isn't an icon

Hey @Bashamega @agriyakhetarpal, yeah its been some time
This is not a hard requirement so feel free to skip it, i remember I just asked this on Agriya's PR since the search icon was looking out of the place as compared to the theme we're using but I'd not be bothered at all to skip it if it's not simple :)
Thanks for picking this up 🚀

[Bashamega]

Why is a hover effect needed on the search icon? It isn't an icon

Hey @Bashamega @agriyakhetarpal, yeah its been some time
This is not a hard requirement so feel free to skip it, i remember I just asked this on Agriya's PR since the search icon was looking out of the place as compared to the theme we're using but I'd not be bothered at all to skip it if it's not simple :)
Thanks for picking this up 🚀

You're welcome 😊
I already created a PR, but there is a problem in it

[arjxn-py]

Ahh I see, I think to make some work easier - instead of changing the style we can maybe just change Clear to Close

Ideally, it should not close the search bar but if it does let's inform the user :)