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

better newline support

Browse Source
This commit is contained in:
Gavin McDonald
2025-09-01 15:18:11 -04:00
parent e36720c011
commit c5acb7ac33
4 changed files with 57 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lib/labelmaker_web/live/home.html.heex
View File

@@ -5,17 +5,24 @@
</p>
<div
class={
"flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition duration-300 #{@preview_background} #{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: #{if @label_too_long, do: "white", else: @color}; #{Tools.outline(@outline, @label_too_long)} font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px; background-color: #{if @preview_background == "", do: @color, else: ""}"}
class={"
flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition-all duration-300
#{@preview_background}
#{if @label_too_long, do: "border-danger", else: "border-primary"}
#{if @label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}
"}
style={"
aspect-ratio: 4 / 3;
color: #{if @label_too_long, do: "white", else: @color};
#{Tools.outline(@outline, @label_too_long)}
font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px;
background-color: #{if @preview_background == "", do: @color, else: ""}
"}
>
<%= if @label_too_long do %>
{Constants.max_label_error()}
<% else %>
<%= for {str, i} <- Enum.with_index(@preview_text) do %>
{str}
{if i < length(@preview_text) - 1, do: raw("<br />")}
<% end %>
{raw(@preview_text)}
<% end %>
</div>
<div class="flex flex-row justify-end" style="margin: 5px 0 -15px;">
@@ -51,18 +58,13 @@
>
<div>
<label for="label" class="block text-sm font-medium">Label</label>
<input
phx-hook="EnterToNewline"
type="text"
<textarea
id="label"
name="label"
value={@label}
rows={@rows + 1}
placeholder="Enter text"
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"}"}
/>
<p class="text-xs text-gray-600 dark:text-gray-400 m-0 ml-1">
<code>\n</code> or &LT;Enter&GT; for newlines
</p>
>{@label}</textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">