feat: add theme selector to unauthenticated pages
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
99a8d64344
commit
104faf7006
GPG key ID:
40E7A58C4AA1EDB2
6 changed files with 98 additions and 69 deletions
|
|
@ -1295,6 +1295,41 @@ defmodule MvWeb.CoreComponents do
|
|||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a theme toggle using DaisyUI swap (sun/moon with rotate effect).
|
||||
|
||||
Wired to the theme script in root layout: checkbox uses `data-theme-toggle`,
|
||||
root script syncs checked state (checked = dark) and listens for `phx:set-theme`.
|
||||
Use in public header or sidebar. Optional `class` is applied to the wrapper.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "Optional extra classes for the swap wrapper"
|
||||
|
||||
def theme_swap(assigns) do
|
||||
assigns = assign(assigns, :wrapper_class, assigns[:class])
|
||||
|
||||
~H"""
|
||||
<div class={[@wrapper_class]}>
|
||||
<label
|
||||
class="swap swap-rotate cursor-pointer focus-within:outline-none focus-within:focus-visible:ring-2 focus-within:focus-visible:ring-primary focus-within:focus-visible:ring-offset-2 rounded"
|
||||
aria-label={gettext("Toggle dark mode")}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
data-theme-toggle
|
||||
aria-label={gettext("Toggle dark mode")}
|
||||
onchange="window.dispatchEvent(new CustomEvent('phx:set-theme',{detail:{theme:this.checked?'dark':'light'}}))"
|
||||
/>
|
||||
<span class="swap-on size-6 flex items-center justify-center" aria-hidden="true">
|
||||
<.icon name="hero-moon" class="size-5" />
|
||||
</span>
|
||||
<span class="swap-off size-6 flex items-center justify-center" aria-hidden="true">
|
||||
<.icon name="hero-sun" class="size-5" />
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a [Heroicon](https://heroicons.com).
|
||||
|
||||
|
|
|
|||
|
|
@ -39,18 +39,21 @@ defmodule MvWeb.Layouts do
|
|||
<span class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center max-w-[50%] truncate">
|
||||
{@club_name}
|
||||
</span>
|
||||
<form method="post" action={~p"/set_locale"} class="shrink-0">
|
||||
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
<div class="shrink-0 flex items-center gap-2">
|
||||
<form method="post" action={~p"/set_locale"}>
|
||||
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
<.theme_swap />
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-4 py-8 sm:px-6">
|
||||
<div class="mx-auto max-full space-y-4">
|
||||
|
|
@ -156,18 +159,21 @@ defmodule MvWeb.Layouts do
|
|||
<span class="absolute left-1/2 -translate-x-1/2 text-lg font-bold text-center max-w-[50%] truncate">
|
||||
{@club_name}
|
||||
</span>
|
||||
<form method="post" action={~p"/set_locale"} class="shrink-0">
|
||||
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
<div class="shrink-0 flex items-center gap-2">
|
||||
<form method="post" action={~p"/set_locale"}>
|
||||
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
<.theme_swap />
|
||||
</div>
|
||||
</header>
|
||||
<main class="px-4 py-8 sm:px-6">
|
||||
<div class="mx-auto space-y-4 max-full">
|
||||
|
|
|
|||
|
|
@ -251,21 +251,22 @@ defmodule MvWeb.Layouts.Sidebar do
|
|||
defp sidebar_footer(assigns) do
|
||||
~H"""
|
||||
<div class="mt-auto p-4 border-t border-base-300 space-y-4">
|
||||
<!-- Language Selector (nur expanded) -->
|
||||
<form method="post" action={~p"/set_locale"} class="expanded-only">
|
||||
<input type="hidden" name="_csrf_token" value={get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm w-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
<!-- Theme Toggle (immer sichtbar) -->
|
||||
<.theme_toggle />
|
||||
<!-- Theme swap + Language selector in one row (theme left, language right when expanded) -->
|
||||
<div class="flex items-center gap-2">
|
||||
<.theme_swap />
|
||||
<form method="post" action={~p"/set_locale"} class="expanded-only flex-1 min-w-0">
|
||||
<input type="hidden" name="_csrf_token" value={get_csrf_token()} />
|
||||
<select
|
||||
name="locale"
|
||||
onchange="this.form.submit()"
|
||||
class="select select-sm w-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||||
aria-label={gettext("Select language")}
|
||||
>
|
||||
<option value="de" selected={Gettext.get_locale(MvWeb.Gettext) == "de"}>Deutsch</option>
|
||||
<option value="en" selected={Gettext.get_locale(MvWeb.Gettext) == "en"}>English</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<!-- User Menu (nur wenn current_user existiert) -->
|
||||
<%= if @current_user do %>
|
||||
<.user_menu current_user={@current_user} />
|
||||
|
|
@ -274,29 +275,6 @@ defmodule MvWeb.Layouts.Sidebar do
|
|||
"""
|
||||
end
|
||||
|
||||
defp theme_toggle(assigns) do
|
||||
~H"""
|
||||
<label
|
||||
class="flex items-center gap-2 cursor-pointer justify-center focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2"
|
||||
aria-label={gettext("Toggle dark mode")}
|
||||
>
|
||||
<.icon name="hero-sun" class="size-5" aria-hidden="true" />
|
||||
<div id="theme-toggle" phx-update="ignore">
|
||||
<input
|
||||
id="theme-toggle-input"
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm focus:outline-none"
|
||||
data-theme-toggle
|
||||
onchange="window.dispatchEvent(new CustomEvent('phx:set-theme',{detail:{theme:this.checked?'dark':'light'}}))"
|
||||
aria-label={gettext("Toggle dark mode")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<.icon name="hero-moon" class="size-5" aria-hidden="true" />
|
||||
</label>
|
||||
"""
|
||||
end
|
||||
|
||||
attr :current_user, :map, default: nil, doc: "The current user"
|
||||
|
||||
defp user_menu(assigns) do
|
||||
|
|
|
|||
|
|
@ -100,13 +100,13 @@ defmodule MvWeb.JoinLive do
|
|||
/>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-base-content/70">
|
||||
<p class="text-sm text-base-content/85">
|
||||
{gettext(
|
||||
"By submitting your application you will receive an email with a confirmation link. Once you have confirmed your email address, your application will be reviewed."
|
||||
)}
|
||||
</p>
|
||||
|
||||
<p class="text-xs text-base-content/60">
|
||||
<p class="text-xs text-base-content/80">
|
||||
{gettext(
|
||||
"Your details are only used to process your membership application and to contact you. To prevent abuse we also process technical data (e.g. IP address) only as necessary."
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue