Hi all, I took over a project which makes heavy use of LiveView and JavaScript custom components.
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.
The other one has a pagination and is realized as a JavaScript custom component. The special thing is, it reacts on display size and shows 9 elements per page for wide displays and six elements for small ones.
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).
Mixing both existing technologies is painful and using the JavaScript solution does not scale, when it comes to long lists, because the whole list needs to be loaded by the client before it can be paginated.
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