refactor(events): update event titles for consistency and add short titles

Ali-Sdg90 · Ali-Sdg90 · commit 24e14c850991 · 2025-12-09T17:19:46.000+03:30
style(CalendarIntro): improve layout and text clarity in introductory card
style(media): adjust responsive styles for better layout on smaller screens
fix(CSCalendar): implement window resize handling for responsive title display
diff --git a/src/__tests__/constants/events.test.js b/src/__tests__/constants/events.test.js
@@ -21,10 +21,10 @@ describe("events constants", () => {
     });
 
     it("should have correct event titles", () => {
-        expect(events[0].title).toBe("جلسه مرحله سوم");
-        expect(events[1].title).toBe("جلسه مرحله دوم");
-        expect(events[2].title).toBe("جلسه مصاحبه");
-        expect(events[3].title).toBe("جلسه مرحله اول");
+        expect(events[0].title).toBe("مرحله سوم");
+        expect(events[1].title).toBe("مرحله دوم");
+        expect(events[2].title).toBe("مصاحبه");
+        expect(events[3].title).toBe("مرحله اول");
     });
 
     it("each event should have non-empty title and fullName", () => {
@@ -43,9 +43,9 @@ describe("events constants", () => {
     });
 
     it("should be ordered correctly", () => {
-        expect(events[0].title).toBe("جلسه مرحله سوم");
-        expect(events[1].title).toBe("جلسه مرحله دوم");
-        expect(events[2].title).toBe("جلسه مصاحبه");
-        expect(events[3].title).toBe("جلسه مرحله اول");
+        expect(events[0].title).toBe("مرحله سوم");
+        expect(events[1].title).toBe("مرحله دوم");
+        expect(events[2].title).toBe("مصاحبه");
+        expect(events[3].title).toBe("مرحله اول");
     });
 });
diff --git a/src/assets/scss/components/_calendar-intro.scss b/src/assets/scss/components/_calendar-intro.scss
@@ -37,7 +37,7 @@
 }
 
 .calendar-intro__content {
-    gap: 4px;
+    gap: 8px;
 }
 
 .calendar-intro__list {
diff --git a/src/assets/scss/components/_cs-calendar.scss b/src/assets/scss/components/_cs-calendar.scss
@@ -1,5 +1,5 @@
 .calendar-section {
-    min-height: calc(100vh - 128px);
+    height: calc(100vh - 56px);
     gap: 12px;
 }
 
@@ -96,20 +96,27 @@ thead {
 }
 
 .stage-tag {
-    // font-weight: 700;
-    padding: 0 8px;
+    padding: 3px 8px;
     border-radius: 6px;
     font-size: 12px;
-    height: 28px;
+    // height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 3px;
     position: absolute;
     top: 28px;
     width: 100%;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     color: #fff;
     letter-spacing: 0.3px;
+
+    .main-word {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center !important;
+    }
 }
 
 .date-label {
diff --git a/src/assets/scss/components/_media.scss b/src/assets/scss/components/_media.scss
@@ -1,15 +1,40 @@
+@media (max-width: 950px) {
+    .meeting-word {
+        display: none !important;
+    }
+
+    .main-word {
+        white-space: pre-wrap !important;
+    }
+}
+
 @media (max-width: 768px) {
     body {
-        overflow-y: auto !important;
-        min-width: 400px !important;
+        min-width: 320px !important;
+    }
+
+    .ant-card.calendar-intro {
+        padding: 14px 10px 4px 20px !important;
+
+        .ant-card-body {
+            padding: 0 !important;
+        }
+    }
+
+    .ant-space-item .calendar-intro__title {
+        margin-bottom: 0 !important;
+    }
+
+    .calendar-intro__content {
+        gap: 6px !important;
     }
 
     .calendar-section {
-        height: unset !important;
+        height: calc(100vh - 48px) !important;
     }
 
     .ant-picker-calendar {
-        margin: 0 10px !important;
+        margin: 0 10px 10px !important;
     }
 
     .ant-picker-calendar-date {
@@ -33,9 +58,9 @@
         }
     }
 
-    .ant-picker-panel {
-        height: calc(100vh - 232px);
-    }
+    // .ant-picker-panel {
+    //     height: calc(100vh - 232px);
+    // }
 
     .ant-alert {
         margin: 10px 10px !important;
@@ -47,12 +72,12 @@
     }
 
     .ant-float-btn-group.ant-float-btn-group-circle {
-        bottom: 63px !important;
+        bottom: 16px !important;
         left: 4px !important;
     }
 
     .fancy-theme-transition {
-        bottom: 63px !important;
+        bottom: 16px !important;
         left: 15px !important;
     }
 
diff --git a/src/components/CSCalendar.jsx b/src/components/CSCalendar.jsx
@@ -20,6 +20,7 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
     const today = dayjs();
 
     const [value, setValue] = useState(today);
+    const [width, setWidth] = useState(window.innerWidth);
     const [popupData, setPopupData] = useState({
         visible: false,
         event: null,
@@ -55,6 +56,18 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
         setValue(value.month(month).year(year));
     };
 
+    useEffect(() => {
+        const handleResize = () => {
+            setWidth(window.innerWidth);
+        };
+
+        window.addEventListener("resize", handleResize);
+
+        return () => {
+            window.removeEventListener("resize", handleResize);
+        };
+    }, []);
+
     const dateCellRender = (date) => {
         const event = getEventForDate(date);
 
@@ -92,16 +105,6 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
             setPopupData({ visible: true, event, date, rect });
         };
 
-        const stageLabel =
-            (event &&
-                (event.title ||
-                    (event.title &&
-                        (event.title.match(/مرحله\s*[^\s]+/)?.[0] ||
-                            event.title.replace(/^جلسه\s*/u, ""))) ||
-                    (event.fullName &&
-                        event.fullName.replace(/^جلسه\s*/u, "")))) ||
-            "جلسه";
-
         const greg = date.format("YYYY-MM-DD");
         const persianDate = moment(date.toDate())
             .locale("fa")
@@ -136,7 +139,10 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
                             color={event.color || "#888"}
                             className="stage-tag"
                         >
-                            {stageLabel}
+                            <span className="main-word">
+                                {width < 950 ? event.shortTitle : event.title}
+                            </span>{" "}
+                            <span className="meeting-word">جلسه </span>
                         </Tag>
                     )}
                 </div>
diff --git a/src/components/CalendarIntro.jsx b/src/components/CalendarIntro.jsx
@@ -3,7 +3,7 @@ import { Card, Typography, Space } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 
 const CalendarIntro = () => {
-    const { Paragraph, Link, Title, Text } = Typography;
+    const { Paragraph, Link, Title } = Typography;
 
     return (
         <Card bordered={false} className="calendar-intro" dir="rtl">
@@ -14,7 +14,7 @@ const CalendarIntro = () => {
 
                 <Space
                     direction="vertical"
-                    size={8}
+                    // size={8}
                     className="calendar-intro__content"
                 >
                     <Title level={4} className="calendar-intro__title">
@@ -23,12 +23,13 @@ const CalendarIntro = () => {
 
                     <Paragraph className="calendar-intro__paragraph">
                         این تقویم، مرجع رسمی زمان‌بندی جلسات پرسش‌وپاسخ مراحل
-                        ورود به برنامه CS Internship است و نمای کلی ساختار
-                        برگزاری جلسات گروه صف را در طول هفته نمایش می‌دهد.
+                        ورود به برنامه CS Internship است و به شما کمک می‌کند
+                        تاریخ جلسهٔ مربوط به مرحله‌ای که در آن قرار دارید را
+                        پیدا کنید.
                     </Paragraph>
 
                     <Paragraph className="calendar-intro__paragraph">
-                        برای آشنایی با فرایند ورود، می‌توانید{" "}
+                        برای آشنایی با فرایند ورود به برنامه، می‌توانید{" "}
                         <Link
                             href="https://t.me/c/1191433472/3799"
                             target="_blank"
@@ -39,23 +40,12 @@ const CalendarIntro = () => {
                         را مطالعه کنید.
                     </Paragraph>
 
-                    <Paragraph className="calendar-intro__paragraph">
-                        در این تقویم، برای هر جلسه موارد زیر مشخص شده است:
-                    </Paragraph>
-
-                    <ul className="calendar-intro__list">
-                        <li>نوع جلسه (مرحلهٔ اول، دوم، سوم یا جلسهٔ مصاحبه)</li>
-                        <li>تاریخ شمسی و میلادی و بازهٔ زمانی برگزاری</li>
-                        <li>
-                            لینک حضور در جلسه و منبع مطالعاتی مرتبط (در صورت
-                            وجود)
-                        </li>
-                    </ul>
-
-                    <Text type="secondary" className="calendar-intro__hint">
-                        با انتخاب هر رویداد در تقویم، جزئیات کامل همان جلسه
+                    <Paragraph className="calendar-intro__paragraph calendar-intro__single-line">
+                        در این تقویم، نوع جلسه، تاریخ شمسی و میلادی، ساعت
+                        برگزاری جلسات، لینک حضور و منبع مطالعاتی (در صورت وجود)
+                        مشخص شده است. با انتخاب هر رویداد، جزئیات کامل همان جلسه
                         نمایش داده می‌شود.
-                    </Text>
+                    </Paragraph>
                 </Space>
             </Space>
         </Card>
diff --git a/src/constants/events.js b/src/constants/events.js
@@ -1,28 +1,32 @@
 export const events = [
     {
-        title: "جلسه مرحله سوم",
+        title: "مرحله سوم",
+        shortTitle: "مرحله سوم",
         color: "#4AA37C", // 63C29A
         fullName: "پرسش‌وپاسخ داکیومنت فرآیند‌های برنامه CS Internship",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748521847152?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",
         resource:
             "https://github.com/cs-internship/cs-internship-spec/blob/master/processes/documents/CS%20Internship%20Prerequisites%20and%20Main%20Processes%20--fa.md",
     },
     {
-        title: "جلسه مرحله دوم",
+        title: "مرحله دوم",
+        shortTitle: "مرحله دوم",
         color: "#6C7BEA", // 8D97FF
         fullName: "پرسش‌وپاسخ فیلم معرفی برنامه‌ CS Internship",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748521728714?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",
         resource:
             "https://drive.google.com/file/d/1HmBSP01EdYrL841hELM0hVfX2E3hprzx/view?usp=sharing",
     },
     {
-        title: "جلسه مصاحبه",
+        title: "مصاحبه",
+        shortTitle: "جلسه مصاحبه",
         color: "#E5A93B", // F1C15A
         fullName: "جلسه مصاحبه ورود به برنامه",
         link: "",
     },
     {
-        title: "جلسه مرحله اول",
+        title: "مرحله اول",
+        shortTitle: "مرحله اول",
         color: "#E46C86", // FF88A3
         fullName: "پرسش‌وپاسخ داکیومنت CS Internship Overview",
         link: "https://teams.microsoft.com/l/meetup-join/19%3A92b6afa889824abe96a1cfa45204209a%40thread.tacv2/1748716646151?context=%7B%22Tid%22%3A%2224fbf492-43a9-4a8f-ba7b-6f12fa9b8d87%22%2C%22Oid%22%3A%223e1989b9-3427-4202-986e-e2a62f053845%22%7D",

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@`
`37`	`37`	`}`
`38`	`38`
`39`	`39`	`.calendar-intro__content {`
`40`		`- gap: 4px;`
	`40`	`+ gap: 8px;`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`.calendar-intro__list {`