PhoenixKitDashboards.Breakpoints (PhoenixKitDashboards v0.1.0)

Copy Markdown View Source

The responsive grid breakpoint tiers, with a per-device column count.

A grid dashboard stores a placement (x/y/w/h/hidden) per breakpoint; smaller tiers have fewer columns, so a layout designed for a big screen reflows down. Tiers are ordered largest → smallest; the widths are the minimum viewport width that selects each tier (checked top-down, so phone is the < 768 catch-all with min_width: 0).

Pixel dashboards do not use breakpoints (a single scaled canvas).

Summary

Types

t()

Functions

all()

All breakpoint tiers, ordered largest → smallest.

cols(key)

The column count for a breakpoint key (12 if unknown).

default()

The default (seed + last-resort derivation-fallback) breakpoint.

for_width(width)

The tier that best fits a viewport width in CSS px — the largest whose min_width it clears (phone is the catch-all). The server-side twin of the DashboardBreakpoint hook's matching, for hosts that pass the viewport in the LiveSocket connect params.

get(key)

The tier for a key, or nil.

keys()

The breakpoint keys, ordered largest → smallest.

larger_than(key)

The keys strictly LARGER than key, nearest-first — the auto-derive source chain (a fresh tier inherits from the closest larger customized tier). Keys are ordered largest→smallest, so the slice before key is farthest-first; reverse it.

max_cols()

The largest tier's column count — the widest any widget span can be. Size bounds are sanitized against this (not a hardcoded 12) so a widget can span a full TV row; each breakpoint still clamps spans to its own cols/1 at placement time.

max_rows(key)

The tier's designable rows (the builder renders + scrolls all of them).

smaller_than(key)

The keys strictly SMALLER than key, nearest-first (the fallback chain).

valid?(key)

Whether a string is a known breakpoint key.

Types

t()

@type t() :: %{
  key: String.t(),
  label: String.t(),
  min_width: non_neg_integer(),
  cols: pos_integer(),
  preview_width: pos_integer(),
  max_rows: pos_integer()
}

Functions

all()

@spec all() :: [t()]

All breakpoint tiers, ordered largest → smallest.

cols(key)

@spec cols(String.t()) :: pos_integer()

The column count for a breakpoint key (12 if unknown).

default()

@spec default() :: String.t()

The default (seed + last-resort derivation-fallback) breakpoint.

for_width(width)

@spec for_width(number()) :: String.t()

The tier that best fits a viewport width in CSS px — the largest whose min_width it clears (phone is the catch-all). The server-side twin of the DashboardBreakpoint hook's matching, for hosts that pass the viewport in the LiveSocket connect params.

get(key)

@spec get(String.t()) :: t() | nil

The tier for a key, or nil.

keys()

@spec keys() :: [String.t()]

The breakpoint keys, ordered largest → smallest.

larger_than(key)

@spec larger_than(String.t()) :: [String.t()]

The keys strictly LARGER than key, nearest-first — the auto-derive source chain (a fresh tier inherits from the closest larger customized tier). Keys are ordered largest→smallest, so the slice before key is farthest-first; reverse it.

max_cols()

@spec max_cols() :: pos_integer()

The largest tier's column count — the widest any widget span can be. Size bounds are sanitized against this (not a hardcoded 12) so a widget can span a full TV row; each breakpoint still clamps spans to its own cols/1 at placement time.

max_rows(key)

@spec max_rows(String.t()) :: pos_integer()

The tier's designable rows (the builder renders + scrolls all of them).

smaller_than(key)

@spec smaller_than(String.t()) :: [String.t()]

The keys strictly SMALLER than key, nearest-first (the fallback chain).

valid?(key)

@spec valid?(term()) :: boolean()

Whether a string is a known breakpoint key.