AliReza_Zareian/MathApp_frontend
1
0
Fork 0
forked from Tadrisino/MathApp_frontend
Code Pull Requests Activity

Fine-tune: bigger invisible tap areas on header chips, press feedback on tabs and chips, touch-action manipulation

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
AliReza
2026-10-08 16:59:12 +03:30
parent 50f6ade9f8
commit d0a2822658
3 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BottomNav.tsx
View File

@@ -20,7 +20,7 @@ export function BottomNav({ active, onChange }: { active: TabName | null; onChan
type="button" type="button"
onClick={() => onChange(id)} onClick={() => onChange(id)}
aria-current={on ? 'page' : undefined} aria-current={on ? 'page' : undefined}
className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-colors ${on ? 'text-coral' : 'text-muted'}`} className={`flex min-w-14 flex-col items-center gap-0.5 rounded-xl px-2 pb-1.5 transition-[color,transform] active:scale-90 ${on ? 'text-coral' : 'text-muted'}`}
> >
<span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}> <span className={`rounded-xl p-1.5 transition-colors ${on ? 'bg-[#fde9e5]' : ''}`}>
<Icon size={20} strokeWidth={on ? 2.5 : 1.9} /> <Icon size={20} strokeWidth={on ? 2.5 : 1.9} />

6
src/screens/HomeScreen.tsx
View File

@@ -53,7 +53,7 @@ export function HomeScreen() {
<header className="relative z-20 flex-shrink-0 rounded-b-[28px] bg-coral px-4 pb-4 pt-safe text-white shadow-md shadow-coral/20"> <header className="relative z-20 flex-shrink-0 rounded-b-[28px] bg-coral px-4 pb-4 pt-safe text-white shadow-md shadow-coral/20">
<div className="flex items-center gap-2 pt-4"> <div className="flex items-center gap-2 pt-4">
{gradeTitle && ( {gradeTitle && (
<button type="button" onClick={() => nav.switchTab('profile')} className="rounded-full bg-white/20 px-3 py-1.5 text-xs font-black"> <button type="button" onClick={() => nav.switchTab('profile')} className="hit rounded-full bg-white/20 px-3 py-1.5 text-xs font-black active:scale-95">
{gradeTitle} {gradeTitle}
</button> </button>
)} )}
@@ -64,13 +64,13 @@ export function HomeScreen() {
type="button" type="button"
aria-label={`${label}: ${toFa(value)}`} aria-label={`${label}: ${toFa(value)}`}
onClick={() => nav.push({ name: to })} onClick={() => nav.push({ name: to })}
className="flex items-center gap-1 rounded-full bg-white px-2.5 py-1.5 text-xs font-black text-ink shadow-sm" className="hit flex items-center gap-1 rounded-full bg-white px-2.5 py-1.5 text-xs font-black text-ink shadow-sm active:scale-95"
> >
<Icon size={15} style={{ color }} fill={fill ? color : 'none'} strokeWidth={2.4} /> <Icon size={15} style={{ color }} fill={fill ? color : 'none'} strokeWidth={2.4} />
{toFa(value)} {toFa(value)}
</button> </button>
))} ))}
<button type="button" aria-label="اعلان‌ها" onClick={() => nav.push({ name: 'notifications' })} className="relative flex h-8 w-8 items-center justify-center rounded-full bg-white/20"> <button type="button" aria-label="اعلان‌ها" onClick={() => nav.push({ name: 'notifications' })} className="hit relative flex h-8 w-8 items-center justify-center rounded-full bg-white/20 active:scale-95">
<Bell size={16} /> <Bell size={16} />
{unreadCount > 0 && ( {unreadCount > 0 && (
<span className="absolute -left-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[#FFD23F] px-1 text-[9px] font-black text-ink"> <span className="absolute -left-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-[#FFD23F] px-1 text-[9px] font-black text-ink">

6
src/styles/index.css
View File

@@ -46,6 +46,8 @@
button { button {
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
/* بی‌تأخیرِ دابل‌تپ و بی‌زوم با دو ضربه روی دکمه‌ها */
touch-action: manipulation;
} }
button:disabled { button:disabled {
cursor: not-allowed; cursor: not-allowed;
@@ -103,3 +105,7 @@
animation: glyph-float 6s ease-in-out infinite; animation: glyph-float 6s ease-in-out infinite;
will-change: transform; will-change: transform;
} }
/* ناحیه‌ی لمسِ بزرگ‌تر بدونِ تغییرِ ظاهر: دکمه‌های کوچکِ سربرگ (۲۸–۳۲ پیکسل) برای انگشت کوچک‌اند. */
.hit { position: relative; }
.hit::after { content: ''; position: absolute; inset: -7px -3px; }