search

bcc-code / bmm-web

[BMM] The BMM website and desktop app to listen to the content from BMM.
https://bmm.bcc.media/
GNU Affero General Public License v3.0
16 stars 8 forks source link

Design: dynamic cover size #416

Closed kkuepper closed 3 months ago

kkuepper commented 5 months ago

Currently the covers (ItemCard in code) have a fixed size of 208px. But as shown in Figma, the size is supposed to be flexible (158px - 250px) based on how much space there is. CSS Grid sounds like a good solution (see branch feature/dynamic-cover-size) but it doesn't allow to only show 1 row of items. I believe that it can't be solved with CSS and we need some kind of Javascript.

andreasgangso commented 5 months ago

I think an autofill grid makes sense to make this like you said

image

but when you say you can't show "one row", are you talking about this view on the home page?

image

I think that should just be treated as a different view entirely, or use max-height to hide the items (like it's doing today).

kkuepper commented 5 months ago

I can't use max-height if the height is dynamic

sifferhans commented 4 months ago

I can't use max-height if the height is dynamic

Couldn't max-height: max-content or min-content work here?