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

Merge pull request 'Profile: Urdu keyboard on name and bio; field keyboards open under the field' (#102) from feature/profile-keyboard into main

Browse Source 
Reviewed-on: #102
This commit is contained in:
anas 2026-10-09 22:54:42 +00:00
commit fdb42e78d8
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -318,11 +318,14 @@ import { siteUrl } from '../lib/site-url';
document.addEventListener('click', (e) => {
const b = e.target.closest('[data-urdu-kb], [data-urdu-rom]'); if (!b) return;
target = document.getElementById(b.dataset.urduKb ?? b.dataset.urduRom)?.querySelector('[contenteditable]') ?? document.getElementById(b.dataset.urduKb ?? b.dataset.urduRom);
// in an open dialog (the note box) the header can't be reached: the keyboard moves under the box, and back when it closes
const box = b.dataset.urduKb && target.closest('dialog');
if (box) { kb.classList.remove('kb-float'); target.closest('.in-box-field')?.after(kb); }
else if (b.dataset.urduKb && target.isContentEditable) { kb.classList.add('kb-float'); document.body.append(kb); } // the editor: floating
else if (b.dataset.urduKb) home();
// a field's own keyboard opens right under that field (in view while typing, also in a dialog), and goes back to
// the header when closed; open under another field, it moves here
if (b.dataset.urduKb && target.isContentEditable) { kb.classList.add('kb-float'); document.body.append(kb); } // the editor: floating
else if (b.dataset.urduKb) {
const at = target.closest('.in-box-field') ?? target;
if (!kb.hidden && kb.previousElementSibling !== at) closeKb();
kb.classList.remove('kb-float'); at.after(kb);
}
(b.dataset.urduKb ? kbBtn : romBtn).click();
b.setAttribute('aria-pressed', (b.dataset.urduKb ? kbBtn : romBtn).getAttribute('aria-pressed'));
});

4
web/src/pages/account.astro
View File

@ -48,8 +48,8 @@ import Icon from '../components/Icon.astro';
<form method="post" class="account-form">
<h2>پروفائل</h2>
<input type="hidden" name="act" value="profile" />
<label>پورا نام<input name="full_name" value={user.full_name} maxlength="100" dir="auto" autocomplete="name" /></label>
<label>تعارف<textarea name="bio" maxlength="1000" rows="4" dir="auto">{user.bio}</textarea></label>
<label>پورا نام<span class="in-box-field"><input id="p-name" name="full_name" value={user.full_name} maxlength="100" dir="auto" autocomplete="name" data-urdu /><button type="button" class="in-box rom" data-urdu-rom="p-name" aria-pressed="false" aria-label="رومن حروف سے اردو" title="رومن حروف سے اردو ٹائپنگ">اب</button><button type="button" class="in-box" data-urdu-kb="p-name" aria-pressed="false" aria-label="اردو کی بورڈ" title="اردو کی بورڈ"><Icon name="keyboard" size={18} /></button></span></label>
<label>تعارف<span class="in-box-field note-field"><textarea id="p-bio" name="bio" maxlength="1000" rows="4" dir="auto" data-urdu>{user.bio}</textarea><button type="button" class="in-box rom" data-urdu-rom="p-bio" aria-pressed="false" aria-label="رومن حروف سے اردو" title="رومن حروف سے اردو ٹائپنگ">اب</button><button type="button" class="in-box" data-urdu-kb="p-bio" aria-pressed="false" aria-label="اردو کی بورڈ" title="اردو کی بورڈ"><Icon name="keyboard" size={18} /></button></span></label>
<button type="submit" class="btn primary"><Icon name="save" size={18} /> محفوظ کریں</button>
</form>

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

@ -293,7 +293,7 @@ h1 + .muted { text-align: center; margin-top: 0; }
.account-form > button { font-size: inherit; padding: 4px 14px; }
/* boxes with the keyboard buttons inside them: full width, and the small in-box buttons keep their own look */
.account-form .in-box-field { display: block; position: relative; }
.account-form .in-box-field input { width: 100%; box-sizing: border-box; }
.account-form .in-box-field :is(input, textarea) { width: 100%; box-sizing: border-box; }
.account-form .in-box { padding: 4px; border: 0; border-radius: 6px; background: none; color: var(--text-muted); }
.account-form.danger button { border-color: var(--danger); color: var(--danger); }
.form-error { color: var(--danger); text-align: center; }