Skip to content

Commit 4113351

Browse files
zcesurzcesur
committed
style: make ecosystem bounty and tip forms more compact
1 parent 11a26d2 commit 4113351

File tree

2 files changed

+50
-67
lines changed

2 files changed

+50
-67
lines changed

‎lib/algora_web/components/core_components.ex‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -666,6 +666,8 @@ defmodule AlgoraWeb.CoreComponents do
666666
attr :for, :any, required: true, doc: "the datastructure for the form"
667667
attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
668668

669+
attr :class, :string, default: nil, doc: "the class to apply to the form"
670+
669671
attr :rest, :global,
670672
include: ~w(autocomplete name rel action enctype method novalidate target),
671673
doc: "the arbitrary HTML attributes to apply to the form tag"
@@ -675,12 +677,10 @@ defmodule AlgoraWeb.CoreComponents do
675677

676678
def simple_form(assigns) do
677679
~H"""
678-
<.form :let={f} for={@for} as={@as} {@rest}>
679-
<div class="space-y-8">
680-
{render_slot(@inner_block, f)}
681-
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
682-
{render_slot(action, f)}
683-
</div>
680+
<.form :let={f} for={@for} as={@as} class={classes(["space-y-8", @class])} {@rest}>
681+
{render_slot(@inner_block, f)}
682+
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
683+
{render_slot(action, f)}
684684
</div>
685685
</.form>
686686
"""

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

Lines changed: 44 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1426,38 +1426,31 @@ defmodule AlgoraWeb.Org.DashboardLive do
14261426
defp create_bounty(assigns) do
14271427
~H"""
14281428
<div class="border ring-1 ring-transparent rounded-xl overflow-hidden">
1429-
<div class="bg-card/75 flex flex-col h-full p-4 rounded-xl border-t-4 sm:border-t-0 sm:border-l-4 border-emerald-400">
1430-
<div class="p-4 sm:p-6">
1431-
<div class="text-2xl font-semibold text-foreground">
1432-
Fund any issue<br class="block sm:hidden" />
1433-
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
1434-
in seconds
1435-
</span>
1429+
<div class="bg-card/75 flex flex-col h-full p-4 sm:p-6 md:p-8 rounded-xl border-l-4 border-emerald-400">
1430+
<div class="flex items-center gap-2 text-lg font-semibold">
1431+
<h3 class="text-foreground">Fund any issue</h3>
1432+
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">in seconds</span>
1433+
</div>
1434+
<div class="mt-1 text-sm font-medium text-muted-foreground">
1435+
Help improve the OSS you love and rely on
1436+
</div>
1437+
<.simple_form for={@bounty_form} phx-submit="create_bounty" class="pt-2 space-y-3">
1438+
<div class="grid grid-cols-1 sm:grid-cols-[3fr,1fr] gap-3">
1439+
<.input
1440+
field={@bounty_form[:url]}
1441+
placeholder="https://github.com/swift-lang/swift/issues/1337"
1442+
/>
1443+
<.input icon="tabler-currency-dollar" field={@bounty_form[:amount]} />
14361444
</div>
1437-
<div class="pt-1 text-base font-medium text-muted-foreground">
1438-
Help improve the OSS you love and rely on
1445+
<div class="flex items-center justify-between gap-4">
1446+
<p class="text-xs text-muted-foreground">
1447+
<.icon name="tabler-sparkles" class="size-4 text-current mr-1" /> ...or just comment
1448+
<code class="px-1 py-0.5 text-success">/bounty $100</code>
1449+
on GitHub issues (requires GitHub auth)
1450+
</p>
1451+
<.button size="sm">Submit</.button>
14391452
</div>
1440-
<.simple_form for={@bounty_form} phx-submit="create_bounty">
1441-
<div class="flex flex-col gap-6 pt-6">
1442-
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
1443-
<.input
1444-
label="Issue URL"
1445-
field={@bounty_form[:url]}
1446-
placeholder="https://github.com/swift-lang/swift/issues/1337"
1447-
/>
1448-
<.input label="Amount" icon="tabler-currency-dollar" field={@bounty_form[:amount]} />
1449-
</div>
1450-
<p class="text-sm text-muted-foreground">
1451-
<.icon name="tabler-sparkles" class="size-4 text-current mr-1" /> Comment
1452-
<code class="px-1 py-0.5 text-success">/bounty $100</code>
1453-
on GitHub issues (requires GitHub auth)
1454-
</p>
1455-
<div class="flex justify-end gap-4">
1456-
<.button>Submit</.button>
1457-
</div>
1458-
</div>
1459-
</.simple_form>
1460-
</div>
1453+
</.simple_form>
14611454
</div>
14621455
</div>
14631456
"""
@@ -1466,39 +1459,29 @@ defmodule AlgoraWeb.Org.DashboardLive do
14661459
defp create_tip(assigns) do
14671460
~H"""
14681461
<div class="border ring-1 ring-transparent rounded-xl overflow-hidden">
1469-
<div class="bg-card/75 flex flex-col h-full p-4 rounded-xl border-t-4 sm:border-t-0 sm:border-l-4 border-emerald-400">
1470-
<div class="p-4 sm:p-6">
1471-
<div class="text-2xl font-semibold text-foreground">
1472-
Tip any developer<br class="block sm:hidden" />
1473-
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
1474-
instantly
1475-
</span>
1462+
<div class="bg-card/75 flex flex-col h-full p-4 sm:p-6 md:p-8 rounded-xl border-l-4 border-emerald-400">
1463+
<div class="flex items-center gap-2 text-lg font-semibold">
1464+
<h3 class="text-foreground">Tip any developer</h3>
1465+
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">instantly</span>
1466+
</div>
1467+
<div class="mt-1 text-sm font-medium text-muted-foreground">
1468+
Thank OSS maintainers and contributors on GitHub
1469+
</div>
1470+
<.simple_form for={@tip_form} phx-submit="create_tip" class="pt-2 space-y-3">
1471+
<div class="grid grid-cols-1 sm:grid-cols-[2fr,1fr,1fr] gap-3">
1472+
<.input field={@tip_form[:url]} placeholder="https://github.com/owner/repo/pull/123" />
1473+
<.input field={@tip_form[:github_handle]} placeholder="jsmith" />
1474+
<.input icon="tabler-currency-dollar" field={@tip_form[:amount]} />
14761475
</div>
1477-
<div class="pt-1 text-base font-medium text-muted-foreground">
1478-
Thank OSS maintainers and contributors on GitHub
1476+
<div class="flex items-center justify-between gap-4">
1477+
<p class="text-xs text-muted-foreground">
1478+
<.icon name="tabler-sparkles" class="size-4 text-current mr-1" /> ...or just comment
1479+
<code class="px-1 py-0.5 text-success">/bounty $100</code>
1480+
on GitHub issues (requires GitHub auth)
1481+
</p>
1482+
<.button size="sm">Submit</.button>
14791483
</div>
1480-
<.simple_form for={@tip_form} phx-submit="create_tip">
1481-
<div class="flex flex-col gap-6 pt-6">
1482-
<div class="grid grid-cols-1 sm:grid-cols-3 gap-x-3 gap-y-6">
1483-
<.input
1484-
label="Contribution URL"
1485-
field={@tip_form[:url]}
1486-
placeholder="https://github.com/owner/repo/pull/123"
1487-
/>
1488-
<.input label="GitHub handle" field={@tip_form[:github_handle]} placeholder="jsmith" />
1489-
<.input label="Amount" icon="tabler-currency-dollar" field={@tip_form[:amount]} />
1490-
</div>
1491-
<p class="text-sm text-muted-foreground">
1492-
<.icon name="tabler-sparkles" class="size-4 text-current mr-1" /> Comment
1493-
<code class="px-1 py-0.5 text-success">/tip $100 @handle</code>
1494-
on GitHub issues and PRs (requires GitHub auth)
1495-
</p>
1496-
<div class="flex justify-end gap-4">
1497-
<.button>Submit</.button>
1498-
</div>
1499-
</div>
1500-
</.simple_form>
1501-
</div>
1484+
</.simple_form>
15021485
</div>
15031486
</div>
15041487
"""

0 commit comments

Comments
 (0)