feat: improve index and show partners pages design

lib/atomic/organizations/partner.ex

@@ -27,6 +27,8 @@ defmodule Atomic.Organizations.Partner do
     field :description, :string
     field :notes, :string
 
+    field :banner, Atomic.Uploaders.Banner.Type
+
     field :benefits, :string
     field :archived, :boolean, default: false
     field :image, Uploaders.PartnerImage.Type

lib/atomic_web/live/partner_live/components/partner_card.ex

@@ -0,0 +1,49 @@
+defmodule AtomicWeb.PartnerLive.Components.PartnerCard do
+  @moduledoc false
+  use AtomicWeb, :component
+
+  import AtomicWeb.Components.{Avatar, Gradient}
+
+  attr :partner, :map, required: true
+
+  def partner_card(assigns) do
+    ~H"""
+    <li class="grid h-full w-full rounded-lg border border-zinc-200 hover:bg-zinc-50">
+      <div class="h-12 w-full">
+        <div class="h-full w-full">
+          <.gradient seed={@partner.id} class="rounded-t-lg" />
+        </div>
+      </div>
+
+      <div class="grid w-full">
+        <div class="flex flex-grow px-6">
+          <div class="relative bottom-6 flex">
+            <.avatar color={:light_zinc} class="" name={@partner.name} src={Uploaders.PartnerImage.url({@partner.image, @partner}, :original)} type={:company} size={:xl} />
+          </div>
+          <div class="mt-5 px-4">
+            <div class="group relative">
+              <p class="text-md line-clamp-1 text-lg font-semibold leading-6 text-zinc-900">{@partner.name}</p>
+              <div class="absolute top-full left-14 mt-2 hidden w-max rounded bg-gray-500 p-1 text-sm text-white opacity-100 transition-opacity duration-300 group-hover:block">{@partner.name}</div>
+              <div class="absolute top-full left-16 mt-1 hidden border-r-4 border-b-4 border-l-4 border-r-transparent border-b-gray-500 border-l-transparent group-hover:block"></div>
+            </div>
+            <%= if @partner.location do %>
+              <div class="z-1 flex items-center gap-x-1 leading-6">
+                <.icon name="hero-map-pin" class="h-6 w-6 text-zinc-400" />
+                <p class="text-center text-sm text-blue-400">{@partner.location.name}</p>
+              </div>
+            <% end %>
+          </div>
+        </div>
+        <ul class="flex list-none flex-col gap-2 px-10 pb-10">
+          <%= Enum.map(String.split(@partner.benefits, "\n"), fn phrase -> %>
+            <li class="flex items-start justify-start gap-1 text-sm leading-5 text-zinc-500">
+              <.icon name="hero-check" class="h-4 w-4 shrink-0" />
+              <span class="line-clamp-1">{phrase}</span>
+            </li>
+          <% end) %>
+        </ul>
+      </div>
+    </li>
+    """
+  end
+end

lib/atomic_web/live/partner_live/index.ex

@@ -1,7 +1,8 @@
 defmodule AtomicWeb.PartnerLive.Index do
+  import AtomicWeb.PartnerLive.Components.PartnerCard
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Button, Empty, Pagination, Tabs}
+  import AtomicWeb.Components.{Button, Empty, Pagination, Tabs}
   import AtomicWeb.LiveHelpers
 
   alias Atomic.Accounts

lib/atomic_web/live/partner_live/index.html.heex

@@ -1,4 +1,4 @@
-<.page title="Partners">
+<.page title={"#{@organization.name} Partners"}>
   <:actions>
     <%= if not @empty? and @has_permissions? do %>
       <.button navigate={~p"/organizations/#{@current_organization}/partners/new"} icon="hero-plus">
@@ -8,9 +8,9 @@
   </:actions>
   <!-- Tabs -->
   <div class="pt-4">
-    <div class="flex flex-col-reverse border-b border-zinc-200 xl:flex-row">
-      <div class="flex w-full items-center justify-between">
-        <.tabs class="px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col border-b border-zinc-200">
+      <div class="flex w-full flex-wrap items-center justify-between gap-2">
+        <.tabs class="overflow-auto px-4 sm:px-6 lg:px-8">
           <.link patch="?tab=all" replace={false}>
             <.tab active={@current_tab == "all"}>
               {gettext("Current Partners")}
@@ -29,42 +29,18 @@
   </div>
   <!-- Partners index -->
   <%= if @empty? and @has_permissions? do %>
-    <div class="mt-32">
+    <div class="mt-16 text-center sm:mt-32">
       <.empty_state url={~p"/organizations/#{@organization}/partners/new"} placeholder="partner" />
     </div>
   <% else %>
-    <ul role="list" class="">
+    <ul role="list" class="mx-4 my-4 grid gap-x-4 gap-y-4 lg:grid-cols-2">
       <%= for partner <- @partners do %>
-        <.link navigate={~p"/organizations/#{@organization}/partners/#{partner}"} class="block hover:bg-zinc-50">
-          <li class="flex flex-col justify-between gap-x-6 border-b border-zinc-200 px-4 py-5 md:flex-row">
-            <div class="flex w-full flex-col gap-x-4 md:flex-row">
-              <div class="flex-shrink-0">
-                <.avatar color={:light_zinc} name={partner.name} src={Uploaders.PartnerImage.url({partner.image, partner}, :original)} type={:company} size={:sm} />
-              </div>
-              <div class="flex-grow">
-                <p class="text-md font-semibold leading-6 text-zinc-900">{partner.name}</p>
-                <%= if partner.location do %>
-                  <div class="z-1 flex flex-row items-center gap-x-1 text-sm leading-6">
-                    <.icon name="hero-map-pin" class="size-5 text-zinc-400" />
-                    <p class="text-blue-500">{partner.location.name}</p>
-                  </div>
-                <% end %>
-                <p class="mt-1 overflow-hidden truncate overflow-ellipsis whitespace-normal text-xs leading-5 text-zinc-500">
-                  <%= Enum.map(String.split(partner.benefits, "\n"), fn phrase -> %>
-                    <%= if String.length(phrase) < 150 do %>
-                      {phrase}<br />
-                    <% else %>
-                      {String.slice(phrase, 0..150) <> "..."} <br />
-                    <% end %>
-                  <% end) %>
-                </p>
-              </div>
-            </div>
-          </li>
+        <.link navigate={~p"/organizations/#{partner.organization_id}/partners/#{partner.id}"} class="block hover:bg-zinc-50">
+          <.partner_card partner={partner} />
         </.link>
       <% end %>
     </ul>
 
-    <.pagination items={@partners} meta={@meta} params={@params} class="mt-2 flex w-full items-center justify-between" />
+    <.pagination items={@partners} meta={@meta} params={@params} class="mt-2 flex w-full flex-wrap items-center justify-between" />
   <% end %>
 </.page>

lib/atomic_web/live/partner_live/show.ex

@@ -1,7 +1,7 @@
 defmodule AtomicWeb.PartnerLive.Show do
   use AtomicWeb, :live_view
 
-  import AtomicWeb.Components.{Avatar, Socials}
+  import AtomicWeb.Components.{Avatar, Tabs, Gradient}
   import AtomicWeb.LiveHelpers
 
   alias Atomic.Accounts
@@ -14,7 +14,7 @@ defmodule AtomicWeb.PartnerLive.Show do
   end
 
   @impl true
-  def handle_params(%{"organization_id" => organization_id, "id" => id}, _, socket) do
+  def handle_params(%{"organization_id" => organization_id, "id" => id} = params, _, socket) do
     organization = Organizations.get_organization!(organization_id)
     partner = Partners.get_partner!(id)
 
@@ -23,6 +23,7 @@ defmodule AtomicWeb.PartnerLive.Show do
      |> assign(:page_title, partner.name)
      |> assign_page_metadata(:partner)
      |> assign(:current_page, :partners)
+     |> assign(:current_tab, current_tab(socket, params))
      |> assign(:organization, organization)
      |> assign(:partner, partner)
      |> assign(
@@ -32,6 +33,9 @@ defmodule AtomicWeb.PartnerLive.Show do
      |> assign(:has_permissions?, has_permissions?(socket, organization_id))}
   end
 
+  defp current_tab(_socket, params) when is_map_key(params, "tab"), do: params["tab"]
+  defp current_tab(_socket, _params), do: "benefits"
+
   defp has_permissions?(socket, _organization_id) when not socket.assigns.is_authenticated?,
     do: false