graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make org boxes clickable and add global layout

Browse source 
- Wrap /orgs page in Layouts.app to include header/footer
- Make entire org box clickable by using .link component
- Remove 'Open' button - entire card is now the link
- Add cursor-pointer for better UX
This commit is contained in:
Graham McIntire 2026-01-04 11:27:36 -06:00
parent 9a721191fe
commit c87630f472
No known key found for this signature in database
1 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
lib/towerops_web/live/org_live/index.html.heex
View file

@ -1,40 +1,38 @@
<.header>
{@page_title}
<:actions>
<.button navigate={~p"/orgs/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> New Organization
</.button>
</:actions>
</.header>
<Layouts.app flash={@flash}>
<.header>
{@page_title}
<:actions>
<.button navigate={~p"/orgs/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> New Organization
</.button>
</:actions>
</.header>
<div :if={@organizations != []} class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div
:for={org <- @organizations}
class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow dark:border-zinc-800 dark:bg-zinc-900"
>
<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{org.name}</h2>
<div :if={@organizations != []} class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<.link
:for={org <- @organizations}
navigate={~p"/orgs/#{org.slug}"}
class="relative overflow-hidden rounded-lg border border-zinc-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow dark:border-zinc-800 dark:bg-zinc-900 cursor-pointer"
>
<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{org.name}</h2>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
{Enum.find(org.memberships, &(&1.user_id == @current_scope.user.id)).role
|> to_string()
|> String.capitalize()}
</p>
</.link>
</div>
<div :if={@organizations == []} class="text-center py-16">
<.icon name="hero-building-office" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No organizations</h3>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
{Enum.find(org.memberships, &(&1.user_id == @current_scope.user.id)).role
|> to_string()
|> String.capitalize()}
Get started by creating a new organization.
</p>
<div class="mt-6">
<.button navigate={~p"/orgs/#{org.slug}"} variant="primary">
Open
<.button navigate={~p"/orgs/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> New Organization
</.button>
</div>
</div>
</div>
<div :if={@organizations == []} class="text-center py-16">
<.icon name="hero-building-office" class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600" />
<h3 class="mt-4 text-lg font-semibold text-zinc-900 dark:text-zinc-100">No organizations</h3>
<p class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
Get started by creating a new organization.
</p>
<div class="mt-6">
<.button navigate={~p"/orgs/new"} variant="primary">
<.icon name="hero-plus" class="h-5 w-5" /> New Organization
</.button>
</div>
</div>
</Layouts.app>