Skip to content

Commit 334bc0e

Browse files
zcesurzcesur
committed
refactor: update dashboard live view layout and functionality
- Adjusted the maximum height of contributor and expert sections for better visual consistency. - Enhanced the display logic for bounties and transactions, introducing a card layout for empty states to improve user engagement. - Updated button styles for tipping to provide clearer visual feedback. - Renamed the message field in the tip form to "Review" for improved clarity.
1 parent 195ec3a commit 334bc0e

File tree

1 file changed

+104
-53
lines changed

1 file changed

+104
-53
lines changed

‎lib/algora_web/live/org/dashboard_live.ex‎

Lines changed: 104 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
219219
title={"#{@current_org.name} Contributors"}
220220
subtitle="Share bounties, tips or contract opportunities with your top contributors"
221221
>
222-
<div class="relative w-full overflow-auto max-h-[450px] scrollbar-thin">
222+
<div class="relative w-full overflow-auto max-h-[400px] scrollbar-thin">
223223
<table class="w-full caption-bottom text-sm">
224224
<tbody>
225225
<%= for %Contributor{user: user} <- @contributors do %>
@@ -235,7 +235,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
235235
title="Algora Experts"
236236
subtitle="Meet Algora experts versed in your tech stack"
237237
>
238-
<div class="relative w-full overflow-auto max-h-[450px] scrollbar-thin">
238+
<div class="relative w-full overflow-auto max-h-[400px] scrollbar-thin">
239239
<table class="w-full caption-bottom text-sm">
240240
<tbody>
241241
<%= for user <- @experts do %>
@@ -259,7 +259,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
259259
command on Github.
260260
</p>
261261
</div>
262-
<div class="pb-4 md:pb-0">
262+
<div :if={length(@bounty_rows) + length(@transaction_rows) > 0} class="pb-4 md:pb-0">
263263
<!-- Tab buttons for Open and Completed bounties -->
264264
<div dir="ltr" data-orientation="horizontal">
265265
<div
@@ -308,62 +308,113 @@ defmodule AlgoraWeb.Org.DashboardLive do
308308
</div>
309309
</div>
310310
<div :if={@current_status == :open} class="relative">
311-
<div id="bounties-container" phx-hook="InfiniteScroll">
312-
<.bounties bounties={@bounty_rows} />
313-
<div :if={@has_more_bounties} class="flex justify-center mt-4" id="load-more-indicator">
314-
<div class="animate-pulse text-muted-foreground">
315-
<.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
311+
<%= if Enum.empty?(@bounty_rows) do %>
312+
<.card class="rounded-lg bg-card py-12 text-center lg:rounded-[2rem]">
313+
<.card_header>
314+
<div class="mx-auto mb-2 rounded-full bg-muted p-4">
315+
<.icon name="tabler-diamond" class="h-8 w-8 text-muted-foreground" />
316+
</div>
317+
<.card_title>No bounties yet</.card_title>
318+
<.card_description class="pt-2">
319+
<%= if @installations == [] do %>
320+
Install Algora in {@current_org.name} to create new bounties using the
321+
<code class="mx-1 inline-block rounded bg-emerald-950/75 px-1 py-0.5 font-mono text-sm text-emerald-400 ring-1 ring-emerald-400/25">
322+
/bounty $1000
323+
</code>
324+
command on Github
325+
<.button
326+
:if={@installations == []}
327+
phx-click="install_app"
328+
class="mt-4 flex mx-auto"
329+
>
330+
<Logos.github class="w-4 h-4 mr-2 -ml-1" /> Install Algora
331+
</.button>
332+
<% else %>
333+
Create new bounties using the
334+
<code class="mx-1 inline-block rounded bg-emerald-950/75 px-1 py-0.5 font-mono text-sm text-emerald-400 ring-1 ring-emerald-400/25">
335+
/bounty $1000
336+
</code>
337+
command on Github
338+
<% end %>
339+
</.card_description>
340+
</.card_header>
341+
</.card>
342+
<% else %>
343+
<div id="bounties-container" phx-hook="InfiniteScroll">
344+
<.bounties bounties={@bounty_rows} />
345+
<div
346+
:if={@has_more_bounties}
347+
class="flex justify-center mt-4"
348+
id="load-more-indicator"
349+
>
350+
<div class="animate-pulse text-muted-foreground">
351+
<.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
352+
</div>
316353
</div>
317354
</div>
318-
</div>
355+
<% end %>
319356
</div>
320357
<div :if={@current_status == :paid} class="relative">
321-
<%= for %{transaction: transaction, recipient: recipient, ticket: ticket} <- @transaction_rows do %>
322-
<div class="mb-4 rounded-lg border border-border bg-card p-4">
323-
<div class="flex gap-4">
324-
<div class="flex-1">
325-
<div class="mb-2 font-mono text-2xl font-extrabold text-success">
326-
{Money.to_string!(transaction.net_amount)}
327-
</div>
328-
<div :if={ticket.repository} class="mb-1 text-sm text-muted-foreground">
329-
{ticket.repository.user.provider_login}/{ticket.repository.name}#{ticket.number}
330-
</div>
331-
<div class="font-medium">
332-
{ticket.title}
333-
</div>
334-
<div class="mt-1 text-xs text-muted-foreground">
335-
{Algora.Util.time_ago(transaction.succeeded_at)}
336-
</div>
358+
<%= if Enum.empty?(@bounty_rows) do %>
359+
<.card class="rounded-lg bg-card py-12 text-center lg:rounded-[2rem]">
360+
<.card_header>
361+
<div class="mx-auto mb-2 rounded-full bg-muted p-4">
362+
<.icon name="tabler-diamond" class="h-8 w-8 text-muted-foreground" />
337363
</div>
364+
<.card_title>No completed bounties yet</.card_title>
365+
<.card_description>
366+
Completed bounties will appear here once completed
367+
</.card_description>
368+
</.card_header>
369+
</.card>
370+
<% else %>
371+
<%= for %{transaction: transaction, recipient: recipient, ticket: ticket} <- @transaction_rows do %>
372+
<div class="mb-4 rounded-lg border border-border bg-card p-4">
373+
<div class="flex gap-4">
374+
<div class="flex-1">
375+
<div class="mb-2 font-mono text-2xl font-extrabold text-success">
376+
{Money.to_string!(transaction.net_amount)}
377+
</div>
378+
<div :if={ticket.repository} class="mb-1 text-sm text-muted-foreground">
379+
{ticket.repository.user.provider_login}/{ticket.repository.name}#{ticket.number}
380+
</div>
381+
<div class="font-medium">
382+
{ticket.title}
383+
</div>
384+
<div class="mt-1 text-xs text-muted-foreground">
385+
{Algora.Util.time_ago(transaction.succeeded_at)}
386+
</div>
387+
</div>
338388
339-
<div class="flex w-32 flex-col items-center border-l border-border pl-4">
340-
<h3 class="mb-3 text-xs font-medium uppercase text-muted-foreground">
341-
Awarded to
342-
</h3>
343-
<img
344-
src={recipient.avatar_url}
345-
class="mb-2 h-16 w-16 rounded-full"
346-
alt={recipient.name}
347-
/>
348-
<div class="text-center text-sm font-medium">
349-
{recipient.name}
350-
<div>
351-
{Algora.Misc.CountryEmojis.get(recipient.country)}
389+
<div class="flex w-32 flex-col items-center border-l border-border pl-4">
390+
<h3 class="mb-3 text-xs font-medium uppercase text-muted-foreground">
391+
Awarded to
392+
</h3>
393+
<img
394+
src={recipient.avatar_url}
395+
class="mb-2 h-16 w-16 rounded-full"
396+
alt={recipient.name}
397+
/>
398+
<div class="text-center text-sm font-medium">
399+
{recipient.name}
400+
<div>
401+
{Algora.Misc.CountryEmojis.get(recipient.country)}
402+
</div>
352403
</div>
353404
</div>
354405
</div>
355406
</div>
407+
<% end %>
408+
<div
409+
:if={@has_more_transactions}
410+
class="flex justify-center mt-4"
411+
id="load-more-indicator"
412+
>
413+
<div class="animate-pulse text-gray-400">
414+
<.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
415+
</div>
356416
</div>
357417
<% end %>
358-
<div
359-
:if={@has_more_transactions}
360-
class="flex justify-center mt-4"
361-
id="load-more-indicator"
362-
>
363-
<div class="animate-pulse text-gray-400">
364-
<.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
365-
</div>
366-
</div>
367418
</div>
368419
</div>
369420
@@ -899,9 +950,9 @@ defmodule AlgoraWeb.Org.DashboardLive do
899950
<tr class="border-b transition-colors">
900951
<td class="py-4 align-middle">
901952
<div class="flex items-center justify-between gap-4">
902-
<div class="flex items-start gap-4">
953+
<div class="flex items-center gap-4">
903954
<.link navigate={User.url(@user)}>
904-
<.avatar class="h-20 w-20 rounded-full">
955+
<.avatar class="h-12 w-12 rounded-full">
905956
<.avatar_image src={@user.avatar_url} alt={@user.name} />
906957
<.avatar_fallback class="rounded-lg">
907958
{Algora.Util.initials(@user.name)}
@@ -950,13 +1001,13 @@ defmodule AlgoraWeb.Org.DashboardLive do
9501001
</div>
9511002
</div>
9521003
953-
<div class="pt-1.5 flex flex-wrap gap-2">
1004+
<%!-- <div class="pt-1.5 flex flex-wrap gap-2">
9541005
<%= for tech <- @user.tech_stack do %>
9551006
<div class="rounded-lg bg-foreground/5 px-2 py-1 text-xs font-medium text-foreground ring-1 ring-inset ring-foreground/25">
9561007
{tech}
9571008
</div>
9581009
<% end %>
959-
</div>
1010+
</div> --%>
9601011
</div>
9611012
</div>
9621013
<div class="flex gap-2">
@@ -974,7 +1025,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
9741025
phx-value-user_id={@user.id}
9751026
phx-value-type="tip"
9761027
variant="none"
977-
class="group bg-card text-foreground transition-colors duration-75 hover:bg-rose-600/10 hover:text-rose-400 hover:drop-shadow-[0_1px_5px_#f8717180] focus:bg-rose-600/10 focus:text-rose-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#f8717180] border border-white/50 hover:border-rose-400/50 focus:border-rose-400/50"
1028+
class="group bg-card text-foreground transition-colors duration-75 hover:bg-red-600/10 hover:text-red-400 hover:drop-shadow-[0_1px_5px_#f8717180] focus:bg-red-600/10 focus:text-red-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#f8717180] border border-white/50 hover:border-red-400/50 focus:border-red-400/50"
9781029
>
9791030
<.icon name="tabler-heart" class="size-4 text-current mr-2 -ml-1" /> Tip
9801031
</.button>
@@ -1236,7 +1287,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
12361287
helptext="We'll add a comment to the issue to notify the developer."
12371288
/>
12381289
<.input
1239-
label="Message (optional)"
1290+
label="Review (optional)"
12401291
field={@tip_form[:message]}
12411292
placeholder="Thanks for your great work!"
12421293
/>

0 commit comments

Comments
 (0)