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

Home hero search: polish mobile layout (stacked bordered input + full-width button)
CI/CD / CI · dotnet build (push) Successful in 3m4s
Details
CI/CD / Deploy · hamkadr (push) Successful in 2m26s
Details

Browse Source 
On small screens the pill now stacks cleanly: a bordered, padded input above
a full-width جستجو button; icon hidden; chips centered. Shorter placeholder so
it never overflows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-08 23:14:25 +03:30
parent bcf90f2437
commit 69e2a12a3a
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/Pages/Index.cshtml
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="hero-search-pill"> <div class="hero-search-pill">
<span class="hs-ico">🔎</span> <span class="hs-ico">🔎</span>
<input type="search" name="Q" autocomplete="off" <input type="search" name="Q" autocomplete="off"
placeholder="جستجو کن: پرستار شب تهران، mmt، دندان‌پزشک پروانه‌دار، آماده به کار…" /> placeholder="جستجو: پرستار، mmt، دندان‌پزشک…" />
<button type="submit" class="btn btn-accent btn-lg">جستجو</button> <button type="submit" class="btn btn-accent btn-lg">جستجو</button>
</div> </div>
<div class="hero-chips"> <div class="hero-chips">
src/JobsMedical.Web/wwwroot/css/site.css
+8 -4
View File
@@ -317,11 +317,15 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
.hero-chips .hc-label { color: rgba(255,255,255,.85); } .hero-chips .hc-label { color: rgba(255,255,255,.85); }
.hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; } .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
.hero-chips a:hover { background: rgba(255,255,255,.3); } .hero-chips a:hover { background: rgba(255,255,255,.3); }
@media (max-width: 520px) { @media (max-width: 560px) {
.hero-search-pill { flex-wrap: wrap; } .hero-search { margin-top: 6px; }
.hero-search-pill input { flex: 1 1 100%; order: 1; } .hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; }
.hero-search-pill .btn { flex: 1 1 100%; order: 2; }
.hero-search-pill .hs-ico { display: none; } .hero-search-pill .hs-ico { display: none; }
.hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
padding: 12px 14px; font-size: 15px; background: var(--bg); }
.hero-search-pill .btn { width: 100%; }
.hero-chips { gap: 6px; }
.hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
} }
/* Big search box on the /Search page head */ /* Big search box on the /Search page head */
.search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; } .search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; }