search concept

[ianstormtaylor]

Here's a concept for the search box that makes it accessible all over the site, and still not that intrusive. Basically there's a small fixed row at the bottom of the page that's always there (a slightly darker color than the current page, so it looks recessed) and it's the component index. Clicking it would make it expand, taking over almost all of the screen (up to the top navigation, which will always remain visible).

[yields]

this makes a lot of sense to me, i think when someone clicks a search result the search row should slide down and the component should apear behind it.

@ianstormtaylor this looks awesome! :)

[ForbesLindesay]

I really can't tell you how much I dislike having the search bar at the bottom of the screen. I spent about 15 seconds looking for it when I first visited component.io. Virtually everywhere else puts it in one of the two top corners of the site and there's no reason to do otherwise. The only sensible alternative is to put it in the middle of the screen directly below the title (like Google does) on the grounds that it's probably what most people will be coming to the site to do.

As for the animations, they sound really nice, but the basics like downloads and browser compatibility display and readme display are way more important at this stage.

[tj]

cool I dig it, definitely like the idea of having it available everywhere once we have the other pages. Placement doesn't matter too much to me, I would never use a website to search when there's a good CLI alternative personally but hey, whatever works

[ghost]

+1

[ianstormtaylor]

@ForbesLindesay Yup, this has nothing to do with the details of what goes inside each component listing, more about the general flow for people getting from section to section.

I think the question of search being in the top vs. middle vs. bottom should be more about what we want the site to be for. I don't think the #1 focus of the site is searching. It's definitely the #1 focus for power users, but we also need to think about getting first-timers ramped up. I think the site's primary goal on first visit should be informing people about component. (TJ, do you spell it uppercase or no?) Because of that, I'd eliminate middle as an option.

That leaves top and bottom. I'm not against top in any way, but I do think that bottom has the potential for a nice flow (like described), and if the only qualm is that it's hard to find, that can be easily fixed. (The current search bar is hard to find for lots of reasons other than it being at the bottom of the page.)

But the other thing is, this ever-present search is a power-user feature, so slightly harder to find at the expense of not being the only thing first-time users see is better in my book.

@yields I was thinking the slide out panel from #43 works very nicely, like so:

There would be more than enough space in the panel. I think the panel itself would be tabbed with things like Docs, Stats, Downloads, etc.

[tj]

it would be cool to have "s" bound to search and have that transition into view. We could have a link at that top that looks like any normal page but triggers the same view

[vendethiel]

I like your drawing

[ianstormtaylor]

@visionmedia any reason not to just focus the search input on page load? (could even do it only if repeat visitor) might be an accessibility problem, i'm not sure, but it would be super convenient for power users

[tj]

power users use the CLI :D haha, I probably wouldn't auto-focus personally

[ianstormtaylor]

haha gotcha

@Nami-Doc thanks :) 3 years in art school, at least i can draw boxes!

[ForbesLindesay]

Some power users still like to see their information more neatly formatted than a CLI can manage.

[ianstormtaylor]

yeah, i also prefer the browser since it puts me one or two clicks away from reading the source which is usually what i want to be doing

[tj]

with Terminal or iTerm you can cmd+click a link to open it in the browser, super helpful, that's why I output the full links for search

[tj]

I actually wish browsers had that feature I always try to do it for non-link urls haha

[yields]

chrome has that, two clicks to select then ctrl go to http://something..

but still it requires one more click then the terminal.

[ianstormtaylor]

started hacking on this on the #revamp branch if anyone's interested. tried to stick to the conventions as much as possible, but got a little opinionated.

problems:

• didn't finish fixing the component page
• animating the search is laggy cuz we have so many components loaded into the dom... would be nice to have some sort of infinite loading
• no "close" button (esc is the shortcut tho)
• the list is laggy, because segmentio/menu has too much overhead (which i can fix hopefully since i wrote that one a while ago)

[ianstormtaylor]

oh and a pic.. https://cloudup.com/c8sk5bHa8UJ

[jonathanong]

nice! i hate how the search input is at the bottom of the page right now. doesn't make sense to me.

one thing i want are links at the top to docs/github/etc. maybe have a top bar like github, and hide the links when the search is focused or something.

[dandv]

One other thing to avoid - a search overlay that pops up in your face and hides whatever was behind it. See discussion.