Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Put the selection box and Your Courses side by side and restyle them

Đang mở
  • Có gì không ổn?
#290 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@Aiden-Trindade đang làm issue này rồi.

Từ ngày 28/10/2026.

  • #314 của @Aiden-Trindade — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
figma, react, tailwindcss, typescript
Lĩnh vực
design, frontend

Hướng nghiên cứu

Start in landing.tsx and inspect how FacultySelector, CourseCard, and TimetableProvider are arranged; compare the relevant components with the linked Figma frame. Restyle and reposition the desktop selection and course panels, keeping their shared state available as described. Done means the layout and listed controls match the requested design at narrow and wide desktop sizes, with behavior unchanged; mobile and dropdown restyling are out of scope.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Follow the figma design, scroll down to see an image and find its link

Is your feature request related to a problem? Please describe.

Your Courses is a separate full-width block below the selection box (landing.tsx), so a student scrolls between adding a course and checking the list. The faculty panels, the Reset and Confirm buttons and the course rows also don't match the new box style.

Describe the solution you'd like
  • The selection box and Your Courses sit next to each other.
  • When the screen is too narrow for both at the design's sizes, they stack with the selection box on top. The exact width is up to you.
  • Your Courses gets the same box style as the selection box.
  • Restyle the Select Faculties and Faculty Priority panels, the Reset and Confirm buttons, and the course rows.
  • All Subjects Mode and its info button move to the top right of Your Courses, next to the title.
  • Remove all moves next to Generate at the bottom.
  • The red course priority hint is removed. The info button's popup also says that course order sets priority.
  • The eye button stays until #291 replaces it with a pencil.
  • Behaviour doesn't change in this issue. The dropdowns are restyled in #287.
Additional context

FacultySelector.tsx is also changed by #285, #287 and #266, so expect merge conflicts.

In landing.tsx, CourseCard is inside TimetableProvider and FacultySelector is not. The edit in #291 needs both to share state, so wrap both in the provider (or keep the shared state in landing.tsx) when moving them.

Mobile uses landing-mobile.tsx and isn't affected.

Design
Image
Example

One way to build it (just an idea):

  • Put FacultySelector and CourseCard in one flex row in landing.tsx
  • Move the BasicToggleButton and the info ZButton into the Your Courses header
<TimetableProvider>
  <div className="flex gap-6 items-start">
    <FacultySelector onConfirm={facultySelectorOnConfirm} />
    <CourseCard selectedCourses={selectedCourses} ... />
  </div>
  <ViewTimeTable />
</TimetableProvider>
Ngôn ngữ chính
TypeScript
Star
6
Fork
37
Merge trung bình
11 giờ 13 phút
Pull request đã merge (30 ngày)
55

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của CodeChefVIT/ffcs

Tất cả issue của CodeChefVIT/ffcs

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.