anas/divan
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Search boxes: search icon at the far left of the top box; poet name box has the keyboard icons inside, like the top box

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-09 00:33:52 +02:00
parent a9626b4d9e
commit bf7c00d51d
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/layouts/Base.astro
View File

@ -35,10 +35,13 @@ const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو ک
<a class="wordmark" href="/">دیوان</a> <a class="wordmark" href="/">دیوان</a>
<form class="search-form" action="/search" method="get" role="search"> <form class="search-form" action="/search" method="get" role="search">
<input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" /> <input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
<button type="button" id="rom-toggle" class="in-box" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button> <button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button>
<button type="button" id="kb-toggle" class="in-box" aria-label="اردو کی بورڈ" aria-pressed="false" title="اردو کی بورڈ"> <button type="button" id="kb-toggle" class="in-box" aria-label="اردو کی بورڈ" aria-pressed="false" title="اردو کی بورڈ">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" stroke-linecap="round" stroke-width="2"/></svg> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" stroke-linecap="round" stroke-width="2"/></svg>
</button> </button>
<button type="submit" class="in-box go" aria-label="تلاش کریں" title="تلاش کریں">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m15.5 15.5 5 5"/></svg>
</button>
</form> </form>
<div class="toggles"> <div class="toggles">
{Astro.locals.user?.role === 'admin' && <a class="account-link" href="/admin">ایڈمن</a>} {Astro.locals.user?.role === 'admin' && <a class="account-link" href="/admin">ایڈمن</a>}

8
web/src/pages/search.astro
View File

@ -75,11 +75,11 @@ const from = res ? (pageNo - 1) * res.pageSize + 1 : 0, to = res ? Math.min(res.
))} ))}
{chips.length > 12 && <button type="button" class="chip more" onclick="this.parentElement.classList.add('all'); this.remove()">مزید {ud(chips.length - 12)}</button>} {chips.length > 12 && <button type="button" class="chip more" onclick="this.parentElement.classList.add('all'); this.remove()">مزید {ud(chips.length - 12)}</button>}
</div> </div>
<div class="author-find"> <div class="author-find in-box-field">
<input id="author-name" data-urdu placeholder="کسی اور شاعر یا ادیب کا نام" autocomplete="off" aria-label="شاعر کا نام" /> <input id="author-name" data-urdu placeholder="کسی اور شاعر یا ادیب کا نام" autocomplete="off" aria-label="شاعر کا نام" />
<button type="button" class="in-box-btn" data-urdu-rom="author-name" title="رومن حروف سے اردو">اب</button> <button type="button" class="in-box rom" data-urdu-rom="author-name" aria-pressed="false" title="رومن حروف سے اردو">اب</button>
<button type="button" class="in-box-btn" data-urdu-kb="author-name" title="اردو کی بورڈ" aria-label="اردو کی بورڈ"> <button type="button" class="in-box" data-urdu-kb="author-name" aria-pressed="false" title="اردو کی بورڈ" aria-label="اردو کی بورڈ">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" stroke-linecap="round" stroke-width="2"/></svg> <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" stroke-linecap="round" stroke-width="2"/></svg>
</button> </button>
<div class="author-suggest" id="author-suggest" hidden></div> <div class="author-suggest" id="author-suggest" hidden></div>
</div> </div>

13
web/src/styles/global.css
View File

@ -35,7 +35,7 @@ a:hover { color: var(--brand); }
.search-form input, .toggles button { .search-form input, .toggles button {
font: inherit; border: 1.5px solid var(--border); background: var(--inner); color: var(--ink); border-radius: 10px; font: inherit; border: 1.5px solid var(--border); background: var(--inner); color: var(--ink); border-radius: 10px;
} }
.search-form input { flex: 1; padding: 4px 14px; padding-inline-end: 76px; } .search-form input { flex: 1; padding: 4px 14px; padding-inline-end: 106px; }
.search-form input:focus { outline: none; border-color: var(--gold); } .search-form input:focus { outline: none; border-color: var(--gold); }
.toggles { display: flex; gap: 6px; } .toggles { display: flex; gap: 6px; }
.toggles button { padding: 2px 12px; cursor: pointer; font-size: .85rem; } .toggles button { padding: 2px 12px; cursor: pointer; font-size: .85rem; }
@ -118,7 +118,14 @@ h1 + .muted { text-align: center; margin-top: 0; }
/* Urdu keyboard */ /* Urdu keyboard */
.in-box { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px; border: 0; background: none; color: var(--muted, currentColor); opacity: .7; cursor: pointer; border-radius: 6px; } .in-box { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px; border: 0; background: none; color: var(--muted, currentColor); opacity: .7; cursor: pointer; border-radius: 6px; }
#rom-toggle { inset-inline-end: 38px; font: 600 .95rem/1 'Noto Naskh Arabic', serif; } /* icons inside a text box, from the far left: search (top box only), keyboard, Roman-to-Urdu */
.in-box.rom { font: 600 .95rem/1 'Noto Naskh Arabic', serif; }
.search-form .in-box.go { inset-inline-end: 8px; }
.search-form #kb-toggle { inset-inline-end: 38px; }
.search-form #rom-toggle { inset-inline-end: 68px; }
.in-box-field { position: relative; }
.in-box-field input { padding-inline-end: 76px !important; }
.in-box-field .in-box.rom { inset-inline-end: 38px; }
.in-box:hover { opacity: 1; } .in-box:hover { opacity: 1; }
.in-box[aria-pressed='true'] { color: var(--brand); opacity: 1; } .in-box[aria-pressed='true'] { color: var(--brand); opacity: 1; }
.site-header .kb:not([hidden]) { display: block; padding-bottom: 10px; } /* not the header's flex row */ .site-header .kb:not([hidden]) { display: block; padding-bottom: 10px; } /* not the header's flex row */
@ -288,8 +295,6 @@ h1 + .muted { text-align: center; margin-top: 0; }
.author-chips.all .chip.extra { display: inline-flex; } .author-chips.all .chip.extra { display: inline-flex; }
.author-find { position: relative; display: flex; gap: 4px; max-width: 420px; margin: 10px auto 0; } .author-find { position: relative; display: flex; gap: 4px; max-width: 420px; margin: 10px auto 0; }
.author-find input { flex: 1; font: inherit; padding: 3px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--ink); } .author-find input { flex: 1; font: inherit; padding: 3px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--paper); color: var(--ink); }
.in-box-btn { display: inline-flex; align-items: center; font: inherit; font-size: .85rem; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--inner); color: var(--muted); cursor: pointer; }
.in-box-btn[aria-pressed='true'] { color: var(--brand); border-color: var(--brand); }
.author-suggest { position: absolute; top: 100%; inset-inline: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-top: 4px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgb(0 0 0 / .15); } .author-suggest { position: absolute; top: 100%; inset-inline: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-top: 4px; background: var(--paper); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgb(0 0 0 / .15); }
.author-suggest button { font: inherit; font-size: .88rem; padding: 0 10px; border: 1px solid var(--gold-light); border-radius: 999px; background: var(--inner); color: var(--ink); cursor: pointer; } .author-suggest button { font: inherit; font-size: .88rem; padding: 0 10px; border: 1px solid var(--gold-light); border-radius: 999px; background: var(--inner); color: var(--ink); cursor: pointer; }
.author-suggest button:hover { border-color: var(--brand); color: var(--brand); } .author-suggest button:hover { border-color: var(--brand); color: var(--brand); }