Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#290 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@Aiden-Trindade がすでに取り組んでいます。

2026年10月28日 から。

  • #314 @Aiden-Trindade による — オープン

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
55/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
figma, react, tailwindcss, typescript
領域
design, frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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>
主要言語
TypeScript
スター
6
フォーク
37
平均マージ
11時間 13分
マージ済み PR（30日）
55

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

CodeChefVIT/ffcs のほかの issue

CodeChefVIT/ffcs の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。