gavin/labelmaker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

visual warning when max_label_length exceeded

Browse Source
This commit is contained in:
Gavin McDonald
2025-05-11 15:01:19 -04:00
parent 8a42947995
commit 9cc3621144
5 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/labelmaker_web/live/home.ex
View File

@@ -33,18 +33,18 @@ defmodule LabelmakerWeb.Home do
end
def render(assigns) do
label_too_long = String.length(assigns.label) > Constants.max_label_length()
~H"""
<div class="max-w-xl mx-auto p-4 space-y-6">
<h1 class="text-2xl font-bold text-center">Labelmaker</h1>
<div
class={[
"flex justify-center items-center p-4 overflow-hidden whitespace-nowrap bg-gradient-to-r from-black to-white border rounded border-primary",
@outline != "none" && "outline-#{@outline}"
]}
class={
"flex justify-center items-center p-4 overflow-hidden whitespace-nowrap bg-gradient-to-r from-black to-white border rounded transition duration-300 #{if label_too_long, do: "border-danger", else: "border-primary"} #{if label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}"}
style={"height: calc(2rem + #{@preview_height}px); color: #{@color}; font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px;"}
>
<%= if String.length(@label) > Constants.max_label_length() do %>
<%= if label_too_long do %>
{Constants.max_label_error()}
<% else %>
<%= for {str, i} <- Enum.with_index(@preview_text) do %>
@@ -63,7 +63,7 @@ defmodule LabelmakerWeb.Home do
name="label"
value={@label}
placeholder="Enter text"
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50"
class={"mt-1 block w-full rounded border border-gray-300 px-3 py-2 text-fg-light dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50 transition duration-300 #{if label_too_long, do: "bg-danger", else: "bg-secondary-light dark:bg-secondary-dark"}"}
/>
</div>