schuwi/component-system
2
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(elixir): component list image size

Browse Source
This commit is contained in:
Schuwi
2025-09-17 17:31:07 +02:00
parent 68b0c0714e
commit 8848986953
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/components_elixir_web/live/components_live.ex
View File

@@ -675,17 +675,17 @@ defmodule ComponentsElixirWeb.ComponentsLive do
<div class="bg-base-100 shadow overflow-hidden sm:rounded-md">
<ul class="divide-y divide-base-300" id="components-list" phx-update="replace">
<%= for component <- @components do %>
<li id={"component-#{component.id}"} class="px-6 py-4 hover:bg-base-200">
<div class="flex items-center justify-between">
<li id={"component-#{component.id}"} class="px-6 py-6 hover:bg-base-200 min-h-[6rem]">
<div class="flex items-start justify-between min-h-[5rem]">
<!-- Component Image -->
<div class="flex-shrink-0 mr-4">
<div class="flex-shrink-0 mr-6 h-20 w-20 grid place-items-center">
<%= if component.image_filename do %>
<button phx-click="show_image" phx-value-url={"/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity">
<img src={"/uploads/images/#{component.image_filename}"} alt={component.name} class="h-12 w-12 rounded-lg object-cover cursor-pointer" />
<button phx-click="show_image" phx-value-url={"/user_generated/uploads/images/#{component.image_filename}"} class="hover:opacity-75 transition-opacity block">
<img src={"/user_generated/uploads/images/#{component.image_filename}"} alt={component.name} class="max-h-20 max-w-20 rounded-md object-contain cursor-pointer block" />
</button>
<% else %>
<div class="h-12 w-12 rounded-lg bg-base-200 flex items-center justify-center">
<.icon name="hero-cube-transparent" class="h-6 w-6 text-base-content/50" />
<div class="h-20 w-20 rounded-md bg-base-200 flex items-center justify-center">
<.icon name="hero-cube-transparent" class="h-10 w-10 text-base-content/50" />
</div>
<% end %>
</div>