local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 51 Pull requests 13 Projects 1 Releases Packages 1 Activity Actions

fix: adapt layout to phoenix 1.8
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse source
This commit is contained in:
Moritz 2025-07-03 21:29:01 +02:00
parent fb9a3cd063
commit c251e1dba3
Signed by: moritz
GPG key ID: 1020A035E5DD0824
2 changed files with 38 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

87
lib/mv_web/components/layouts.ex
View file

@ -11,60 +11,49 @@ defmodule MvWeb.Layouts do
embed_templates "layouts/*"
@doc """
Renders the app layout
## Examples
<Layouts.app flash={@flash}>
<h1>Content</h1>
</Layout.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
@doc "The main app layout (Backpex shell, topbar, sidebar, flash, content)"
attr :flash, :map, required: true
attr :socket, :any, default: nil
attr :current_url, :string, default: nil
attr :fluid?, :boolean, default: false
attr :inner_content, :any, required: true
def app(assigns) do
~H"""
<header class="navbar px-4 sm:px-6 lg:px-8">
<div class="flex-1">
<a href="/" class="flex-1 flex w-fit items-center gap-2">
<img src={~p"/images/logo.svg"} width="36" />
<span class="text-sm font-semibold">v{Application.spec(:phoenix, :vsn)}</span>
</a>
</div>
<div class="flex-none">
<ul class="flex flex-column px-1 space-x-4 items-center">
<li>
<a href="https://phoenixframework.org/" class="btn btn-ghost">Website</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix" class="btn btn-ghost">GitHub</a>
</li>
<li>
<.theme_toggle />
</li>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html" class="btn btn-primary">
Get Started <span aria-hidden="true">&rarr;</span>
</a>
</li>
</ul>
</div>
</header>
<Backpex.HTML.Layout.app_shell fluid={@fluid?}>
<:topbar>
<Backpex.HTML.Layout.topbar_branding />
<main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl space-y-4">
{render_slot(@inner_block)}
</div>
</main>
<Backpex.HTML.Layout.theme_selector
socket={@socket}
themes={[
{"Light", "light"},
{"Dark", "dark"}
]}
/>
<.flash_group flash={@flash} />
<Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
<:label>
<label tabindex="0" class="btn btn-square btn-ghost">
<.icon name="hero-user" class="size-6" />
</label>
</:label>
<li>
<.link navigate={~p"/"} class="text-error flex justify-between hover:bg-base-200">
<p>Logout</p>
<.icon name="hero-arrow-right-on-rectangle" class="size-5" />
</.link>
</li>
</Backpex.HTML.Layout.topbar_dropdown>
</:topbar>
<:sidebar>
<Backpex.HTML.Layout.sidebar_item current_url={@current_url} navigate={~p"/members"}>
<.icon name="hero-users" class="size-5" /> Members
</Backpex.HTML.Layout.sidebar_item>
</:sidebar>
<Backpex.HTML.Layout.flash_messages flash={@flash} />
<%= @inner_content %>
</Backpex.HTML.Layout.app_shell>
"""
end

34
lib/mv_web/components/layouts/app.html.heex
View file

@ -1,34 +0,0 @@
<Backpex.HTML.Layout.app_shell fluid={@fluid?}>
<:topbar>
<Backpex.HTML.Layout.topbar_branding />
<Backpex.HTML.Layout.theme_selector
socket={@socket}
themes={[
{"Light", "light"},
{"Dark", "dark"}
]}
/>
<Backpex.HTML.Layout.topbar_dropdown class="mr-2 md:mr-0">
<:label>
<label tabindex="0" class="btn btn-square btn-ghost">
<.icon name="hero-user" class="size-6" />
</label>
</:label>
<li>
<.link navigate={~p"/"} class="text-error flex justify-between hover:bg-base-200">
<p>Logout</p>
<.icon name="hero-arrow-right-on-rectangle" class="size-5" />
</.link>
</li>
</Backpex.HTML.Layout.topbar_dropdown>
</:topbar>
<:sidebar>
<Backpex.HTML.Layout.sidebar_item current_url={@current_url} navigate={~p"/members"}>
<.icon name="hero-users" class="size-5" /> Members
</Backpex.HTML.Layout.sidebar_item>
</:sidebar>
<Backpex.HTML.Layout.flash_messages flash={@flash} />
<%= @inner_content %>
</Backpex.HTML.Layout.app_shell>