Add carousel to /pathogens showcase #873
Conversation
Other carousel packages with reasons why I didn't choose them over react-multi-carousel: - react-slick: has 5 dependencies vs. 0 dependencies - react-elastic-carousel: last published 3 years ago - react-responsive-carousel: doesn't support displaying multiple items at a time, also not actively maintained
Previously, the showcase would drop cards as the width decreases. This is presumably to prevent the showcase from taking up too much height. Instead of hiding the unused cards, allow them to be accessed in a carousel via scroll/arrow clicking.
|
There's some non-ideal behaviour going on with the responsive widths of the tiles at some viewport widths:
If I make the window a little bit smaller or little bit wider it looks fine. |
| ))} | ||
| </ShowcaseContainer> | ||
| </SingleRow> | ||
| <Carousel responsive={responsiveOptions} renderButtonGroupOutside={true}> |
There was a problem hiding this comment.
@jameshadfield re: #873 (review)
The arrows currently obscure the titles at the moment (or vice versa?)
There's props to customize the arrows which I'll look into. I tried briefly with renderButtonGroupOutside but looks like more options are necessary to get it working properly.
| // Generate options for carousel | ||
| let responsiveOptions = {}; | ||
|
|
||
| for (let i = 0; i < cards.length; i++) { | ||
| const breakpointMin = i * cardWidthHeight; | ||
| let breakpointMax = (i + 1) * cardWidthHeight; | ||
|
|
||
| // Don't limit max otherwise carousel won't render at all on larger screens | ||
| if (i == cards.length - 1) { | ||
| breakpointMax = 999999 | ||
| } | ||
|
|
||
| responsiveOptions[i] = { | ||
| breakpoint: { max: breakpointMax, min: breakpointMin }, | ||
| items: i | ||
| }; | ||
| } |
There was a problem hiding this comment.
There's some non-ideal behaviour going on with the responsive widths of the tiles at some viewport widths
Unfortunately react-multi-carousel takes a fixed number of items opposed to a fixed width per item, which I would prefer avoids the behavior you'r seeing. With a fixed number of items, there's bound to be some stretching and contracting. I did a quick and dirty calculation here – will tweak it to contract a bit less.
There was a problem hiding this comment.
Can you use a flexbox to evenly space them? That seems better than stretching / contracting cards
There was a problem hiding this comment.
I presume the bigger issue behind this is that we're not observing / responding to viewport changes (this is from memory... we do observe this elsewhere in the resource listing UI).
There was a problem hiding this comment.
Scratch that, the viewport observation is flowing into the carousel. But if we've scrolled (?) to the end of the carousel and then expand the page it doesn't respond appropriately. I'd consider this minor / don't need to fix:
A separate issue is the number of cards displayed for a given width, which is causing them to become rectangles:
|
Thanks for diving in here @victorlin! This might be personal bias, but I'm not a big fan of carousel UI on almost any website. In this case especially, you have to do a lot of clicking to reveal the additional tiles one at a time. My guess is that a nicer UI would be a dropdown carrot that expands (and collapses back) from a single row of tiles to a grid of tiles showing everything. This way initial view of tiles doesn't eclipse the cards, but you can expand to see everything if you'd like. |
|
@trvrb thanks for the feedback, I'll explore that idea with a separate PR so we can compare the two. Note that we also plan to use this on the splash page at https://nextstrain.org. |
I like that idea. Something like the following (bad) mockup?
|
|
Closing in favor of #878 |
preview
Description of proposed changes
Previously, the showcase would drop cards as the width decreases. This is presumably to prevent the showcase from taking up too much height. Instead of hiding the unused cards, allow them to be accessed in a carousel via scroll/arrow clicking.
Related issue(s)
Checklist
Check if changes affect the resource index JSON revision