soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Contact reveal modal: click phone/contact on cards and detail pages
CI/CD / CI · dotnet build (push) Successful in 2m26s
Details
CI/CD / Deploy · hamkadr (push) Successful in 58s
Details

Browse Source 
Adds a lazy-loaded contact modal. Any element with data-contact-type +
data-contact-id (the «📞 تماس» button on shift/job/talent/recommendation cards,
and the contact CTA on the three detail pages) opens a modal that fetches the
listing's numbers from a new GET /contact endpoint and renders them with click-
to-call links. Numbers are loaded only on click, so they never sit in list-page
HTML (privacy / anti-scrape). The endpoint logs the same Apply interest signal
for shift/job that the old inline-reveal POST did, and falls back to the
facility phone (or Divar source link for talent) when an ad has no own contacts.

Verified locally: GET /contact?type=shift&id=1 → {title, contacts:[{value:
'021-82032000', href:'tel:...'}]}, and the modal opens and renders on the shift
detail page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-20 09:04:08 +03:30
parent 0cf5b30dd8
commit 4c0b29addf
10 changed files with 144 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+16
View File
@@ -363,6 +363,22 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
.contact-row .btn { flex: 0 0 auto; padding: 6px 14px; }
.badge-gender { background: #f3eefb; color: #6b3fa0; }
/* ---------- Contact modal (lazy-loaded numbers) ---------- */
.contact-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center;
justify-content: center; padding: 16px; background: rgba(15,23,42,.55); }
.contact-modal.show { display: flex; animation: revealIn .2s ease; }
.contact-modal-box { background: var(--surface); border-radius: 16px; width: 100%; max-width: 420px;
box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; animation: revealIn .25s cubic-bezier(.2,.7,.3,1); }
.contact-modal-head { display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--line); }
.contact-modal-head h3 { margin: 0; font-size: 16px; }
.contact-modal-x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted);
line-height: 1; padding: 4px 6px; border-radius: 8px; }
.contact-modal-x:hover { background: var(--bg); color: var(--ink); }
.contact-modal-body { padding: 14px 16px; }
/* The card-level trigger sits inside an <a>; show it as the primary action. */
.contact-trigger { cursor: pointer; }
/* ---------- Filters layout ---------- */
.layout-2 { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
.filter-card { position: sticky; top: 84px; }