search

OpenEugene / little-help-book-web

Human service resource guide powered by White Bird Clinic
MIT License
6 stars 4 forks source link

Search icon and action #36

Closed ArthurSmid closed 3 years ago

ArthurSmid commented 4 years ago

In the first draft folder, I added a test-icon.html and test-icon.css, these pages have all the code for the search bar that's currently in the index.html and styles.css. I'm able to get the search icon, a magnifying glass (search-line.png), to appear in the test-icon.html but in the actual index.html when it's there with all the other elements in the header, I haven't been able to see it and I'm not sure where it is or what's happening to the search-line.png. The screen-shot here has the red underline where the search icon should appear: search-window

The next step, after getting the icon to appear, is to create a JavaScript function that will expand the search bar to the left when someone clicks, similar to what White Bird has on their site: https://whitebirdclinic.org/

ArthurSmid commented 4 years ago

A similar approach to the search feature on this site, only it expands below the menu: https://fireadaptednetwork.org/

ArthurSmid commented 4 years ago

With this experiment, removing all the elements that might be affecting the search icon and input, you'll see that the search icon does appear: https://github.com/OpenEugene/little-help-book-web/blob/develop/table-of-contents-style-homepage/first%20draft/test-icon.html

And maybe it's a matter of finding what element or aspect of the actual page affect that magnifying glass icon?

ArthurSmid commented 4 years ago

Interesting approach to the search field: https://www.lionsclubs.org/en#