رفتن به محتوای اصلی

ماه کوچک — شبکهٔ ماه جلالی

وضعیت​

هدفِ normative. وب تقویم جلالی کامل دارد (JalaliCalendar/MonthView) با مارک‌آپ ad hoc؛ پذیرش در وضعیت پذیرش طراحی. کلاس‌های .mgrid/.mini-month prototype-only.

هدف​

قلب محصول: شبکهٔ ماه جلالی، در سه اندازه استفاده می‌شود — مینی‌ماهِ سایدبار، پاپ‌آور انتخاب تاریخ و نمای سال (۱۲ عدد پشت‌سرهم).

ساختار​

<div class="mini-month">
  <div class="wrow">ش ی د س چ پ ج</div>
  <div class="mgrid"><button class="mday today">۷</button>…</div>
</div>

هفته شنبه‌شروع (آرایهٔ J.WD_SHORT) · نسبت ۱:۱ · گپ ۲px · هاور سطح ۲.

گونه‌ها و اندازه‌ها​

اندازهکجا
کوچک (سلول ~۳۲)سایدبار/پاپ‌آور
نمای سال۱۲ شبکهٔ کوچک پشت‌سرهم
بزرگنمای ماه اصلی صفحه (همان استیت‌ها، سلول بزرگ‌تر)

حالت‌ها​

استیتنشانه
defaultعدد --fg
hoverپس‌زمینهٔ سطح ۲
focus-visibleحلقهٔ ۲px برند
.todayدایرهٔ پر برند + عدد سفید پررنگ — تنها استفادهٔ پرِ برند در گرید
.selحلقهٔ داخلی ۲px برند (انتخاب پاپ‌آور)
.holجمعه/تعطیل — عدد با رنگ تعطیلات
.outروزهای ماه مجاور — ۴۵٪ شفاف
.dotنقطهٔ ۴px پایین روز با رنگ تقویمِ دارای رویداد (--dc)
disabled / loading / error / successندارد — هر روزی همیشه قابل انتخاب است (روشن/تعطیل فقط رنگ است)

رفتار​

  • کلیک روز = انتخاب؛ در نمای ماه موبایل ضربه روی روز به نمای Day می‌رود.
  • کبیسی با الگوریتم ۳۳سالهٔ موتور جلالی (J.jDaysInMonth) — در برابر تاریخ‌های مرجع تست شده.
  • تعطیلات ثابت شمسی از J.HOLIDAYS + جمعه‌ها (J.isHoliday).

کیبورد و دسترس‌پذیری​

  • روزها دکمه‌اند؛ فلش‌ها روز به روز جابه‌جا می‌کنند و رد شدن از سرِ هفته ماه را عوض می‌کند؛ T به امروز می‌پرد.
  • نام دسترس‌پذیر کامل: «شنبه ۷ شهریور» (+ «تعطیل» اگر هست).
  • سلول ≥۳۲px؛ هدف با گپ‌ها و hit area در حد لمس قابل‌استفاده؛ نمای ماه اصلی سلول‌های بزرگ ≥۴۴ دارد.

رفتار واکنش‌گرا​

مینی‌ماه فقط در drawer/سایدبار (compact/expanded)؛ نمای سال روی موبایل به اسکرول عمودی ۱۲تایی می‌شود.

قواعد محتوا​

  • ✅ عدد روز فارسی؛ سرستون تک‌حرفی «ش ی د س چ پ ج».
  • ❌ هفتهٔ یکشنبه‌شروع؛ جمعهٔ سیاه؛ نقطه‌های چندرنگ در یک روز با رنگ غیرتقویم.

توکن‌ها​

--brand (امروز/انتخاب) · --holiday (تعطیل) · سطح ۲ (هاور) · --dc (نقطهٔ رویداد) · شعاع کامل روز.

پیاده‌سازی پلتفرم‌ها​

  • وب: JalaliCalendar.tsx و MonthView.tsx (نقطه + «+N» در موبایل، چیپ کامل در lg+)؛ موتور: jalaliUtils.ts.
  • اندروید: هنوز نمای تقویم ندارد (فقط ساخت/فهرست تقویم محلی).
  • .mgrid فقط در ui-design/prototypes/assets/app.css (prototype-only).

نمونهٔ تعاملی​

کتابخانهٔ زندهٔ ماه کوچک