That works well, when custom components do small things, like transforming an ISO timestamp to a local time.
To give you the context, it’s a catalog page for shopping plants with several landing pages for different campaigns.
Now I have to kinds of product lists:
One has filters and no pagination. The filters are very flexible and complex and are realized in the backend with LiveView.
Now the customer wants a new kind - you may guessed it:
Paginagion and filters. The new list kind needs this responsiveness too (page size 9 for wide and page size 6 for small displays).
So my question is: did anybody ever think about such a case and give me advice how I can react on display size in the backend with LiveView?
This may not be an ideal solution, but the immediate thing that comes to mind is to pushEvent from client -> server when the viewport causes a pagination size change. That would involve a small amount of JS but not much. The server could then take that into account for its pagination (possibly re-rendering the items because small -> large would need more data).
I’ve never had to deal with this, so curious if anyone has creative ideas here. I initially thought of creative CSS to limit the size of the items, but that would mess up pagination since the server needs to know that 6 are being displayed so it can show items 7-12 after 1-6.
On my project I came up with a solution where, on client side, a tiny piece of script sends browser width via push a push event whenever the browser is resized.
Then, server-side, I have a custom render function which will render different versions of the template regarding the current width (for instance it will render index.desktop.html.leex or index.mobile.html.leex)
Let me know if you’re interested, I can post some gist