Grid view

[adamschwartz]

I think the list-based approach we designed is ideal to support the growth of EmbedBox. But I wonder if we should consider a tile-based approach either optionally, or automatically when there are ~<= 6 targets visible.

Think something like Disqus’s installation flow:

But of course with our own touch on it.

We could still have search and still support keyboard navigation, so mostly this would be CSS work.

cc @TeffenEllis @zackbloom

[adamschwartz]

[GirlBossRush]

I like the design!

This type of layout is pretty easy to implement with our flex styles too 😃

I'd be interested in the grid layout as a default and the list layout appearing for small viewports. Thoughts?

[adamschwartz]

I’m pretty much where you’re at. Here’s my current thinking:

• Default to list for widths <= 460px.
• Default to grid view for widths > 460px and target count (including generic) <= 12, which will likely be the case for a while.
• Default to list view for widths > 460px and target count > 12.
• Option to force either layout type for widths > 460px.

Put simply: in a world in which we have 50 targets, I would default to list view always. But for the moment I think we are best to default to the grid.

One nuance is that in grid mode, I think arrow keys should move selection directionally and not based on left-to-right flow ordering. This will be a little challenging if we use CSS to determine the column size and number of columns. For the moment I’m leaning towards hard-coding 3-columns in CSS to make this simpler (rather than supporting 2- and 4-column layouts as well).