Style search: hide close icon, animate open

[DrDrij]

• Hides the overlapping close/clear icon on webkit browsers.
• Animate the opening of the search input field.
• Simplify JS.

If this works well, last step to allow clicking magnify to submit form (and clicking away from search to close input field).

[DrDrij]

@mmcky This PR looks better. Thanks for guidance 🙏

[DrDrij]

@mmcky This PR looks better. Thanks for guidance 🙏

Spoke too soon. I need to build it before commit? Sorry @mmcky

[codecov[bot]]

Codecov Report

Merging #212 (2eaf5d6) into master (976718a) will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #212   +/-   ##
=======================================
  Coverage   71.12%   71.12%           
=======================================
  Files           2        2           
  Lines         239      239           
=======================================
  Hits          170      170           
  Misses         69       69           

Flag	Coverage Δ
pytests	71.12% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more

[DrDrij]

@mmcky This PR looks better. Thanks for guidance 🙏

Spoke too soon. I need to build it before commit? Sorry @mmcky

Forgot about pre-commit. Finally got there..

[mmcky]

Ah @DrDrij sorry with delayed review. Just saw the X and I now see it just needs a re-run for anaconda to setup.

[mmcky]

@DrDrij I have upgraded to python==3.10 now so the sample project build shouldn't fail any more.

[mmcky]

@DrDrij in the latest test deployment the search box doesn't seem to show up

https://648130a927ea09080280f196--hungry-lovelace-7d0512.netlify.app/intro.html

any ideas?

[mmcky]

@DrDrij if you have time to work on this by tomorrow ~3pm AEST tomorrow I will setup a new release and update our sites :-)

[DrDrij]

Working on this now @mmcky Will update when done.

[DrDrij]

Updated the search field JS. Tested on Chrome, Safari, Firefox. Please let me know how you go @mmcky

[mmcky]

thanks @DrDrij I am going to merge this. It's working nicely on the demo

https://6489b6eacb6e88213e2dc04d--hungry-lovelace-7d0512.netlify.app

The only pickup is that the search icon doesn't work in the header on the actual search page but it seems to work on all other pages that I tested.