Mark required fields in UI
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Rafael Epplée 2025-12-02 09:56:54 +01:00
parent e803dbdf8b
commit 56173d423b
No known key found for this signature in database
GPG key ID: B4EFE6DC59FAE118
5 changed files with 86 additions and 30 deletions

View file

@ -56,7 +56,7 @@ defmodule MvWeb.CoreComponents do
id={@id}
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
role="alert"
class="toast toast-top toast-end z-50"
class="z-50 toast toast-top toast-end"
{@rest}
>
<div class={[
@ -71,7 +71,7 @@ defmodule MvWeb.CoreComponents do
<p>{msg}</p>
</div>
<div class="flex-1" />
<button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}>
<button type="button" class="self-start cursor-pointer group" aria-label={gettext("close")}>
<.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
</button>
</div>
@ -180,7 +180,7 @@ defmodule MvWeb.CoreComponents do
end)
~H"""
<fieldset class="fieldset mb-2">
<fieldset class="mb-2 fieldset">
<label>
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
<span class="label">
@ -192,7 +192,11 @@ defmodule MvWeb.CoreComponents do
checked={@checked}
class={@class || "checkbox checkbox-sm"}
{@rest}
/>{@label}
/>{@label}<span
:if={@rest[:required]}
class="text-red-700 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
</label>
<.error :for={msg <- @errors}>{msg}</.error>
@ -202,9 +206,15 @@ defmodule MvWeb.CoreComponents do
def input(%{type: "select"} = assigns) do
~H"""
<fieldset class="fieldset mb-2">
<fieldset class="mb-2 fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-700 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<select
id={@id}
name={@name}
@ -223,9 +233,15 @@ defmodule MvWeb.CoreComponents do
def input(%{type: "textarea"} = assigns) do
~H"""
<fieldset class="fieldset mb-2">
<fieldset class="mb-2 fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-700 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<textarea
id={@id}
name={@name}
@ -244,9 +260,15 @@ defmodule MvWeb.CoreComponents do
# All other inputs text, datetime-local, url, password, etc. are handled here...
def input(assigns) do
~H"""
<fieldset class="fieldset mb-2">
<fieldset class="mb-2 fieldset">
<label>
<span :if={@label} class="label mb-1">{@label}</span>
<span :if={@label} class="mb-1 label">
{@label}<span
:if={@rest[:required]}
class="text-red-700 tooltip tooltip-right"
data-tip={gettext("This field cannot be empty")}
>*</span>
</span>
<input
type={@type}
name={@name}
@ -517,7 +539,7 @@ defmodule MvWeb.CoreComponents do
<div class="mt-14">
<dl class="-my-4 divide-y divide-zinc-100">
<div :for={{name, value} <- @items} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
<dt class="w-1/4 flex-none text-zinc-500">{name}</dt>
<dt class="flex-none w-1/4 text-zinc-500">{name}</dt>
<dd class="text-zinc-700">{value}</dd>
</div>
</dl>

View file

@ -37,7 +37,7 @@ defmodule MvWeb.MemberLive.Form do
<.header>
{@page_title}
<:subtitle>
{gettext("Use this form to manage member records and their properties.")}
{gettext("Fields marked with an asterisk (*) cannot be empty.")}
</:subtitle>
</.header>