[Feature] Make it responsive

[cuire]

No description provided.

[fabiot21]

hi @cuire! any thoughts on this?

[cuire]

I don't like the idea of having a separate layout for a breakpoint in svelte-grid. My main goal with this library is to make it as simple as possible. So my thoughts were about dinamic recalculation, but this raises a lot of questions:

• Current cols and rows api is alowing to set col and row for each breakpoint. What to do if area of breakpoints not equal and for some breakpoint layout can fit more items?
• What to do when responsive layout is expands, should it compress items or items should stay in place. Another grid prop or extend cols api to control it?
• Add contept of shadow position, to not modify real one stored in x and y, or should it directly modify it?
• And a lot of implementation questions.

So It's not straightforward.

[fabiot21]

cool, I'll give it some thought as well.

[ferulisses]

Hi,

I created a application on the original svelte-grid where the user creates it's own panels on a Desktop and the app calculates it's mobile panels. These are the problems that I faced:

1. About your first and second question, most users expects consistency between screens, if it's created on an HD screen and viewed in an Full HD or in a tablet in horizontal, they expect the same layout, the same number of columns and the same positioning, when on Mobile or in a tablet in vertical, they expect that the Items to get bigger on screen to more easily view
2. When going to smaller screen such as Mobile, the best view usually is to render just one Item per line, keeping it's height or if possible it's proportion
3. Sometimes, creating on a Full HD screen and visualizing on an HD screen or vice-versa created some problems, but it was easy solved with CSS in the inside components, resizing fonts and charts to the vw or vh.
4. What is the right approach when going from a wider screen to a narrow with mixed Items sizes? I found though user testing that there is no right answer, each user expects different results on different panels, so, calculate one of them, and let the users reorganize later:
   
5. I used the idea of shadow position, and let the user make adjustments in each viewport. If the user is on a tablet and rotate it, the items come back to the original position for that viewport. The same idea applies to a user with a HD notebook connected to a Full HD monitor, when using the Full HD monitor he can resize to fit more items, but when he is back to the HD screen, the items are back to position and size that worked well on the HD screen
6. The approach from the original svelte-grid is not bad for a fixed layout panel, let the dev create the best view for each viewport

Just my two cents