UI واکنش‌گرا

این صفحه چیدمان فعلی apps/calendar-web را مستند می‌کند؛ رابط اندروید لزوماً همین ساختار را ندارد.

عرض صفحه (px)	کلاس	ناوبری
کمتر از ۶۰۰	compact	نوار پایین، FAB و کشو
۶۰۰–۱۰۲۳	medium	ریل ۸۰px و کشو
۱۰۲۴–۱۱۹۹	expanded	سایدبار
۱۲۰۰–۱۵۹۹	large	همان سایدبار
از ۱۶۰۰	extra-large	همان سایدبار

منبع کد: CSS در src/styles/theme.css و JS در src/hooks/useWindowSizeClass.ts. مرزهای معنی‌دار md3=600 و lg=1024 هستند؛ کلاس‌های sm/md پیش‌فرض Tailwind مرز ناوبری نیستند.

رفتارهای اولیه که باید بدانید:

• hook تا پایان mount مقدار compact برمی‌گرداند و useIsMobile تا پایان mount مقدار false.
• برای نمای اولین paint، CalendarFaPage مستقیم matchMedia می‌خواند: زیر ۱۰۲۴ برنامه و بالاتر از آن، نمای ماه.
• تغییر اندازهٔ پنجره، انتخاب دستی نما را بازنویسی نمی‌کند.

مسیرهای مهم

• src/pages/CalendarFaPage.tsx: پوستهٔ 100dvh، کشوی راست RTL و رزرو فضای پایین در حالت compact برای ناوبری/safe-area.
• src/components/calendar-app: چهار نما؛ نقطهٔ شکست ماه زیر ۶۰۰ است و از ۶۰۰ به بالا چیپ/«+N». انتخاب روز در compact به نمای روز می‌رود. نمای هفته time-grid با اسکرول افقی است (ادعای قدیمی ستون 85vw دیگر مرجع نیست).
• src/features/tasks/TasksPage.tsx: صفحهٔ مستقل /tasks با افزودن سریع، تب‌ها و جزئیات وظیفه؛ ورود از نوار پایین/ریل/سایدبار.
• src/components/ui/dialog.tsx: زیر عرض ۷۲۰ به‌جای dialog، برگه (sheet) نمایش می‌دهد — نه ۱۰۲۴. سقف ارتفاع ۹۲dvh؛ در عرض‌های بالاتر، حداکثر عرض ۵۲۰ و سقف min(86vh, 780px). دستگیرهٔ drag ندارد؛ Esc/portal/فوکوس/قفل اسکرول را Radix مدیریت می‌کند.

هنگام تغییر چیدمان

مرزهای ۵۹۹/۶۰۰، ۱۰۲۳/۱۰۲۴، ۱۲۰۰ و ۱۶۰۰ را با کیبورد و لمس هر دو بررسی کنید. ابزارهای موجود در src/index.css: focus-visible، reduced-motion، safe-area و هدف لمس ۴۴×۴۴ — وجود ابزار اثبات استفادهٔ همهٔ کنترل‌ها نیست.

در تغییرات حفظ کنید: ویژگی‌های منطقی start/end و نام فارسی کنترل‌های آیکونی؛ index.html دارای viewport-fit=cover است.

پیوندها: وضعیت پذیرش · گالری کنترل‌ها