Skip to content

Commit 24e14c8

Browse files
committed
refactor(events): update event titles for consistency and add short titles
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
1 parent fdfef2e commit 24e14c8

7 files changed

Lines changed: 90 additions & 58 deletions

File tree

src/__tests__/constants/events.test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ describe("events constants", () => {
2121
});
2222

2323
it("should have correct event titles", () => {
24-
expect(events[0].title).toBe("جلسه مرحله سوم");
25-
expect(events[1].title).toBe("جلسه مرحله دوم");
26-
expect(events[2].title).toBe("جلسه مصاحبه");
27-
expect(events[3].title).toBe("جلسه مرحله اول");
24+
expect(events[0].title).toBe("مرحله سوم");
25+
expect(events[1].title).toBe("مرحله دوم");
26+
expect(events[2].title).toBe("مصاحبه");
27+
expect(events[3].title).toBe("مرحله اول");
2828
});
2929

3030
it("each event should have non-empty title and fullName", () => {
@@ -43,9 +43,9 @@ describe("events constants", () => {
4343
});
4444

4545
it("should be ordered correctly", () => {
46-
expect(events[0].title).toBe("جلسه مرحله سوم");
47-
expect(events[1].title).toBe("جلسه مرحله دوم");
48-
expect(events[2].title).toBe("جلسه مصاحبه");
49-
expect(events[3].title).toBe("جلسه مرحله اول");
46+
expect(events[0].title).toBe("مرحله سوم");
47+
expect(events[1].title).toBe("مرحله دوم");
48+
expect(events[2].title).toBe("مصاحبه");
49+
expect(events[3].title).toBe("مرحله اول");
5050
});
5151
});

src/assets/scss/components/_calendar-intro.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838

3939
.calendar-intro__content {
40-
gap: 4px;
40+
gap: 8px;
4141
}
4242

4343
.calendar-intro__list {

src/assets/scss/components/_cs-calendar.scss

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.calendar-section {
2-
min-height: calc(100vh - 128px);
2+
height: calc(100vh - 56px);
33
gap: 12px;
44
}
55

@@ -96,20 +96,27 @@ thead {
9696
}
9797

9898
.stage-tag {
99-
// font-weight: 700;
100-
padding: 0 8px;
99+
padding: 3px 8px;
101100
border-radius: 6px;
102101
font-size: 12px;
103-
height: 28px;
102+
// height: 28px;
104103
display: flex;
105104
align-items: center;
106105
justify-content: center;
106+
gap: 3px;
107107
position: absolute;
108108
top: 28px;
109109
width: 100%;
110110
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
111111
color: #fff;
112112
letter-spacing: 0.3px;
113+
114+
.main-word {
115+
display: flex;
116+
justify-content: center;
117+
align-items: center;
118+
text-align: center !important;
119+
}
113120
}
114121

115122
.date-label {

src/assets/scss/components/_media.scss

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
1+
@media (max-width: 950px) {
2+
.meeting-word {
3+
display: none !important;
4+
}
5+
6+
.main-word {
7+
white-space: pre-wrap !important;
8+
}
9+
}
10+
111
@media (max-width: 768px) {
212
body {
3-
overflow-y: auto !important;
4-
min-width: 400px !important;
13+
min-width: 320px !important;
14+
}
15+
16+
.ant-card.calendar-intro {
17+
padding: 14px 10px 4px 20px !important;
18+
19+
.ant-card-body {
20+
padding: 0 !important;
21+
}
22+
}
23+
24+
.ant-space-item .calendar-intro__title {
25+
margin-bottom: 0 !important;
26+
}
27+
28+
.calendar-intro__content {
29+
gap: 6px !important;
530
}
631

732
.calendar-section {
8-
height: unset !important;
33+
height: calc(100vh - 48px) !important;
934
}
1035

1136
.ant-picker-calendar {
12-
margin: 0 10px !important;
37+
margin: 0 10px 10px !important;
1338
}
1439

1540
.ant-picker-calendar-date {
@@ -33,9 +58,9 @@
3358
}
3459
}
3560

36-
.ant-picker-panel {
37-
height: calc(100vh - 232px);
38-
}
61+
// .ant-picker-panel {
62+
// height: calc(100vh - 232px);
63+
// }
3964

4065
.ant-alert {
4166
margin: 10px 10px !important;
@@ -47,12 +72,12 @@
4772
}
4873

4974
.ant-float-btn-group.ant-float-btn-group-circle {
50-
bottom: 63px !important;
75+
bottom: 16px !important;
5176
left: 4px !important;
5277
}
5378

5479
.fancy-theme-transition {
55-
bottom: 63px !important;
80+
bottom: 16px !important;
5681
left: 15px !important;
5782
}
5883

src/components/CSCalendar.jsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
2020
const today = dayjs();
2121

2222
const [value, setValue] = useState(today);
23+
const [width, setWidth] = useState(window.innerWidth);
2324
const [popupData, setPopupData] = useState({
2425
visible: false,
2526
event: null,
@@ -55,6 +56,18 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
5556
setValue(value.month(month).year(year));
5657
};
5758

59+
useEffect(() => {
60+
const handleResize = () => {
61+
setWidth(window.innerWidth);
62+
};
63+
64+
window.addEventListener("resize", handleResize);
65+
66+
return () => {
67+
window.removeEventListener("resize", handleResize);
68+
};
69+
}, []);
70+
5871
const dateCellRender = (date) => {
5972
const event = getEventForDate(date);
6073

@@ -92,16 +105,6 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
92105
setPopupData({ visible: true, event, date, rect });
93106
};
94107

95-
const stageLabel =
96-
(event &&
97-
(event.title ||
98-
(event.title &&
99-
(event.title.match(/مرحله\s*[^\s]+/)?.[0] ||
100-
event.title.replace(/^جلسه\s*/u, ""))) ||
101-
(event.fullName &&
102-
event.fullName.replace(/^جلسه\s*/u, "")))) ||
103-
"جلسه";
104-
105108
const greg = date.format("YYYY-MM-DD");
106109
const persianDate = moment(date.toDate())
107110
.locale("fa")
@@ -136,7 +139,10 @@ const CSCalendar = ({ setAnnouncementData, addToCurrentWeek }) => {
136139
color={event.color || "#888"}
137140
className="stage-tag"
138141
>
139-
{stageLabel}
142+
<span className="main-word">
143+
{width < 950 ? event.shortTitle : event.title}
144+
</span>{" "}
145+
<span className="meeting-word">جلسه </span>
140146
</Tag>
141147
)}
142148
</div>

src/components/CalendarIntro.jsx

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Card, Typography, Space } from "antd";
33
import { InfoCircleOutlined } from "@ant-design/icons";
44

55
const CalendarIntro = () => {
6-
const { Paragraph, Link, Title, Text } = Typography;
6+
const { Paragraph, Link, Title } = Typography;
77

88
return (
99
<Card bordered={false} className="calendar-intro" dir="rtl">
@@ -14,7 +14,7 @@ const CalendarIntro = () => {
1414

1515
<Space
1616
direction="vertical"
17-
size={8}
17+
// size={8}
1818
className="calendar-intro__content"
1919
>
2020
<Title level={4} className="calendar-intro__title">
@@ -23,12 +23,13 @@ const CalendarIntro = () => {
2323

2424
<Paragraph className="calendar-intro__paragraph">
2525
این تقویم، مرجع رسمی زمان‌بندی جلسات پرسش‌وپاسخ مراحل
26-
ورود به برنامه CS Internship است و نمای کلی ساختار
27-
برگزاری جلسات گروه صف را در طول هفته نمایش می‌دهد.
26+
ورود به برنامه CS Internship است و به شما کمک می‌کند
27+
تاریخ جلسهٔ مربوط به مرحله‌ای که در آن قرار دارید را
28+
پیدا کنید.
2829
</Paragraph>
2930

3031
<Paragraph className="calendar-intro__paragraph">
31-
برای آشنایی با فرایند ورود، می‌توانید{" "}
32+
برای آشنایی با فرایند ورود به برنامه، می‌توانید{" "}
3233
<Link
3334
href="https://t.me/c/1191433472/3799"
3435
target="_blank"
@@ -39,23 +40,12 @@ const CalendarIntro = () => {
3940
را مطالعه کنید.
4041
</Paragraph>
4142

42-
<Paragraph className="calendar-intro__paragraph">
43-
در این تقویم، برای هر جلسه موارد زیر مشخص شده است:
44-
</Paragraph>
45-
46-
<ul className="calendar-intro__list">
47-
<li>نوع جلسه (مرحلهٔ اول، دوم، سوم یا جلسهٔ مصاحبه)</li>
48-
<li>تاریخ شمسی و میلادی و بازهٔ زمانی برگزاری</li>
49-
<li>
50-
لینک حضور در جلسه و منبع مطالعاتی مرتبط (در صورت
51-
وجود)
52-
</li>
53-
</ul>
54-
55-
<Text type="secondary" className="calendar-intro__hint">
56-
با انتخاب هر رویداد در تقویم، جزئیات کامل همان جلسه
43+
<Paragraph className="calendar-intro__paragraph calendar-intro__single-line">
44+
در این تقویم، نوع جلسه، تاریخ شمسی و میلادی، ساعت
45+
برگزاری جلسات، لینک حضور و منبع مطالعاتی (در صورت وجود)
46+
مشخص شده است. با انتخاب هر رویداد، جزئیات کامل همان جلسه
5747
نمایش داده می‌شود.
58-
</Text>
48+
</Paragraph>
5949
</Space>
6050
</Space>
6151
</Card>

src/constants/events.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
export const events = [
22
{
3-
title: "جلسه مرحله سوم",
3+
title: "مرحله سوم",
4+
shortTitle: "مرحله سوم",
45
color: "#4AA37C", // 63C29A
56
fullName: "پرسش‌وپاسخ داکیومنت فرآیند‌های برنامه CS Internship",
67
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",
78
resource:
89
"https://github.com/cs-internship/cs-internship-spec/blob/master/processes/documents/CS%20Internship%20Prerequisites%20and%20Main%20Processes%20--fa.md",
910
},
1011
{
11-
title: "جلسه مرحله دوم",
12+
title: "مرحله دوم",
13+
shortTitle: "مرحله دوم",
1214
color: "#6C7BEA", // 8D97FF
1315
fullName: "پرسش‌وپاسخ فیلم معرفی برنامه‌ CS Internship",
1416
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",
1517
resource:
1618
"https://drive.google.com/file/d/1HmBSP01EdYrL841hELM0hVfX2E3hprzx/view?usp=sharing",
1719
},
1820
{
19-
title: "جلسه مصاحبه",
21+
title: "مصاحبه",
22+
shortTitle: "جلسه مصاحبه",
2023
color: "#E5A93B", // F1C15A
2124
fullName: "جلسه مصاحبه ورود به برنامه",
2225
link: "",
2326
},
2427
{
25-
title: "جلسه مرحله اول",
28+
title: "مرحله اول",
29+
shortTitle: "مرحله اول",
2630
color: "#E46C86", // FF88A3
2731
fullName: "پرسش‌وپاسخ داکیومنت CS Internship Overview",
2832
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",

0 commit comments

Comments
 (0)