Skip to content

Commit fad1bee

Browse files
zcesurzcesur
committed
feat: improve job board
1 parent 03dfa3e commit fad1bee

File tree

1 file changed

+77
-60
lines changed

1 file changed

+77
-60
lines changed

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

Lines changed: 77 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ defmodule AlgoraWeb.Org.JobsLive do
22
@moduledoc false
33
use AlgoraWeb, :live_view
44

5+
import AlgoraWeb.Components.ModalVideo
6+
57
alias Algora.Accounts
68
alias Algora.Jobs
79
alias Algora.Markdown
@@ -90,10 +92,18 @@ defmodule AlgoraWeb.Org.JobsLive do
9092
</div>
9193
9294
<%= if not Enum.empty?(@media) do %>
93-
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
95+
<div class="max-w-xl mx-auto mt-8 flex flex-col lg:flex-row justify-center gap-4">
9496
<%= for media <- @media |> Enum.take(3) do %>
95-
<div class="aspect-video w-full rounded-lg overflow-hidden">
96-
<img src={media.url} class="w-full h-full object-cover object-center" />
97+
<div class="lg:w-1/3 aspect-video w-full rounded-lg overflow-hidden">
98+
<%= if media.url |> String.contains?("youtube") do %>
99+
<.modal_video
100+
src={media.url}
101+
poster={"https://img.youtube.com/vi/#{media.url |> String.split("/") |> List.last()}/maxresdefault.jpg"}
102+
/>
103+
<.modal_video_dialog />
104+
<% else %>
105+
<img src={media.url} class="w-full h-full object-cover object-cover" />
106+
<% end %>
97107
</div>
98108
<% end %>
99109
</div>
@@ -113,69 +123,76 @@ defmodule AlgoraWeb.Org.JobsLive do
113123
</.card_header>
114124
</.card>
115125
<% else %>
116-
<div class="grid gap-12">
117-
<.card class="flex flex-col p-6">
118-
<div class="pt-8 grid gap-8">
119-
<%= for job <- @jobs do %>
120-
<div class="flex flex-col md:flex-row justify-between gap-4">
126+
<h2 class="text-sm font-semibold uppercase text-muted-foreground">Open positions</h2>
127+
<.card class="mt-4 flex flex-col p-6">
128+
<div class="grid gap-8">
129+
<%= for job <- @jobs do %>
130+
<div class="flex flex-col md:flex-row md:items-center justify-between gap-2">
131+
<div>
121132
<div>
122-
<div>
123-
<%= if @current_user_role in [:admin, :mod] do %>
124-
<.link
125-
navigate={~p"/org/#{@current_org.handle}/jobs/#{job.id}"}
126-
class="text-lg font-semibold hover:underline"
127-
>
128-
{job.title}
129-
</.link>
130-
<% else %>
131-
<div class="text-lg font-semibold">
132-
{job.title}
133-
</div>
134-
<% end %>
135-
</div>
136-
<div
137-
:if={job.description}
138-
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
139-
>
140-
<div
141-
id={"job-description-#{job.id}"}
142-
class="line-clamp-3 transition-all duration-200"
143-
phx-hook="ExpandableText"
144-
data-expand-id={"expand-#{job.id}"}
145-
data-class="line-clamp-3"
133+
<%= if @current_user_role in [:admin, :mod] do %>
134+
<.link
135+
navigate={~p"/org/#{@current_org.handle}/jobs/#{job.id}"}
136+
class="text-lg sm:text-2xl font-semibold underline"
146137
>
147-
{Phoenix.HTML.raw(Markdown.render(job.description))}
138+
{job.title}
139+
</.link>
140+
<% else %>
141+
<div class="text-lg font-semibold">
142+
{job.title}
148143
</div>
149-
<button
150-
id={"expand-#{job.id}"}
151-
type="button"
152-
class="text-xs text-foreground font-bold mt-2 hidden"
153-
data-content-id={"job-description-#{job.id}"}
154-
phx-hook="ExpandableTextButton"
155-
>
156-
...see more
157-
</button>
158-
</div>
159-
<div class="pt-2 flex flex-wrap gap-2">
160-
<%= for tech <- job.tech_stack do %>
161-
<.badge variant="outline">{tech}</.badge>
162-
<% end %>
144+
<% end %>
145+
</div>
146+
<div
147+
:if={job.description}
148+
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
149+
>
150+
<div
151+
id={"job-description-#{job.id}"}
152+
class="line-clamp-3 transition-all duration-200 [&>p]:m-0"
153+
phx-hook="ExpandableText"
154+
data-expand-id={"expand-#{job.id}"}
155+
data-class="line-clamp-3"
156+
>
157+
{Phoenix.HTML.raw(Markdown.render(job.description))}
163158
</div>
159+
<button
160+
id={"expand-#{job.id}"}
161+
type="button"
162+
class="text-xs text-foreground font-bold mt-2 hidden"
163+
data-content-id={"job-description-#{job.id}"}
164+
phx-hook="ExpandableTextButton"
165+
>
166+
...see more
167+
</button>
168+
</div>
169+
<div class="pt-2 flex flex-wrap gap-2">
170+
<%= for tech <- job.tech_stack do %>
171+
<.badge variant="outline">
172+
<.avatar class="w-4 h-4 invert saturate-0 mr-1.5 rounded-sm">
173+
<.avatar_image src={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/#{String.downcase(tech)}/#{String.downcase(tech)}-original.svg"} />
174+
<.avatar_fallback>
175+
{Algora.Util.initials(tech)}
176+
</.avatar_fallback>
177+
</.avatar>
178+
{tech}
179+
</.badge>
180+
<% end %>
164181
</div>
165-
<%= if MapSet.member?(@user_applications, job.id) do %>
166-
<.button disabled class="opacity-50">
167-
<.icon name="tabler-check" class="h-4 w-4 mr-2 -ml-1" /> Applied
168-
</.button>
169-
<% else %>
170-
<.button phx-click="apply_job" phx-value-job-id={job.id}>
171-
<.icon name="github" class="h-4 w-4 mr-2" /> Apply with GitHub
172-
</.button>
173-
<% end %>
174182
</div>
175-
<% end %>
176-
</div>
177-
</.card>
178-
</div>
183+
<%= if MapSet.member?(@user_applications, job.id) do %>
184+
<.button disabled class="opacity-50" size="lg">
185+
<.icon name="tabler-check" class="h-6 w-6 mr-2 -ml-1" /> Applied
186+
</.button>
187+
<% else %>
188+
<.button phx-click="apply_job" phx-value-job-id={job.id} size="lg">
189+
<.icon name="github" class="h-6 w-6 mr-2" /> Apply with GitHub
190+
</.button>
191+
<% end %>
192+
</div>
193+
<% end %>
194+
</div>
195+
</.card>
179196
<% end %>
180197
</.section>
181198
</div>

0 commit comments

Comments
 (0)