Responsive LiveView

[ouven]

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?

[sb8244]

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.

[cblavier]

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

[ouven]

Hello, thanks a lot, to both of you! I would be very happy to see this push script, because it seems as the only, solution for this problem.

[cblavier]

Here it is : https://gist.github.com/cblavier/0e227de6fd1dfa00814b88642cdcb2a9

[ouven]

Looks very promising. I totally bring it into the next sprint and provide you feedback. Thanks a lot!

[cblavier]

Let me know how it works for you

[Exadra37]

@ouven

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.

You may want to watch the video number 10 in this series:

The Pragmatic Studio

I strongly recommend anyone getting into live view to watch the entire series by @mikeclark and you also participate in dedicate forum post for it.

You can see the live demo for it here.

[ouven]

Works like a charm! I put the “breakpoints” into the frontend view_helpers:

  defp view_helpers() do
    quote do
      @sd_max_width 768
      @md_max_width 1080

      @display_size_small :display_size_small
      @display_size_medium :display_size_medium
      @display_size_large :display_size_large

      def display_size(width) when width <= @sd_max_width, do: @display_size_small
      def display_size(width) when width <= @md_max_width, do: @display_size_medium
      def display_size(width), do: @display_size_large

      use Phoenix.HTML
      ...
    end
  end

And dispatched the page_size on in:

 @impl Phoenix.LiveView
  def handle_event("viewport_resize", %{"width" => width}, socket) do
    socket
    |> assign(
      :page_size,
      case display_size(width) do
        @display_size_small -> 6
        _ -> 9
      end
    )
    |> noreply()
  end

Thanks to @cblavier and @sb8244 - solved by now