component.github.io icon indicating copy to clipboard operation
component.github.io copied to clipboard

replace component pages with inline expansion

Open tj opened this issue 12 years ago • 12 comments

slide out contents, this makes a few things a bit easier, and a bit less "shock" when your search results are suddenly gone. This may have implications once we implement search pagination (even when infinite) however.

tj avatar Mar 05 '13 04:03 tj

How much space does that then give you for readme, downloads, dependency graphs etc.? Could we just add the search query to the url (push state or hash fragment) so that back takes you back to the search query.

ForbesLindesay avatar Mar 05 '13 04:03 ForbesLindesay

depending on how it's done, it could work. here's what our slide-out trays look like on segment.io:

image

you could even eke out a bit more space on component because the names are left aligned, so they'll still peak out. (key is just to have something recognizable still peeking out underneath the tray).

that escape component is gna come in handy :p gotta make it public soon

ianstormtaylor avatar Mar 05 '13 04:03 ianstormtaylor

yeah something like that would be cool, the component pages are going to be pretty bland no matter what so it'll be nice if it's less of the page

tj avatar Mar 05 '13 16:03 tj

They shouldn't be bland, they should have a lot of information to display. They need to provide, at a minimum, links to github, links to direct downloads in a number of different forms (standalone/CommonJS/AMD/standalone component/component + require, minified/not-minified).

They could ideally also provide links to dependencies, readme (with auto generated ToC), graph of dependency tree, links to dependents etc. etc.

I think they'll be anything but bland. I think the big issue is likely to be how crowded they may get.

ForbesLindesay avatar Mar 05 '13 16:03 ForbesLindesay

if in doubt, do less

juliangruber avatar Mar 05 '13 16:03 juliangruber

I'm not in doubt :smile: There's currently a close competition between component and browserify. They've recently become much more similar systems. We are currently better (in my opinion) at listing modules that work with the browser. The only way to continue to compete is to keep making that side of things powerful and awesome. Graphing the dependency may be something for a separate project, but I think everything else I've mentioned is needed.

Oh, and we'll also need to display browser compatibility badges pulled from jepso-ci, ci.testling and whatever @visionmedia comes up with (I believe he's building something).

ForbesLindesay avatar Mar 05 '13 16:03 ForbesLindesay

+1 for compatibility badges and links to different downloads. Dependencies shouldn't matter so much, perhaps only display the number of dependencies.

juliangruber avatar Mar 05 '13 16:03 juliangruber

the dep graphs are kinda fun, already got that mostly ready anyway https://github.com/component/component-graph and I'll try and get the CI ready soonish, it's mostly done I just need the front end stuff

tj avatar Mar 05 '13 16:03 tj

i don't think their complexity necessarily means that you can't have a slide-out tray. but i do think it would be interesting to see what it feels like, because it could search -> compare much quicker

ianstormtaylor avatar Mar 06 '13 01:03 ianstormtaylor

Cool, just to check, are you OK with supporting a number of different CI systems? I think since they all have JSON APIs we should be able to generate matching images for them fairly easily.

ForbesLindesay avatar Mar 06 '13 01:03 ForbesLindesay

is a link to download really necessary? shouldnt people be encouraged to use it through component? i guess i can see some use cases, especially for things like segmentio/analytics.js but for most things it seems unnecessary?

and even for things that can be built standalone, if someones on the component site theyre probably not using the standalone version.

ianstormtaylor avatar Jun 02 '13 07:06 ianstormtaylor

+1 on the slide-out variant (CSS3 animations ftw). Though we'd have to rethink the scrolling. When the tray is opended, <html|body> should get overflow-y: hidden; so we don't end up with two scrollbars.

html
  overflow-y: scroll
  &.tray-open
    overflow-y: none

.tray
  position: fixed
  left: 400px // This would make the tray fluid, with a left margin of 400px
  width: 900px // This would make the tray fixed at 900px width
  right: 0
  top: 0
  bottom: 0
  z-index: 100 // or whatsoever
  overflow-y: scroll

  pointer-events: none
  transform: translateX(100%)
  opacity: 0
  transition: all .5s ease
  .tray-open &
    pointer-events: auto
    transform: translateX(0%)
    opacity: 1

The downloads are also kinda cool, but tempting. I find them very useful when doing simle Apache stuff. I know it's wrong, but it can be a real time-saver for these scenarios.

buschtoens avatar Jun 02 '13 15:06 buschtoens