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) %> +
+ """ + end + @doc """ Renders a label. """ @@ -396,7 +422,7 @@ defmodule PinchflatWeb.CoreComponents do def label(assigns) do ~H""" -+
<.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" /> <%= render_slot(@inner_block) %>
@@ -446,10 +472,10 @@ defmodule PinchflatWeb.CoreComponents do ## Examples - <.table id="users" rows={@users}> + <.old_table id="users" rows={@users}> <:col :let={user} label="id"><%= user.id %> <:col :let={user} label="username"><%= user.username %> - + """ attr :id, :string, required: true attr :rows, :list, required: true @@ -466,56 +492,54 @@ defmodule PinchflatWeb.CoreComponents do slot :action, doc: "the slot for showing user actions in the last table column" - def table(assigns) do + def old_table(assigns) do assigns = with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end) end ~H""" -| <%= col[:label] %> | -- <%= gettext("Actions") %> - | -
|---|---|
|
-
-
-
- <%= render_slot(col, @row_item.(row)) %>
-
-
- |
-
-
-
-
- <%= render_slot(action, @row_item.(row)) %>
-
-
- |
-
| <%= col[:label] %> | ++ <%= gettext("Actions") %> + | +
|---|---|
|
+
+
+
+ <%= render_slot(col, @row_item.(row)) %>
+
+
+ |
+
+
+
+
+ <%= render_slot(action, @row_item.(row)) %>
+
+
+ |
+
| + <%= col[:label] %> + | +
|---|
| length(@rows) && "border-b border-[#eee] dark:border-π", + col[:class] + ]} + > + <%= render_slot(col, @row_item.(row)) %> + | +