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

better width x height support

Browse Source
This commit is contained in:
Gavin McDonald
2025-08-21 16:08:47 -04:00
parent 8baa70485f
commit 6baaa152ed
8 changed files with 193 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
lib/labelmaker_web/live/home.html.heex Normal file
View File

@@ -0,0 +1,160 @@
<div class="max-w-xl mx-auto p-3 space-y-5">
<h1 class="text-5xl font-bold text-center text-primary">Labelmaker</h1>
<p class="text-l text-center w-[350px] m-auto">
Easily create text-based images. Perfect for quickly creating decals in Tabletop Simulator.
</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 == "c", 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 %>
<% end %>
</div>
<div class="flex flex-row justify-end" style="margin: 5px 0 -15px;">
<div class="flex flex-row gap-1">
<div
phx-click="update_preview"
phx-value-bg="r"
class="w-[12px] h-[12px] bg-gradient-to-r from-black to-white cursor-pointer"
>
</div>
<div
phx-click="update_preview"
phx-value-bg="b"
class="w-[12px] h-[12px] bg-gradient-to-b from-black to-white cursor-pointer"
>
</div>
<div
phx-click="update_preview"
phx-value-bg="c"
class="w-[12px] h-[12px] cursor-pointer"
style={"background-color: #{@color}"}
>
</div>
</div>
</div>
<form
id="labelmaker"
phx-hook="PersistData"
phx-change="update_label"
phx-submit="make_label"
class="space-y-4"
>
<div>
<label for="label" class="block text-sm font-medium">Label</label>
<input
phx-hook="EnterToNewline"
type="text"
id="label"
name="label"
value={@label}
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>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="font" class="block text-sm font-medium">Font</label>
<select
id="font"
name="font"
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"
>
<%= for font <- Constants.fonts() do %>
<option value={font} selected={@font == font}>{font}</option>
<% end %>
</select>
</div>
<div>
<label for="color" class="block text-sm font-medium">Color</label>
<select
id="color"
name="color"
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"
>
<%= for color <- Constants.colors() do %>
<option value={color} selected={@color == color}>{color}</option>
<% end %>
</select>
</div>
<div>
<label for="outline" class="block text-sm font-medium">Outline</label>
<select
id="outline"
name="outline"
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"
>
<%= for outline <- Constants.outlines() do %>
<option value={outline} selected={@outline == outline}>{outline}</option>
<% end %>
</select>
</div>
<div>
<label for="size" class="block text-sm font-medium">Size</label>
<select
id="size"
name="size"
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"
>
<%= for size <- Constants.sizes() do %>
<option value={size} selected={@size == size}>{size}</option>
<% end %>
</select>
</div>
<div>
<label for="width" class="block text-sm font-medium">Width</label>
<input
type="number"
id="width"
name="width"
min="0"
max={Constants.max_width()}
step={1}
value={if @width != 0, do: @width}
placeholder="Image width"
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"
/>
</div>
<div>
<label for="height" class="block text-sm font-medium">Height</label>
<input
type="number"
id="height"
name="height"
min="0"
max={Constants.max_height()}
step={1}
value={if @height != 0, do: @height}
placeholder="Image height"
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"
/>
</div>
</div>
</form>
<div class="text-center">
<a href={@link}>
<button class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
Create
</button>
</a>
</div>
</div>