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

Keyboard toggle as an icon inside the search box

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Anas Rashid 2026-10-08 21:13:50 +02:00
parent f82df122b9
commit 4ef7de256c
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,9 @@ const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو ک
<a class="wordmark" href="/">دیوان</a>
<form class="search-form" action="/search" method="get" role="search">
<input type="search" name="q" id="q" value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
<button type="button" id="kb-toggle" aria-label="اردو کی بورڈ" aria-pressed="false" title="اردو کی بورڈ (فونیٹک ٹائپنگ)">ا ب</button>
<button type="button" id="kb-toggle" 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>
</button>
</form>
<div class="toggles">
<button type="button" id="font-toggle" aria-label="خط بدلیں">نسخ</button>

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

@ -30,11 +30,11 @@ a:hover { color: var(--brand); }
/* header: logo + search + toggles in a gold-bordered bar */
.site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
.wordmark { font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
.search-form { flex: 1; min-width: 200px; display: flex; }
.search-form { flex: 1; min-width: 200px; display: flex; position: relative; }
.search-form input, .toggles button {
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; }
.search-form input { flex: 1; padding: 4px 14px; padding-inline-end: 40px; }
.search-form input:focus { outline: none; border-color: var(--gold); }
.toggles { display: flex; gap: 6px; }
.toggles button { padding: 2px 12px; cursor: pointer; font-size: .85rem; }
@ -108,8 +108,9 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
h1 + .muted { text-align: center; margin-top: 0; }
/* Urdu keyboard */
#kb-toggle { font: inherit; border: 1.5px solid var(--border); background: var(--inner); color: var(--ink); border-radius: 10px; margin-inline-start: 6px; padding: 0 12px; cursor: pointer; }
#kb-toggle[aria-pressed='true'] { border-color: var(--brand); color: var(--brand); }
#kb-toggle { 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; }
#kb-toggle:hover { opacity: 1; }
#kb-toggle[aria-pressed='true'] { color: var(--brand); opacity: 1; }
.kb { padding-bottom: 10px; }
.kb div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.kb button {