2026-02-18 21:23:15 +00:00
|
|
|
defmodule BerrypodWeb.Layouts do
|
2025-12-30 12:26:26 +00:00
|
|
|
@moduledoc """
|
|
|
|
|
This module holds layouts and related functionality
|
|
|
|
|
used by your application.
|
|
|
|
|
"""
|
2026-02-18 21:23:15 +00:00
|
|
|
use BerrypodWeb, :html
|
2025-12-30 12:26:26 +00:00
|
|
|
|
|
|
|
|
# Embed all files in layouts/* within this module.
|
|
|
|
|
# The default root.html.heex file contains the HTML
|
|
|
|
|
# skeleton of your application, namely HTML headers
|
|
|
|
|
# and other static content.
|
|
|
|
|
embed_templates "layouts/*"
|
|
|
|
|
|
|
|
|
|
@doc """
|
|
|
|
|
Renders your app layout.
|
|
|
|
|
|
|
|
|
|
This function is typically invoked from every template,
|
|
|
|
|
and it often contains your application menu, sidebar,
|
|
|
|
|
or similar.
|
|
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
<Layouts.app flash={@flash}>
|
|
|
|
|
<h1>Content</h1>
|
|
|
|
|
</Layouts.app>
|
|
|
|
|
|
|
|
|
|
"""
|
|
|
|
|
attr :flash, :map, required: true, doc: "the map of flash messages"
|
|
|
|
|
|
|
|
|
|
attr :current_scope, :map,
|
|
|
|
|
default: nil,
|
|
|
|
|
doc: "the current [scope](https://hexdocs.pm/phoenix/scopes.html)"
|
|
|
|
|
|
|
|
|
|
slot :inner_block, required: true
|
|
|
|
|
|
|
|
|
|
def app(assigns) do
|
|
|
|
|
~H"""
|
refactor admin CSS: replace utility classes with semantic styles
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.
Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 17:15:25 +00:00
|
|
|
<main class="app-main">
|
|
|
|
|
<div class="app-container">
|
2025-12-30 12:26:26 +00:00
|
|
|
{render_slot(@inner_block)}
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<.flash_group flash={@flash} />
|
|
|
|
|
"""
|
|
|
|
|
end
|
|
|
|
|
|
2026-02-12 08:35:22 +00:00
|
|
|
@doc false
|
2026-02-12 14:17:38 +00:00
|
|
|
def admin_nav_active?(current_path, "/admin") do
|
|
|
|
|
if current_path == "/admin", do: "active", else: nil
|
|
|
|
|
end
|
|
|
|
|
|
2026-02-21 19:29:34 +00:00
|
|
|
def admin_nav_active?(current_path, "/admin/settings") do
|
|
|
|
|
if current_path == "/admin/settings", do: "active", else: nil
|
|
|
|
|
end
|
|
|
|
|
|
2026-02-12 08:35:22 +00:00
|
|
|
def admin_nav_active?(current_path, link_path) do
|
|
|
|
|
if String.starts_with?(current_path, link_path), do: "active", else: nil
|
|
|
|
|
end
|
|
|
|
|
|
2025-12-30 12:26:26 +00:00
|
|
|
@doc """
|
|
|
|
|
Shows the flash group with standard titles and content.
|
|
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
<.flash_group flash={@flash} />
|
|
|
|
|
"""
|
|
|
|
|
attr :flash, :map, required: true, doc: "the map of flash messages"
|
|
|
|
|
attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
|
|
|
|
|
|
|
|
|
|
def flash_group(assigns) do
|
|
|
|
|
~H"""
|
|
|
|
|
<div id={@id} aria-live="polite">
|
|
|
|
|
<.flash kind={:info} flash={@flash} />
|
|
|
|
|
<.flash kind={:error} flash={@flash} />
|
|
|
|
|
|
|
|
|
|
<.flash
|
|
|
|
|
id="client-error"
|
|
|
|
|
kind={:error}
|
|
|
|
|
title={gettext("We can't find the internet")}
|
|
|
|
|
phx-disconnected={show(".phx-client-error #client-error") |> JS.remove_attribute("hidden")}
|
|
|
|
|
phx-connected={hide("#client-error") |> JS.set_attribute({"hidden", ""})}
|
|
|
|
|
hidden
|
|
|
|
|
>
|
|
|
|
|
{gettext("Attempting to reconnect")}
|
|
|
|
|
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
|
|
|
|
|
</.flash>
|
|
|
|
|
|
|
|
|
|
<.flash
|
|
|
|
|
id="server-error"
|
|
|
|
|
kind={:error}
|
|
|
|
|
title={gettext("Something went wrong!")}
|
|
|
|
|
phx-disconnected={show(".phx-server-error #server-error") |> JS.remove_attribute("hidden")}
|
|
|
|
|
phx-connected={hide("#server-error") |> JS.set_attribute({"hidden", ""})}
|
|
|
|
|
hidden
|
|
|
|
|
>
|
|
|
|
|
{gettext("Attempting to reconnect")}
|
|
|
|
|
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
|
|
|
|
|
</.flash>
|
|
|
|
|
</div>
|
|
|
|
|
"""
|
|
|
|
|
end
|
|
|
|
|
|
|
|
|
|
@doc """
|
2026-02-18 01:15:28 +00:00
|
|
|
Provides dark vs light theme toggle based on themes defined in admin.css.
|
2025-12-30 12:26:26 +00:00
|
|
|
|
|
|
|
|
See <head> in root.html.heex which applies the theme before page load.
|
|
|
|
|
"""
|
|
|
|
|
def theme_toggle(assigns) do
|
|
|
|
|
~H"""
|
refactor admin CSS: replace utility classes with semantic styles
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.
Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 17:15:25 +00:00
|
|
|
<div class="theme-toggle">
|
2026-02-18 01:15:28 +00:00
|
|
|
<div class="theme-toggle-indicator absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0" />
|
2025-12-30 12:26:26 +00:00
|
|
|
|
|
|
|
|
<button
|
refactor admin CSS: replace utility classes with semantic styles
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.
Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 17:15:25 +00:00
|
|
|
class="theme-toggle-btn"
|
2025-12-30 12:26:26 +00:00
|
|
|
phx-click={JS.dispatch("phx:set-theme")}
|
|
|
|
|
data-phx-theme="system"
|
|
|
|
|
>
|
|
|
|
|
<.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
refactor admin CSS: replace utility classes with semantic styles
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.
Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 17:15:25 +00:00
|
|
|
class="theme-toggle-btn"
|
2025-12-30 12:26:26 +00:00
|
|
|
phx-click={JS.dispatch("phx:set-theme")}
|
|
|
|
|
data-phx-theme="light"
|
|
|
|
|
>
|
|
|
|
|
<.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
refactor admin CSS: replace utility classes with semantic styles
Replace Tailwind utility soup across admin templates with semantic
CSS classes. Add layout primitives (stack, row, cluster, grid),
extract JS transition helpers into transitions.css, and refactor
core_components, layouts, settings, newsletter, order_show, providers,
and theme editor templates.
Utility occurrences reduced from 290+ to 127 across admin files.
All 1679 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 17:15:25 +00:00
|
|
|
class="theme-toggle-btn"
|
2025-12-30 12:26:26 +00:00
|
|
|
phx-click={JS.dispatch("phx:set-theme")}
|
|
|
|
|
data-phx-theme="dark"
|
|
|
|
|
>
|
|
|
|
|
<.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
"""
|
|
|
|
|
end
|
|
|
|
|
end
|
