diff --git a/assets/css/satoshi.css b/assets/css/satoshi.css index da755ca..272640a 100644 --- a/assets/css/satoshi.css +++ b/assets/css/satoshi.css @@ -22,9 +22,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-Light.woff2'), - url('/fonts/satoshi/Satoshi-Light.woff'), + src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'), url('/fonts/satoshi/Satoshi-Light.ttf'); font-weight: 300; font-display: swap; @@ -33,10 +31,8 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-LightItalic.woff2'), - url('/fonts/satoshi/Satoshi-LightItalic.woff'), - url('/fonts/satoshi/Satoshi-LightItalic.ttf'); + src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'), + url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf'); font-weight: 300; font-display: swap; font-style: italic; @@ -44,9 +40,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-Regular.woff2'), - url('/fonts/satoshi/Satoshi-Regular.woff'), + src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'), url('/fonts/satoshi/Satoshi-Regular.ttf'); font-weight: 400; font-display: swap; @@ -55,9 +49,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-Italic.woff2'), - url('/fonts/satoshi/Satoshi-Italic.woff'), + src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'), url('/fonts/satoshi/Satoshi-Italic.ttf'); font-weight: 400; font-display: swap; @@ -66,9 +58,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-Medium.woff2'), - url('/fonts/satoshi/Satoshi-Medium.woff'), + src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'), url('/fonts/satoshi/Satoshi-Medium.ttf'); font-weight: 500; font-display: swap; @@ -77,10 +67,8 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-MediumItalic.woff2'), - url('/fonts/satoshi/Satoshi-MediumItalic.woff'), - url('/fonts/satoshi/Satoshi-MediumItalic.ttf'); + src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'), + url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf'); font-weight: 500; font-display: swap; font-style: italic; @@ -88,9 +76,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-Bold.woff2'), - url('/fonts/satoshi/Satoshi-Bold.woff'), + src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'), url('/fonts/satoshi/Satoshi-Bold.ttf'); font-weight: 700; font-display: swap; @@ -99,9 +85,7 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), - url('/fonts/satoshi/Satoshi-BoldItalic.woff'), + src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'), url('/fonts/satoshi/Satoshi-BoldItalic.ttf'); font-weight: 700; font-display: swap; @@ -110,10 +94,8 @@ @font-face { font-family: 'Satoshi'; - src: - url('/fonts/satoshi/Satoshi-BlackItalic.woff2'), - url('/fonts/satoshi/Satoshi-BlackItalic.woff'), - url('/fonts/satoshi/Satoshi-BlackItalic.ttf'); + src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'), + url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf'); font-weight: 900; font-display: swap; font-style: italic; diff --git a/lib/pinchflat_web.ex b/lib/pinchflat_web.ex index 036a9b1..05187a1 100644 --- a/lib/pinchflat_web.ex +++ b/lib/pinchflat_web.ex @@ -84,8 +84,10 @@ defmodule PinchflatWeb do # HTML escaping functionality import Phoenix.HTML # Core UI components and translation - import PinchflatWeb.CoreComponents import PinchflatWeb.Gettext + import PinchflatWeb.CoreComponents + import PinchflatWeb.CustomComponents.TableComponents + import PinchflatWeb.CustomComponents.ButtonComponents # Shortcut for generating JS commands alias Phoenix.LiveView.JS diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex index 6f80c9f..cc65540 100644 --- a/lib/pinchflat_web/components/core_components.ex +++ b/lib/pinchflat_web/components/core_components.ex @@ -201,46 +201,14 @@ defmodule PinchflatWeb.CoreComponents do def simple_form(assigns) do ~H""" <.form :let={f} for={@for} as={@as} {@rest}> -
- <%= render_slot(@inner_block, f) %> -
- <%= render_slot(action, f) %> -
+ <%= render_slot(@inner_block, f) %> +
+ <%= render_slot(action, f) %>
""" end - @doc """ - Renders a button. - - ## Examples - - <.button>Send! - <.button phx-click="go" class="ml-2">Send! - """ - attr :type, :string, default: nil - attr :class, :string, default: nil - attr :rest, :global, include: ~w(disabled form name value) - - slot :inner_block, required: true - - def button(assigns) do - ~H""" - - """ - end - @doc """ Renders an input with label and error messages. @@ -270,11 +238,12 @@ defmodule PinchflatWeb.CoreComponents do attr :name, :any attr :label, :string, default: nil attr :value, :any + attr :help, :string, default: nil attr :type, :string, default: "text", values: ~w(checkbox color date datetime-local email file hidden month number password - range radio search select tel text textarea time url week) + toggle range radio search select tel text textarea time url week) attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form, for example: @form[:email]" @@ -308,7 +277,7 @@ defmodule PinchflatWeb.CoreComponents do ~H"""
-
""" end + def input(%{type: "toggle"} = assigns) do + assigns = + assign_new(assigns, :checked, fn -> + Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value]) + end) + + ~H""" +
+ <.label for={@id}><%= @label %> +
+ + +
+
+
+
+
+
+ <.help :if={@help}><%= @help %> + <.error :for={msg <- @errors}><%= msg %> +
+
+ """ + end + def input(%{type: "select"} = assigns) do ~H"""
@@ -333,13 +340,17 @@ defmodule PinchflatWeb.CoreComponents do + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %>
""" @@ -360,6 +371,7 @@ defmodule PinchflatWeb.CoreComponents do ]} {@rest} ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %> + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %>
""" @@ -376,18 +388,32 @@ defmodule PinchflatWeb.CoreComponents do id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} class={[ - "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6", - "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400", - @errors == [] && "border-zinc-300 focus:border-zinc-400", + "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black", + "outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter", + "dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary", @errors != [] && "border-rose-400 focus:border-rose-400" ]} {@rest} /> + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %> """ end + @doc """ + Renders help text. + """ + slot :inner_block, required: true + + def help(assigns) do + ~H""" +

+ <%= render_slot(@inner_block) %> +

+ """ + end + @doc """ Renders a label. """ @@ -396,7 +422,7 @@ defmodule PinchflatWeb.CoreComponents do def label(assigns) do ~H""" -