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

text alignment for widthxheight images

Browse Source
This commit is contained in:
Gavin McDonald
2025-08-24 11:13:18 -04:00
parent 3ab19e01fd
commit a981cf98d7
6 changed files with 69 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
lib/labelmaker_web/live/components/radio_component.ex
View File

@@ -1,39 +1,40 @@
defmodule LabelmakerWeb.RadioComponent do
use Phoenix.Component
# props: class, is_dm, settings, options
attr :class, :string, default: ""
attr :selected, :string, required: true
attr :options, :list, required: true
# 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"
attr :event_name, :string, required: true
def radio_component(assigns) do
~H"""
<fieldset class={["flex flex-col w-full", @class]}>
<div class="inline-flex overflow-hidden rounded w-full">
<%= for {option, index} <- Enum.with_index(@options) do %>
<label class={[
"flex justify-center cursor-pointer w-full px-3 py-2
<label
for={"radio-#{option}"}
class={[
"flex justify-center cursor-pointer w-full px-3 py-2
text-sm font-medium capitalize border border-gray-300
transition hover:text-primary-dark dark:hover:text-primary-light",
if(@selected == option,
do:
"bg-selected border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
else:
"bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
),
if(index == 0, do: "rounded-l", else: ""),
if(index == length(@options) - 1, do: "rounded-r", else: ""),
if(index != 0, do: "border-l border-gray-300", else: "")
]}>
if(@selected == option,
do:
"bg-selected-light border-gray-600 dark:bg-selected-dark dark:text-fg-dark dark:border-gray-300 font-bold",
else:
"bg-secondary-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 hover:bg-primary-dark hover:bg-primary-light"
),
if(index == 0, do: "rounded-l", else: ""),
if(index == length(@options) - 1, do: "rounded-r", else: ""),
if(index != 0, do: "border-l border-gray-300", else: "")
]}
>
<input
type="radio"
name="cardStyle"
value={option}
name="radio_option"
id={"radio-#{option}"}
checked={@selected == option}
phx-change="set_card_style"
phx-value-style={option}
phx-click={@event_name}
phx-value-option={option}
class="sr-only"
/>
{option}