Make showcase expandable (merged prematurely, see #889) #878
Conversation
victorlin
force-pushed
the
victorlin/make-showcase-expandable
branch
from
2e9bf43 to
bcc4ac9
Compare
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 by making the showcase expandable.
victorlin
force-pushed
the
victorlin/make-showcase-expandable
branch
from
bcc4ac9 to
a2e7b2a
Compare
|
+1 for approaching this differently; right now the grid can get real funky depending on viewport sizing and zoom level: 
This does feel like something CSS Grid could help with? (handy cheatsheet if you're not up-to-date on it) |
I think flexbox is a more natural fit for what we want (which is not a fixed grid, unless I'm misunderstanding intent). |
Yeah, either way I think; the big point is not re-inventing a wheel the browser should hand us. 😁 |
This is the default behavior of justify-content so an alternative is to simply remove the line, but better to be explicit. Note: there is a gap on the right side of the cards because the collection of cards can't be centered with this approach. There are workarounds¹ that don't use flexbox, but keeping it like this for now. ¹ <https://stackoverflow.com/q/32802202>
This was only necessary to determine if the container is expandable, which can be determined from the height alone (already used elsewhere).
|
Nice work @victorlin. I really like how this turned out. Appropriately snappy and the tile fading is good UI hint that there's content below the fold that can be unfurled. Perhaps a separate issue from this PR. In the /pathogens page, at full width we have 9 total tiles and space for 8. This causes overflow for just Zika. The single tile overhang feels off. I'd either add a couple additional tiles or just drop one. If adding a couple, I'd add mumps and EV-D68. |
This makes it easier to customize card components for future work. The side effect is that the last row is centered, which was suggested elsewhere¹. ¹ #878 (comment)
victorlin
changed the title
Warning
All the discussion on changes happened here, but these aren't the exact commits that made it into the default branch. See #889 for those.
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 by making the showcase expandable.
Related issue(s)
Checklist
Check if changes affect the resource index JSON revision