Improve the 'Search IOOS Data' UI at top of ioos.us homepage

[mwengren]

The current 'Search IOOS Data' button on ioos.us homepage is non-intuitive. Users must first click the button, then enter search terms into the box that appears.

Can we replace it with a search box that is similar in size/appearance to that which appears on https://data.ioos.us/ itself (minus the tags, of course)? The blue background isn't necessary, but a simple, prominent search box labeled 'Search IOOS Data' that spans the tiles would be a big improvement.

[mwengren]

@Bobfrat @kellydesent thanks for working on this. I was able to run via Docker and view locally.

Can we make the search bar a little more visually prominent? The one on the Catalog looks like this:

That's a little too much, but perhaps we could use the same blue (or perhaps light gray if that doesn't look good) background/box container and put a similar sized 'Search IOOS Data' label in white to the left of the search box, and extend the search box the full width of the tile space to the right?

                    _______________________________________
Search IOOS Data: |    E.g. environment                  |
                    _______________________________________

The way it is now, I still don't think many will notice that it's there.

[kellydesent]

@Bobfrat here is the PR: https://github.com/ioos/ioos-us/pull/226 @mwengren if you think you'd like a light gray better, I can update it. Let me know. Thanks!!

[kellydesent]

[mwengren]

@kellydesent I got creative and made an alternative version for folks to review as well:

Looking at them side by side, I think I like blue background better, but happy with either. We'll see what they say.

[mwengren]

@kellydesent I asked around the office, the blue bar wins. Please go ahead and merge/deploy these changes, thanks!

[Bobfrat]

changes have been deployed

[mwengren]

great, thanks. closing.