Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#290 0 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@Aiden-Trindade arbeitet bereits daran.

Seit 28.10.2026.

  • #314 von @Aiden-Trindade — offen

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
figma, react, tailwindcss, typescript
Bereich
design, frontend

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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>
Vorherrschende Sprache
TypeScript
Sterne
6
Forks
37
Ø Merge
11 Std. 13 Min.
Gemergte PRs (30 T.)
55

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus CodeChefVIT/ffcs

Alle Issues in CodeChefVIT/ffcs

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.