learningequality
KCard: Fine-tune thumbnail size behavior
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Background
KCard is a new component that we've just started introducing to Kolibri and Studio. All its layouts already have responsive thumbnail size behavior implemented, however as we've observed cards in new scenarios, there's need to fine-tune the size to as wide variety of circumstances as we can.
Summary
This is an overview of areas we've discovered so far that need improvement:
(1) Too wide thumbnail in horizontal layout with large thumbnail (reported by @nucleogenesis)
For <KCard orientation="horizontal" thumbnailDisplay="large">, the thumbnail area takes 40% of the total card width:
This should be better aligned to the designs that indicate rather around 30% width:
(2) In some cases, the thumbnail takes too much of visual priority in horizontal layout with small thumbnail (reported by @akolson)
For <KCard orientation="horizontal" thumbnailDisplay="small">, when there's little content in a card, thumbnails can take too much of visual priority, particularly if bright colors (which we can't control).
In this layout, we agreed to resolve it by applying upper max-width/height on the thumbnail area. Guidance by @jtamiace:
doing a little testing with many and few card contents in figma, i think a max width of 150px would work well. or, if that still feels too much in practice, feeling it out between 125 and 150
Acceptance criteria
- [ ] No regressions in any of the layouts
- [ ] Responsive behavior is maintained
