Showcase refactor and additions #930
Conversation
Cards are already required to have an image, as reflected in static-site/src/components/Showcase/types.ts.
There was a problem hiding this comment.
Scanned through the code / used the review app and this looks good to me, barring the one in-line comment. (I preferred left-aligned dangling rows, contrary to the majority.)
Now that the showcase is expandable, it's appropriate to add more entries.
The width of every column is a fixed value.
grid-gap is deprecated¹. ¹ <https://developer.mozilla.org/en-US/docs/Web/CSS/gap#description>
The percentage value isn't factored in to clientHeight, which is a value that is used to calculate the total height of the expanded showcase. This subtlety isn't very noticeable with 1% + white space on the border of the current CardComponent. It is more apparent at larger percents and with other work involving a CardComponent that uses a colored border, which was being cut off in the expanded showcase.
It doesn't make sense to keep card-specific height and styles with the Showcase component which accepts an arbitrary CardComponent. These should be defined wherever Showcase is used.
victorlin
force-pushed
the
victorlin/showcase-refactor
branch
from
cdce492 to
e71d5e1
Compare
There was a problem hiding this comment.
Re: #930 (review)
(I preferred left-aligned dangling rows, contrary to the majority.)
I also prefer left-aligned dangling rows (which is what prompted using CSS grid here). That makes it a tie, and since left-aligned is the current behavior on nextstrain.org, I've updated this PR to keep it. The other reason I had changed to flexbox here was to avoid passing the width as a prop since it's required for CSS grid. This PR now keeps CSS grid and passes the width as a prop, which isn't terrible since the height is already necessary for different reasons.
There was a problem hiding this comment.
I also prefer left-aligned dangling rows.
preview
Description of proposed changes
Small fixes - see commit messages.
Related issue(s)
Checklist
Check if changes affect the resource index JSON revision