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

feat(elixir): improve display of component loc&cnt

Browse Source
This commit is contained in:
Schuwi
2025-09-14 20:18:00 +02:00
parent 4d68922876
commit 02521f9c6d
1 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -681,8 +681,9 @@ defmodule ComponentsElixirWeb.ComponentsLive do
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center justify-between"> <!-- Top row: Name and Category -->
<div class="flex items-center"> <div class="flex items-start justify-between">
<div class="flex items-center min-w-0 flex-1">
<p class="text-sm font-medium text-indigo-600 truncate"> <p class="text-sm font-medium text-indigo-600 truncate">
<%= if component.datasheet_url do %> <%= if component.datasheet_url do %>
<a <a
@@ -700,36 +701,46 @@ defmodule ComponentsElixirWeb.ComponentsLive do
<span class="ml-2 text-blue-500" title="Datasheet available">📄</span> <span class="ml-2 text-blue-500" title="Datasheet available">📄</span>
<% end %> <% end %>
</div> </div>
<div class="ml-2 flex-shrink-0 flex"> <div class="ml-4 flex-shrink-0">
<p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
{component.category.name} {component.category.name}
</p> </span>
</div> </div>
</div> </div>
<div class="mt-2 flex justify-between">
<div class="sm:flex"> <!-- Middle row: Description -->
<p class="flex items-center text-sm text-gray-500"> <%= if component.description do %>
<%= if component.description do %> <div class="mt-1">
{component.description} <p class="text-sm text-gray-500 line-clamp-2">
<% end %> {component.description}
</p> </p>
</div> </div>
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0"> <% end %>
<%= if component.storage_location do %>
<p class="mr-6"> <!-- Bottom row: Metadata -->
<span class="font-medium">Location:</span> {storage_location_display_name(component.storage_location)} <div class="mt-2 grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-1 text-sm text-gray-500">
</p> <%= if component.storage_location do %>
<% end %> <div class="flex items-center min-w-0">
<p class="mr-6"> <.icon name="hero-map-pin" class="w-4 h-4 mr-1 text-gray-400 flex-shrink-0" />
<span class="font-medium">Count:</span> {component.count} <span class="font-medium">Location:</span>
</p> <span class="ml-1 truncate">{storage_location_display_name(component.storage_location)}</span>
<%= if @sort_criteria == "all" or @sort_criteria == "id" do %> </div>
<p class="mr-6"> <% end %>
<span class="font-medium">ID:</span> {component.id} <div class="flex items-center">
</p> <.icon name="hero-cube" class="w-4 h-4 mr-1 text-gray-400" />
<% end %> <span class="font-medium">Count:</span>
<span class="ml-1">{component.count}</span>
</div> </div>
<%= if @sort_criteria == "all" or @sort_criteria == "id" do %>
<div class="flex items-center">
<.icon name="hero-hashtag" class="w-4 h-4 mr-1 text-gray-400" />
<span class="font-medium">ID:</span>
<span class="ml-1">{component.id}</span>
</div>
<% end %>
</div> </div>
<!-- Keywords row -->
<%= if component.keywords do %> <%= if component.keywords do %>
<div class="mt-2"> <div class="mt-2">
<p class="text-xs text-gray-400"> <p class="text-xs text-gray-400">