Responsive 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

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.

Here it is : Responsive Phoenix LiveView · GitHub

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

Let me know how it works for you

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

Screenshot from 2021-01-09 11-33-341036×286 62.1 KB

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.

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