redesign: dynamic change grid card size

[yangwao]

change grid card size

Right now current trends and our anticipation of bringing dynamics cards as now we have columns of fixed ones. It's nice, but not everyone has same screensize and we would maximalize unified experience at each of screen size. Ranging from mobile, folding phones, tablet, notebook to desktop.

You can currently see trend on R & OS that dynamic cards has some properties where they sizing these cards dynamically on picture and description.
In similar manner we will set some break points to have it

Just backlogging as can easily sink through our thought process among others and I found it really important stuff to have.

Of course, we will welcome to have some sort of override where user can set "size" of card, but amount of columns will be adjusted dynamically for best user experience

Originally posted by @yangwao in #4378 (comment)

Please reflect on foldable phones. ht @exezbcz finding foldable explainer for proper CSS ninjas :P

Ref

• https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md
• https://devblogs.microsoft.com/surface-duo/dual-screen-web-game-foldship/
• Proposing new CSS primitives to enable great web experiences on foldable & dual-screen devices w3c/csswg-drafts#4736
• https://w3c.github.io/device-posture/
• Introduce additional fold environment variables MicrosoftEdge/MSEdgeExplainers#236

[exezbcz]

as mentioned in issue #4496, we have some sort of minimal card size.

The grid, size of the cards and the number of cards will change based on few factors

• there is going to be fixed gap between them - for bigger cards in normal view its 32px and for the smaller cards its 24px
• once the card can not be smaller without lowering/increasing the gap, the amount will be lowered by one/required.
• other cards will scale up so there is the demanded gap - Same when scaling up.

Have a look at rarible/opensea.

in our case - explore with filter with menu opened/closed.

- at the bottom there are the minimum size cards and demanded gap between them. - Once we open the filter menu, they would not fit. Certain number of cards are removed and the others scale up.

explore v0.9 figma here: https://www.figma.com/file/OwAEyE0QDPn3tHXZbyot1o/Explore-v0.9?node-id=0%3A1&t=Mp5WHz4Ig8kbcIsy-3

lmk if the approach is not great or it could be done differently

[yangwao]

At collection, we should apply it as well once the following PR is merged, that we should preserve some card size on collection view as well

• Collection card redesign #4518
  

[exezbcz]

Anyone 🥺

[exezbcz]

Me every month checking this issue:

[yangwao]

This will be reused for

• Collection Redesign #5000
• Redesign Explorer v0.9  #4474

[yangwao]

We should think of height of collection cards on wider screens

[preschian]

I just pushed a new branch for dynamic grids. @exezbcz @yangwao you can check it in here https://feat-dynamic-grid.nft-gallery-5ci.pages.dev/bsx/collection/14022023?page=3&redesign=true

I don't put the resize event listener. so need to resize the page first and then refresh it to see the result. you can check the result on the collection page/explore items page/user page under redesign=true query

[exezbcz]

@preschian uuu nice, it seems like things are improving! I'll play with it for a while and give feedback; at first glance, it looks to be good.

[yangwao]

you can check it in here

very nice! I think the card ratio is close to perfect for me on 13"

[yangwao]

Ah, collection is solved in

• feat: dynamic grid on new collection #5135