Moritz
ba78a6ac7a
All checks were successful
continuous-integration/drone/push Build is passing
- Green success alert for copied confirmation - Blue info alert with BCC privacy tip - Mailto button opens email program with BCC recipients - Alerts stack vertically instead of overlapping
100 lines
3 KiB
Elixir
100 lines
3 KiB
Elixir
defmodule MvWeb.Layouts do
|
|
@moduledoc """
|
|
This module holds different layouts used by your application.
|
|
|
|
See the `layouts` directory for all templates available.
|
|
The "root" layout is a skeleton rendered as part of the
|
|
application router. The "app" layout is rendered as component
|
|
in regular views and live views.
|
|
"""
|
|
use MvWeb, :html
|
|
use Gettext, backend: MvWeb.Gettext
|
|
import MvWeb.Layouts.Navbar
|
|
|
|
embed_templates "layouts/*"
|
|
|
|
@doc """
|
|
Renders the app layout. Can be used with or without a current_user.
|
|
When current_user is present, it will show the navigation bar.
|
|
|
|
## Examples
|
|
|
|
<Layouts.app flash={@flash}>
|
|
<h1>Content</h1>
|
|
</Layout.app>
|
|
|
|
<Layouts.app flash={@flash} current_user={@current_user}>
|
|
<h1>Authenticated Content</h1>
|
|
</Layout.app>
|
|
|
|
"""
|
|
attr :flash, :map, required: true, doc: "the map of flash messages"
|
|
|
|
attr :current_user, :map, default: nil, doc: "the current user, if authenticated"
|
|
|
|
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"""
|
|
<%= if @current_user do %>
|
|
<.navbar current_user={@current_user} />
|
|
<% end %>
|
|
<main class="px-4 py-20 sm:px-6 lg:px-16">
|
|
<div class="mx-auto max-full space-y-4">
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
</main>
|
|
|
|
<.flash_group flash={@flash} />
|
|
"""
|
|
end
|
|
|
|
@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" class="toast toast-top toast-end z-50 flex flex-col gap-2">
|
|
<.flash kind={:success} flash={@flash} />
|
|
<.flash kind={:warning} flash={@flash} />
|
|
<.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
|
|
end
|