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

Search: fix header UI + instant typeahead (5 highlighted matches) + ranking
CI/CD / CI · dotnet build (push) Successful in 1m38s
Details
CI/CD / Deploy · hamkadr (push) Successful in 2m6s
Details

Browse Source 
- Header search restyled as one clean RTL pill (input + button flush).
- Google-style autocomplete: typing ≥2 chars fetches /search/suggest and
  shows up to 5 live matches (round-robin across shifts/jobs/applicants)
  with the query highlighted, plus a «همه نتایج» link. Debounced, closes on
  outside-click/Escape.
- Search results page now RANKS by relevance (term hits in role/title/
  facility/city/tags weighted ×3, description ×1) instead of date-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-08 11:58:30 +03:30
parent 9db4deafbc
commit 61afc957aa
4 changed files with 132 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+21 -7
View File
@@ -273,13 +273,27 @@ label { font-size: 13px; }
background: var(--primary-soft); color: var(--primary-dark); }
mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px; }
/* Header search */
.nav-search { display: flex; align-items: center; gap: 0; }
.nav-search input { width: 150px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px 0 0 10px;
font-family: inherit; font-size: 13px; background: var(--bg); }
.nav-search input:focus { outline: none; border-color: var(--primary); width: 190px; }
.nav-search button { padding: 7px 11px; border: 1px solid var(--primary); background: var(--primary); color: #fff;
border-radius: 0 10px 10px 0; cursor: pointer; font-size: 14px; }
/* Header search — single rounded pill (input + button flush), RTL-correct */
.nav-search { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line);
border-radius: 999px; overflow: hidden; background: var(--bg); transition: border-color .15s; }
.nav-search:focus-within { border-color: var(--primary); }
.nav-search input { border: none; background: transparent; padding: 7px 14px; width: 150px;
font-family: inherit; font-size: 13px; transition: width .15s; }
.nav-search input:focus { outline: none; width: 200px; }
.nav-search button { border: none; background: var(--primary); color: #fff; padding: 0 14px;
cursor: pointer; font-size: 14px; line-height: 1; }
/* Autocomplete dropdown */
.nav-search-results { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
background: var(--surface); border: 1px solid var(--line); border-radius: 12px; z-index: 80;
box-shadow: 0 14px 34px rgba(0,0,0,.14); overflow: hidden; max-height: 70vh; overflow-y: auto; }
.nav-search-results a { display: flex; align-items: center; gap: 8px; padding: 9px 12px;
border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.nav-search-results a:last-child { border-bottom: none; }
.nav-search-results a:hover { background: var(--primary-soft); }
.nav-search-results .ns-type { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--primary-dark);
background: var(--primary-soft); border-radius: 6px; padding: 2px 7px; }
.nav-search-results .ns-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-search-results .ns-all { font-weight: 700; color: var(--primary-dark); justify-content: center; }
/* Big search box on the /Search page head */
.search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; }
.search-hero input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;