LiveViewResponsive (live_view_responsive v0.1.1)

Media queries for responsive design in Phoenix LiveView.

Example

With <.media_query> component

defmodule ExampleAppWeb.Example do
  use Phoenix.Component

  import LiveViewResponsive

  def example(assigns) do
    ~H"""
    <.media_query max_width={1224}>
      <p>You are on a tablet or mobile</p>
    </.media_query>
    <.media_query min_width={1225}>
      <p>You are on a desktop or laptop</p>
      <.media_query min_width={1500}>
        <p>You also have a huge screen</p>
      </.media_query>
    </.media_query>
    """
  end
end

With media query assigns

defmodule ExampleAppWeb.ExampleComponent do
  use ExampleAppWeb, :live_component

  use LiveViewResponsive

  def mount(socket) do
    socket =
      socket
      |> assign_media_query(:tablet_or_mobile, max_width: "1224px")
      |> assign_media_query(:desktop_or_laptop, min_width: "1225px")
      |> assign_media_query(:portrait, orientation: "portrait")

    {:ok, socket}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.live_view_responsive myself={@myself} />

      <div :if={@live_view_responsive_synced}>
        <h1>Device test</h1>
        <p :if={@desktop_or_laptop}>
          You are on a desktop or laptop
        </p>
        <p :if={@tablet_or_mobile}>
          You are on a tablet or mobile phone
        </p>
        <p>
          You are in
          <%= if assigns.portrait, do: "portrait", else: "landscape" %>
          orientation
        </p>
      </div>
    </div>
    """
  end
end

Summary

Functions