Skip to content

Commit 1da48be

Browse files
zcesurzcesur
committed
feat: improve layout and styling in dashboard live view; add new image for org home screenshot
1 parent f70211a commit 1da48be

File tree

2 files changed

+51
-45
lines changed

2 files changed

+51
-45
lines changed

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

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1290,7 +1290,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
12901290
defp match_card(assigns) do
12911291
~H"""
12921292
<div class="relative flex flex-col xl:flex-row xl:items-center xl:justify-between gap-4 sm:gap-8 border bg-card rounded-xl text-card-foreground shadow p-6">
1293-
<div>
1293+
<div class="xl:w-2/7">
12941294
<div class="flex items-center gap-4">
12951295
<.link navigate={User.url(@match.user)}>
12961296
<.avatar class="h-16 w-16 rounded-full">
@@ -1309,7 +1309,12 @@ defmodule AlgoraWeb.Org.DashboardLive do
13091309
>
13101310
{@match.user.name}
13111311
</.link>
1312-
<.badge :if={@match.badge_text} variant={@match.badge_variant} size="lg">
1312+
<.badge
1313+
:if={@match.badge_text}
1314+
variant={@match.badge_variant}
1315+
size="lg"
1316+
class="shrink-0"
1317+
>
13131318
{@match.badge_text}
13141319
</.badge>
13151320
</div>
@@ -1343,46 +1348,47 @@ defmodule AlgoraWeb.Org.DashboardLive do
13431348
</div>
13441349
</div>
13451350
</div>
1346-
<div class="pt-4 grid grid-cols-2 gap-2 xl:w-[20rem]">
1347-
<.button
1348-
phx-click="share_opportunity"
1349-
phx-value-user_id={@match.user.id}
1350-
phx-value-type="bounty"
1351-
variant="none"
1352-
class="group bg-card text-foreground transition-colors duration-75 hover:bg-blue-800/10 hover:text-blue-300 hover:drop-shadow-[0_1px_5px_#60a5fa80] focus:bg-blue-800/10 focus:text-blue-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#60a5fa80] border border-white/50 hover:border-blue-400/50 focus:border-blue-400/50"
1353-
>
1354-
<.icon name="tabler-diamond" class="size-4 text-current mr-2 -ml-1" /> Bounty
1355-
</.button>
1356-
<.button
1357-
:if={@contract_for_user && @contract_for_user.status in [:active, :paid]}
1358-
navigate={~p"/org/#{@current_org.handle}/contracts/#{@contract_for_user.id}"}
1359-
variant="none"
1360-
class="bg-emerald-800/10 text-emerald-300 drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-emerald-400/50 focus:border-emerald-400/50"
1361-
>
1362-
<.icon name="tabler-contract" class="size-4 text-current mr-2 -ml-1" /> Contract
1363-
</.button>
1364-
<.button
1365-
:if={@contract_for_user && @contract_for_user.status in [:draft]}
1366-
navigate={~p"/org/#{@current_org.handle}/contracts/#{@contract_for_user.id}"}
1367-
variant="none"
1368-
class="bg-gray-800/10 text-gray-400 drop-shadow-[0_1px_5px_#94a3b880] focus:bg-gray-800/10 focus:text-gray-400 focus:outline-none focus:drop-shadow-[0_1px_5px_#94a3b880] border border-gray-400/50 focus:border-gray-400/50"
1369-
>
1370-
<.icon name="tabler-clock" class="size-4 text-current mr-2 -ml-1" /> Contract
1371-
</.button>
1372-
<.button
1373-
:if={!@contract_for_user}
1374-
phx-click="share_opportunity"
1375-
phx-value-user_id={@match.user.id}
1376-
phx-value-type="contract"
1377-
variant="none"
1378-
class="group bg-card text-foreground transition-colors duration-75 hover:bg-emerald-800/10 hover:text-emerald-300 hover:drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-white/50 hover:border-emerald-400/50 focus:border-emerald-400/50"
1379-
>
1380-
<.icon name="tabler-contract" class="size-4 text-current mr-2 -ml-1" /> Contract
1381-
</.button>
1382-
</div>
13831351
</div>
13841352
1385-
<div class="pt-2 xl:pt-0 xl:pl-8 xl:w-[35rem] xl:border-l xl:border-border">
1353+
<div class="flex flex-col gap-2 xl:w-1/7 ml-auto">
1354+
<.button
1355+
phx-click="share_opportunity"
1356+
phx-value-user_id={@match.user.id}
1357+
phx-value-type="bounty"
1358+
variant="none"
1359+
class="group bg-card text-foreground transition-colors duration-75 hover:bg-blue-800/10 hover:text-blue-300 hover:drop-shadow-[0_1px_5px_#60a5fa80] focus:bg-blue-800/10 focus:text-blue-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#60a5fa80] border border-white/50 hover:border-blue-400/50 focus:border-blue-400/50"
1360+
>
1361+
<.icon name="tabler-diamond" class="size-4 text-current mr-2 -ml-1" /> Bounty
1362+
</.button>
1363+
<.button
1364+
:if={@contract_for_user && @contract_for_user.status in [:active, :paid]}
1365+
navigate={~p"/org/#{@current_org.handle}/contracts/#{@contract_for_user.id}"}
1366+
variant="none"
1367+
class="bg-emerald-800/10 text-emerald-300 drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-emerald-400/50 focus:border-emerald-400/50"
1368+
>
1369+
<.icon name="tabler-contract" class="size-4 text-current mr-2 -ml-1" /> Contract
1370+
</.button>
1371+
<.button
1372+
:if={@contract_for_user && @contract_for_user.status in [:draft]}
1373+
navigate={~p"/org/#{@current_org.handle}/contracts/#{@contract_for_user.id}"}
1374+
variant="none"
1375+
class="bg-gray-800/10 text-gray-400 drop-shadow-[0_1px_5px_#94a3b880] focus:bg-gray-800/10 focus:text-gray-400 focus:outline-none focus:drop-shadow-[0_1px_5px_#94a3b880] border border-gray-400/50 focus:border-gray-400/50"
1376+
>
1377+
<.icon name="tabler-clock" class="size-4 text-current mr-2 -ml-1" /> Contract
1378+
</.button>
1379+
<.button
1380+
:if={!@contract_for_user}
1381+
phx-click="share_opportunity"
1382+
phx-value-user_id={@match.user.id}
1383+
phx-value-type="contract"
1384+
variant="none"
1385+
class="group bg-card text-foreground transition-colors duration-75 hover:bg-emerald-800/10 hover:text-emerald-300 hover:drop-shadow-[0_1px_5px_#34d39980] focus:bg-emerald-800/10 focus:text-emerald-300 focus:outline-none focus:drop-shadow-[0_1px_5px_#34d39980] border border-white/50 hover:border-emerald-400/50 focus:border-emerald-400/50"
1386+
>
1387+
<.icon name="tabler-contract" class="size-4 text-current mr-2 -ml-1" /> Contract
1388+
</.button>
1389+
</div>
1390+
1391+
<div class="pt-2 xl:pt-0 xl:pl-8 xl:w-4/7 xl:border-l xl:border-border">
13861392
<div class="text-sm sm:text-base text-foreground font-medium">
13871393
Completed <span class="font-semibold font-display">{@match.user.transactions_count}</span>
13881394
bounties across
@@ -1398,24 +1404,24 @@ defmodule AlgoraWeb.Org.DashboardLive do
13981404
navigate={~p"/org/#{@current_org.handle}"}
13991405
class="flex flex-1 items-center gap-2 sm:gap-4 text-sm rounded-lg"
14001406
>
1401-
<.avatar class="h-10 w-10 sm:h-12 sm:w-12 rounded-lg saturate-0">
1407+
<.avatar class="h-10 w-10 rounded-lg saturate-0 bg-gradient-to-br brightness-75">
14021408
<.avatar_image src={project.avatar_url} alt={project.name} />
14031409
<.avatar_fallback class="rounded-lg">
14041410
{Algora.Util.initials(project.name)}
14051411
</.avatar_fallback>
14061412
</.avatar>
14071413
<div class="flex flex-col">
1408-
<div class="text-base sm:text-lg font-medium">
1414+
<div class="text-base font-medium text-muted-foreground">
14091415
{project.name}
14101416
</div>
14111417
14121418
<div class="flex items-center gap-2 whitespace-nowrap">
1413-
<div class="text-sm sm:text-base text-foreground font-display font-semibold">
1414-
<.icon name="tabler-star-filled" class="size-4 sm:size-5 text-amber-400 mr-1" />{format_number(
1419+
<div class="text-sm text-muted-foreground font-display font-semibold">
1420+
<.icon name="tabler-star-filled" class="size-4 text-amber-400 mr-1" />{format_number(
14151421
project.stargazers_count
14161422
)}
14171423
</div>
1418-
<div class="text-sm sm:text-base text-foreground">
1424+
<div class="text-sm text-muted-foreground">
14191425
<span class="text-emerald-400 font-display font-semibold">
14201426
{total_earned}
14211427
</span>

‎priv/static/images/screenshots/org-home.png‎

-14 KB
Loading

0 commit comments

Comments
 (0)