Skip to content

Commit bf90cf6

Browse files
zcesurzcesur
committed
update layout
1 parent c78796a commit bf90cf6

File tree

2 files changed

+148
-121
lines changed

2 files changed

+148
-121
lines changed

‎lib/algora_web/components/core_components.ex‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1236,11 +1236,12 @@ defmodule AlgoraWeb.CoreComponents do
12361236
attr :title, :string, default: nil
12371237
attr :subtitle, :string, default: nil
12381238
attr :link, :string, default: nil
1239+
attr :class, :string, default: nil
12391240
slot :inner_block
12401241

12411242
def section(assigns) do
12421243
~H"""
1243-
<div class="relative h-full">
1244+
<div class={classes(["relative h-full", @class])}>
12441245
<div :if={@title} class="flex items-end justify-between pb-2">
12451246
<div class="flex flex-col space-y-1.5">
12461247
<h2 class="text-2xl font-semibold leading-none tracking-tight">{@title}</h2>

‎lib/algora_web/live/jobs_live.ex‎

Lines changed: 146 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -29,140 +29,166 @@ defmodule AlgoraWeb.JobsLive do
2929
@impl true
3030
def render(assigns) do
3131
~H"""
32-
<div class="container mx-auto max-w-7xl space-y-6 p-4 md:p-6 lg:px-8">
33-
<.section title="Jobs" subtitle="Open positions at top companies">
34-
<%= if Enum.empty?(@jobs_by_user) do %>
35-
<.card class="rounded-lg bg-card py-12 text-center lg:rounded-[2rem]">
36-
<.card_header>
37-
<div class="mx-auto mb-2 rounded-full bg-muted p-4">
38-
<.icon name="tabler-briefcase" class="h-8 w-8 text-muted-foreground" />
39-
</div>
40-
<.card_title>No jobs yet</.card_title>
41-
<.card_description>
42-
Open positions will appear here once created
43-
</.card_description>
44-
</.card_header>
45-
</.card>
46-
<% else %>
47-
<div class="grid gap-12">
48-
<%= for {user, jobs} <- @jobs_by_user do %>
49-
<.card class="flex flex-col gap-6 p-6">
50-
<div class="flex items-center gap-4">
51-
<.avatar class="h-12 w-12">
52-
<.avatar_image src={user.avatar_url} />
53-
<.avatar_fallback>
54-
{Algora.Util.initials(user.name)}
55-
</.avatar_fallback>
56-
</.avatar>
57-
<div>
58-
<div class="text-lg font-semibold">
59-
{user.name}
60-
</div>
61-
<div class="text-sm text-muted-foreground">
62-
{user.bio}
63-
</div>
64-
</div>
65-
</div>
32+
<div class="relative">
33+
<div class={
34+
if(!@current_user,
35+
do: "-z-10 fixed inset-0 bg-gradient-to-br from-black to-background",
36+
else: ""
37+
)
38+
} />
39+
<div class={
40+
classes([
41+
"mx-auto max-w-7xl px-4 md:px-6 lg:px-8",
42+
if(!@current_user, do: "py-16 sm:py-24", else: "py-4 md:py-6 lg:py-8")
43+
])
44+
}>
45+
<div class={
46+
classes([
47+
if(!@current_user, do: "text-center", else: "")
48+
])
49+
}>
50+
<h2 class="font-display text-3xl font-semibold tracking-tight text-foreground sm:text-6xl mb-2">
51+
Jobs
52+
</h2>
53+
<p class="font-medium text-base text-muted-foreground">
54+
Open positions at top companies
55+
</p>
56+
</div>
6657
67-
<div class="grid gap-4">
68-
<%= for job <- jobs do %>
69-
<div class="flex flex-col gap-2">
70-
<div class="flex items-start justify-between gap-4">
71-
<div>
72-
<.link
73-
href={job.url}
74-
class="text-lg font-semibold hover:underline"
75-
target="_blank"
76-
>
77-
{job.title}
78-
</.link>
79-
</div>
80-
<%= if MapSet.member?(@user_applications, job.id) do %>
81-
<.button disabled class="opacity-50">
82-
<.icon name="tabler-check" class="h-4 w-4 mr-2 -ml-1" /> Applied
83-
</.button>
84-
<% else %>
85-
<.button phx-click="apply_job" phx-value-job-id={job.id}>
86-
<.icon name="github" class="h-4 w-4 mr-2" /> Apply with GitHub
87-
</.button>
88-
<% end %>
58+
<.section class="pt-8">
59+
<%= if Enum.empty?(@jobs_by_user) do %>
60+
<.card class="rounded-lg bg-card py-12 text-center lg:rounded-[2rem]">
61+
<.card_header>
62+
<div class="mx-auto mb-2 rounded-full bg-muted p-4">
63+
<.icon name="tabler-briefcase" class="h-8 w-8 text-muted-foreground" />
64+
</div>
65+
<.card_title>No jobs yet</.card_title>
66+
<.card_description>
67+
Open positions will appear here once created
68+
</.card_description>
69+
</.card_header>
70+
</.card>
71+
<% else %>
72+
<div class="grid gap-12">
73+
<%= for {user, jobs} <- @jobs_by_user do %>
74+
<.card class="flex flex-col gap-6 p-6">
75+
<div class="flex items-center gap-4">
76+
<.avatar class="h-12 w-12">
77+
<.avatar_image src={user.avatar_url} />
78+
<.avatar_fallback>
79+
{Algora.Util.initials(user.name)}
80+
</.avatar_fallback>
81+
</.avatar>
82+
<div>
83+
<div class="text-lg font-semibold">
84+
{user.name}
8985
</div>
9086
<div class="text-sm text-muted-foreground">
91-
{job.description}
92-
</div>
93-
<div class="flex flex-wrap gap-2">
94-
<%= for tech <- job.tech_stack do %>
95-
<.badge variant="outline">{tech}</.badge>
96-
<% end %>
87+
{user.bio}
9788
</div>
9889
</div>
99-
<% end %>
100-
</div>
101-
</.card>
102-
<% end %>
103-
</div>
104-
<% end %>
105-
</.section>
106-
107-
<.section>
108-
<div class="border ring-1 ring-transparent rounded-xl overflow-hidden">
109-
<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">
110-
<div class="p-4 sm:p-6">
111-
<div class="text-2xl font-semibold text-foreground">
112-
Post your job<br class="block sm:hidden" />
113-
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
114-
in seconds
115-
</span>
116-
</div>
117-
<div class="pt-1 text-base font-medium text-muted-foreground">
118-
Reach thousands of developers looking for their next opportunity versed in your tech stack
119-
</div>
120-
<.simple_form
121-
for={@form}
122-
phx-change="validate_job"
123-
phx-submit="create_job"
124-
class="mt-4 space-y-6"
125-
>
126-
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
127-
<.input
128-
field={@form[:email]}
129-
label="Email"
130-
data-domain-target
131-
phx-hook="DeriveDomain"
132-
phx-blur="email_changed"
133-
/>
134-
<.input field={@form[:company_name]} label="Company Name" />
135-
<.input field={@form[:company_url]} label="Company Website" data-domain-source />
136-
<.input field={@form[:url]} label="Job Posting URL" />
137-
</div>
90+
</div>
13891
139-
<div class="flex justify-between">
140-
<div>
141-
<div :if={@user_metadata.ok?} class="flex items-center gap-4">
142-
<img
143-
:if={get_in(@user_metadata.result, [:org, :favicon_url])}
144-
src={get_in(@user_metadata.result, [:org, :favicon_url])}
145-
class="h-12 w-12 rounded-full"
146-
/>
147-
<div>
148-
<div class="text-lg text-foreground font-bold font-display">
149-
{get_change(@form.source, :company_name)}
92+
<div class="grid gap-4">
93+
<%= for job <- jobs do %>
94+
<div class="flex flex-col gap-2">
95+
<div class="flex items-start justify-between gap-4">
96+
<div>
97+
<.link
98+
href={job.url}
99+
class="text-lg font-semibold hover:underline"
100+
target="_blank"
101+
>
102+
{job.title}
103+
</.link>
104+
</div>
105+
<%= if MapSet.member?(@user_applications, job.id) do %>
106+
<.button disabled class="opacity-50">
107+
<.icon name="tabler-check" class="h-4 w-4 mr-2 -ml-1" /> Applied
108+
</.button>
109+
<% else %>
110+
<.button phx-click="apply_job" phx-value-job-id={job.id}>
111+
<.icon name="github" class="h-4 w-4 mr-2" /> Apply with GitHub
112+
</.button>
113+
<% end %>
150114
</div>
151115
<div class="text-sm text-muted-foreground">
152-
{get_change(@form.source, :company_url)}
116+
{job.description}
117+
</div>
118+
<div class="flex flex-wrap gap-2">
119+
<%= for tech <- job.tech_stack do %>
120+
<.badge variant="outline">{tech}</.badge>
121+
<% end %>
153122
</div>
154123
</div>
155-
</div>
124+
<% end %>
156125
</div>
157-
<.button class="flex items-center gap-2" phx-disable-with="Processing...">
158-
Post Job
159-
</.button>
126+
</.card>
127+
<% end %>
128+
</div>
129+
<% end %>
130+
</.section>
131+
132+
<.section class="pt-12">
133+
<div class="border ring-1 ring-transparent rounded-xl overflow-hidden">
134+
<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">
135+
<div class="p-4 sm:p-6">
136+
<div class="text-2xl font-semibold text-foreground">
137+
Post your job<br class="block sm:hidden" />
138+
<span class="text-success drop-shadow-[0_1px_5px_#34d39980]">
139+
in seconds
140+
</span>
141+
</div>
142+
<div class="pt-1 text-base font-medium text-muted-foreground">
143+
Reach thousands of developers looking for their next opportunity versed in your tech stack
160144
</div>
161-
</.simple_form>
145+
<.simple_form
146+
for={@form}
147+
phx-change="validate_job"
148+
phx-submit="create_job"
149+
class="mt-4 space-y-6"
150+
>
151+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
152+
<.input
153+
field={@form[:email]}
154+
label="Email"
155+
data-domain-target
156+
phx-hook="DeriveDomain"
157+
phx-blur="email_changed"
158+
/>
159+
<.input field={@form[:company_name]} label="Company Name" />
160+
<.input field={@form[:company_url]} label="Company Website" data-domain-source />
161+
<.input field={@form[:url]} label="Job Posting URL" />
162+
</div>
163+
164+
<div class="flex justify-between">
165+
<div>
166+
<div :if={@user_metadata.ok?} class="flex items-center gap-4">
167+
<img
168+
:if={get_in(@user_metadata.result, [:org, :favicon_url])}
169+
src={get_in(@user_metadata.result, [:org, :favicon_url])}
170+
class="h-12 w-12 rounded-full"
171+
/>
172+
<div>
173+
<div class="text-lg text-foreground font-bold font-display">
174+
{get_change(@form.source, :company_name)}
175+
</div>
176+
<div class="text-sm text-muted-foreground">
177+
{get_change(@form.source, :company_url)}
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
<.button class="flex items-center gap-2" phx-disable-with="Processing...">
183+
Post Job
184+
</.button>
185+
</div>
186+
</.simple_form>
187+
</div>
162188
</div>
163189
</div>
164-
</div>
165-
</.section>
190+
</.section>
191+
</div>
166192
</div>
167193
"""
168194
end

0 commit comments

Comments
 (0)