DevactionUI.AuthLayout (devaction_ui v0.2.3)

Copy Markdown View Source

The page around a sign-in screen: a framed panel with two columns. On the left the product (its mark and name, a headline and a few reasons to sign in); on the right whatever the screen needs, usually an AuthCard; along the bottom a copyright line and a few links. The columns wrap on a narrow screen, the product above the form.

It draws no logo and says nothing itself: the mark is the brand slot, every word is an attribute or slot, so the same layout serves any product. Colours are tokens (--auth-bg, --auth-frame, --auth-frame-line), so it follows the light and the dark theme.

The two columns are the page's <main>, whose id (main_id, "main" by default) is where a skip link of the host points. The footer links are a <nav> named by nav_label.

The brand is the brand slot. auth_brand/1 draws the canvas's pattern in it: a 34 px tile on the product's dark ground (the --brand-tile and --brand-tile-line tokens, the same AuthCard uses for its icon_tone: :brand) holding your symbol in its mark slot, and the name at 18 px semibold. The footer text and the icons of the reasons have their own tokens too (--auth-foot, --auth-feature), and the strip of AuthCard has --auth-strip and --auth-strip-line.

Summary

Functions

The product's mark on its dark tile and its name, for the brand slot of auth_layout/1.

Functions

auth_brand(assigns)

@spec auth_brand(map()) :: Phoenix.LiveView.Rendered.t()

The product's mark on its dark tile and its name, for the brand slot of auth_layout/1.

Attributes

  • name (:string) (required) - the product's name.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • mark (required) - the symbol, drawn by the caller, about 32 px.

auth_layout(assigns)

Attributes

  • about_label (:string) (required) - names the product column for assistive technology.
  • headline (:string) (required)
  • copyright (:string) (required)
  • nav_label (:string) (required) - names the footer links for assistive technology.
  • main_id (:string) - the id of <main>, the target of a skip link. Defaults to "main".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • brand (required) - the product's mark and name.
  • feature - a reason to sign in; the slot body is its icon. Accepts attributes:
    • title (:string) (required)
    • text (:string) (required)
  • link - a link in the footer. Accepts attributes:
    • href (:string) (required)
  • inner_block (required) - the right column: the form's card or cards.