Skip to content

Commit c564c70

Browse files
zcesurzcesur
committed
feat: add see more toggle for long job descriptions
1 parent cf09e33 commit c564c70

File tree

5 files changed

+121
-7
lines changed

5 files changed

+121
-7
lines changed

‎assets/js/app.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -570,6 +570,41 @@ const Hooks = {
570570
});
571571
},
572572
},
573+
ExpandableText: {
574+
mounted() {
575+
const button = document.querySelector(`#${this.el.dataset.expandId}`);
576+
577+
// Check if content is truncated
578+
const isTruncated = this.el.scrollHeight > this.el.clientHeight;
579+
580+
if (isTruncated && button) {
581+
button.classList.remove("hidden");
582+
}
583+
},
584+
},
585+
586+
ExpandableTextButton: {
587+
mounted() {
588+
this.el.addEventListener("click", () => {
589+
const content = document.querySelector<HTMLElement>(
590+
`#${this.el.dataset.contentId}`
591+
);
592+
if (!content) return;
593+
594+
const className = content.dataset.class;
595+
596+
if (content.classList.contains(className)) {
597+
// Expand
598+
content.classList.remove(className);
599+
this.el.classList.add("hidden");
600+
} else {
601+
// Collapse
602+
content.classList.add(className);
603+
this.el.classList.remove("hidden");
604+
}
605+
});
606+
},
607+
},
573608
} satisfies Record<string, Partial<ViewHook> & Record<string, unknown>>;
574609

575610
// Accessible focus handling

‎lib/algora_web/live/home_live.ex‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,28 @@ defmodule AlgoraWeb.HomeLive do
180180
{job.title}
181181
</div>
182182
</div>
183-
<div :if={job.description} class="pt-1 text-sm text-muted-foreground">
184-
{job.description}
183+
<div
184+
:if={job.description}
185+
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
186+
>
187+
<div
188+
id={"job-description-#{job.id}"}
189+
class="line-clamp-2 transition-all duration-200"
190+
phx-hook="ExpandableText"
191+
data-expand-id={"expand-#{job.id}"}
192+
data-class="line-clamp-2"
193+
>
194+
{Phoenix.HTML.raw(Algora.Markdown.render(job.description))}
195+
</div>
196+
<button
197+
id={"expand-#{job.id}"}
198+
type="button"
199+
class="text-xs text-foreground font-bold mt-2 hidden"
200+
data-content-id={"job-description-#{job.id}"}
201+
phx-hook="ExpandableTextButton"
202+
>
203+
...see more
204+
</button>
185205
</div>
186206
<div class="pt-2 flex flex-wrap gap-2">
187207
<%= for tech <- job.tech_stack do %>
@@ -318,7 +338,11 @@ defmodule AlgoraWeb.HomeLive do
318338
</h3>
319339
<div class="flex flex-wrap items-center gap-x-8 gap-y-4 pt-4 sm:pt-6">
320340
<div class="flex items-center gap-4">
321-
<img src="https://github.com/mschuwalow.png" class="h-12 w-12 rounded-full" loading="lazy" />
341+
<img
342+
src="https://github.com/mschuwalow.png"
343+
class="h-12 w-12 rounded-full"
344+
loading="lazy"
345+
/>
322346
<div>
323347
<div class="text-xl sm:text-2xl font-semibold text-foreground">
324348
Maxim Schuwalow

‎lib/algora_web/live/jobs_live.ex‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ defmodule AlgoraWeb.JobsLive do
88
alias Algora.Accounts
99
alias Algora.Jobs
1010
alias Algora.Jobs.JobPosting
11+
alias Algora.Markdown
1112
alias Phoenix.LiveView.AsyncResult
1213

1314
require Logger
@@ -112,8 +113,28 @@ defmodule AlgoraWeb.JobsLive do
112113
{job.title}
113114
</div>
114115
</div>
115-
<div :if={job.description} class="pt-1 text-sm text-muted-foreground">
116-
{job.description}
116+
<div
117+
:if={job.description}
118+
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
119+
>
120+
<div
121+
id={"job-description-#{job.id}"}
122+
class="line-clamp-3 transition-all duration-200"
123+
phx-hook="ExpandableText"
124+
data-expand-id={"expand-#{job.id}"}
125+
data-class="line-clamp-3"
126+
>
127+
{Phoenix.HTML.raw(Markdown.render(job.description))}
128+
</div>
129+
<button
130+
id={"expand-#{job.id}"}
131+
type="button"
132+
class="text-xs text-foreground font-bold mt-2 hidden"
133+
data-content-id={"job-description-#{job.id}"}
134+
phx-hook="ExpandableTextButton"
135+
>
136+
...see more
137+
</button>
117138
</div>
118139
<div class="pt-2 flex flex-wrap gap-2">
119140
<%= for tech <- job.tech_stack do %>

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,24 @@ defmodule AlgoraWeb.Org.JobLive do
176176
:if={@job.description}
177177
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
178178
>
179-
{Phoenix.HTML.raw(Markdown.render(@job.description))}
179+
<div
180+
id={"job-description-#{@job.id}"}
181+
class="line-clamp-3 transition-all duration-200"
182+
phx-hook="ExpandableText"
183+
data-expand-id={"expand-#{@job.id}"}
184+
data-class="line-clamp-3"
185+
>
186+
{Phoenix.HTML.raw(Markdown.render(@job.description))}
187+
</div>
188+
<button
189+
id={"expand-#{@job.id}"}
190+
type="button"
191+
class="text-xs text-foreground font-bold mt-2 hidden"
192+
data-content-id={"job-description-#{@job.id}"}
193+
phx-hook="ExpandableTextButton"
194+
>
195+
...see more
196+
</button>
180197
</div>
181198
<div class="pt-2 flex flex-wrap gap-2">
182199
<%= for tech <- @job.tech_stack do %>

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,24 @@ defmodule AlgoraWeb.Org.JobsLive do
117117
:if={job.description}
118118
class="pt-1 text-sm text-muted-foreground prose prose-invert max-w-none"
119119
>
120-
{Phoenix.HTML.raw(Markdown.render(job.description))}
120+
<div
121+
id={"job-description-#{job.id}"}
122+
class="line-clamp-3 transition-all duration-200"
123+
phx-hook="ExpandableText"
124+
data-expand-id={"expand-#{job.id}"}
125+
data-class="line-clamp-3"
126+
>
127+
{Phoenix.HTML.raw(Markdown.render(job.description))}
128+
</div>
129+
<button
130+
id={"expand-#{job.id}"}
131+
type="button"
132+
class="text-xs text-foreground font-bold mt-2 hidden"
133+
data-content-id={"job-description-#{job.id}"}
134+
phx-hook="ExpandableTextButton"
135+
>
136+
...see more
137+
</button>
121138
</div>
122139
<div class="pt-2 flex flex-wrap gap-2">
123140
<%= for tech <- job.tech_stack do %>

0 commit comments

Comments
 (0)