Skip to content

Add TabBar and CardContainer#387

Open
DanielChee wants to merge 27 commits intomainfrom
daniel/building-foundation-for-enhanced-course-view-page
Open

Add TabBar and CardContainer#387
DanielChee wants to merge 27 commits intomainfrom
daniel/building-foundation-for-enhanced-course-view-page

Conversation

@DanielChee
Copy link
Contributor

Summary

Resolves #380

Adds a TabBar, CardContainer, and sandbox accessible by /sandbox/courseinfo

How to Test

start website and add /sandbox/CourseInfo to the URL

@DanielChee DanielChee requested a review from uma-anand November 1, 2025 22:38
@github-actions
Copy link

github-actions bot commented Nov 1, 2025

PR Preview Action v1.6.2

🚀 View preview at
https://gt-scheduler.github.io/website/pr-preview/pr-387/

Built to branch gh-pages at 2025-11-11 03:03 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Copy link
Member

@uma-anand uma-anand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code quality is good. Just check of the amounts for some of the paddings etc.

justify-content: flex-start;
align-items: stretch;
background-color: $content-card-background;
border-left: 6px solid $content-card-background;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

8px in Figma

display: flex;
align-items: center;
background-color: $tab-bar-background;
border-radius: 8px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

10px in Figma

}
}

// 👇 when enableSelect is false, make all tab text white
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NO EMOJIS

align-items: center;
background-color: $tab-bar-background;
border-radius: 8px;
padding: 4px 8px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like a lot of this isn't the actual properties in the Figma, can you double check with the designs and resubmit? Thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

your welcome

emilyliublair and others added 4 commits November 3, 2025 21:29
### Summary

Resolves #377 

### How to Test
1. Courses already added change color to selected color palette
2. Default palette displayed for new schedule versions
3. getRandomColor works
4. compare schedule uses user's currently selected palette

---------

Co-authored-by: DanielChee <128537022+DanielChee@users.noreply.github.com>
Co-authored-by: Uma Anand <63426041+uma-anand@users.noreply.github.com>
Co-authored-by: Uma Anand <uma2005anand@gmail.com>
Co-authored-by: Alexa Fazio <45372449+afazio1@users.noreply.github.com>
Co-authored-by: afazio1 <alexa.fazio04@gmail.com>
Implemented a hook that adds a comma separated list (non case sensitive)
to the desired courses tab on the side.

Testing: Created a button to run the hook with some test courses (not
committed of course, so attaching screenshots).
![WhatsApp Image 2025-11-02 at 01 16
23_4c259637](https://github.com/user-attachments/assets/9e24711d-484d-41ce-baae-f91020e9e549)
![WhatsApp Image 2025-11-02 at 01 16
46_7de4b689](https://github.com/user-attachments/assets/36c24d52-ddcf-460b-93f1-1bb0e69dfe1e)
![WhatsApp Image 2025-11-02 at 01 17
11_d505a76d](https://github.com/user-attachments/assets/8ed2f53f-e64c-4696-9b05-cf0de643787d)
@DanielChee DanielChee requested a review from uma-anand November 4, 2025 03:59
DanielChee and others added 17 commits November 4, 2025 10:30
### Summary

Resolves #353 

<!-- What does this PR change and why? Discuss any breaking changes. -->

caches seating info and removes tooltip from existing design.
conditionally renders seat and waitlist info based on color of
background.

### How to Test

flame my code
but my functionality is flawless
bog

---------

Co-authored-by: Uma Anand <63426041+uma-anand@users.noreply.github.com>
Co-authored-by: Uma Anand <uma2005anand@gmail.com>
### Summary

- wrong font color
- incorrect padding




### How to Test
Deploy preview

---------

Co-authored-by: Uma Anand <uma2005anand@gmail.com>
### Summary

Resolves #354

This is a long commit. Everything described in the issue has been
implemented except for the map auto focusing on click.

A few notes: 
1. The design and the frontend for locations not specified are not
exactly 1-1 (had already worked on this before getting access to the
design - can change though).
2. Minor differences in design for the location picker component.
3. There is a 300 line variable which has all GT locations which the
location search can prioritize. I could not pull everything from the
crawler because some non-class location don't exist on it (e.g. Bobby
Dodd). It works really good though. (have to merge this constant with
the course locations constant linked in the issue).
4. To implement the location picker, our mapbox usage will double. The
first API call manages the search (/suggest) , and now the second API
call will extract the lat and long of the specific location the user
adds (/retrieve).

Screenshots
<img width="1685" height="983" alt="image"
src="https://github.com/user-attachments/assets/586a4e91-01c6-4ed7-b474-5edea232b330"
/>
<img width="1687" height="983" alt="image"
src="https://github.com/user-attachments/assets/1149ad0d-84e7-4fcb-8a0f-02ed33d301b9"
/>
<img width="1691" height="981" alt="image"
src="https://github.com/user-attachments/assets/0aa4feb6-2759-42cf-8f76-df910f4564f6"
/>
NYC trip appears only on zooming out manually.

---------

Co-authored-by: Uma Anand <uma2005anand@gmail.com>
### Summary

Resolves #364

<!-- What does this PR change and why? Discuss any breaking changes. -->
Adds min travel time option to schedule combination dropdown.

- Used MapBox API to generate distance array.
- `GT_LOCATIONS` array has some duplicate/different names for locations.
- Uses Oliver's PR's code for consistency.

### Checklist

- [x] Copy over the latitudes longitudes used in Ritwic's ticket to
`src/mapConstants`
- [x] Use the [MapBox Matrix
API](https://docs.mapbox.com/api/navigation/matrix/) once to get a
matrix of distances between all the possible class locations, store this
in the `src/mapConsts` file
- [x] Create a new sorting option in
[`src/data/beans/Oscar`](https://github.com/gt-scheduler/website/blob/594219a8b0985d9d79071558ab737e0161cbf1cd/src/data/beans/Oscar.ts#L177)
to sort by the sum of time taken to go from each location to the next
location on a particular day. This should automatically add it to the
combination container without you having to specify it.


### How to Test
<!-- Describe how to test your code. -->
Tested by starting a development instance with `npm start` and using the
option to create schedules. This assumes the MapBox distances are 100%
accurate.
## Summary

Resolves #368 

This PR fixes a long-standing UX issue where the mobile navigation
drawer remained open after selecting a tab. The expected behavior is
that tapping a navigation item both (a) switches the active tab and (b)
closes the drawer to reveal content. After this change, the drawer now
closes immediately on selection.

Despite early guidance that this would be a “one-line fix,” the actual
implementation required a modest four-line update to correctly wire the
close action alongside the tab change. The end result is simple and
predictable behavior with minimal code churn.



## Background
**Previous behavior:**  
- On mobile, opening the drawer and tapping a tab changed the active tab
but left the drawer visible.
- Users had to manually dismiss the drawer to view content, adding an
extra step.

**Desired behavior:**  
- Selecting a tab should immediately close the drawer so the newly
selected view is visible.



## Implementation
- Added the drawer close action to the same click path that handles tab
changes.
- Kept the change localized to the navigation event handler used by the
mobile drawer flow.
- No layout, styling, or rendering changes were required.
- Total changes: **~4 lines** (handler composition + minor wiring).

*(Yes, the “1-line fix” characterization turned out to be optimistic.)*



## Behavior Changes
- **Mobile:** Selecting any navigation item now closes the drawer
immediately after switching the tab.
- **Desktop:** Unchanged. The drawer is not used; tab switching works as
before.
- **No regressions** to keyboard navigation or pointer interactions were
observed.



## Rationale
- Reduces friction: one tap performs the full navigation action.
- Aligns with common mobile drawer patterns.
- Keeps logic in one place, which is easier to maintain and reason
about.



## QA / Verification Steps
1. On a mobile-sized viewport, open the drawer.
2. Tap each tab in turn:
   - The active tab updates.
   - The drawer closes immediately.
3. Reopen the drawer and select the currently active tab:
   - No errors; drawer still closes.
4. Switch to a desktop-sized viewport:
   - Drawer controls are hidden.
   - Tab switching continues to work normally.
### Summary

Resolves #366 

extend the scheduler’s active hours from 8 AM–10 PM to 6 AM–11:59 PM.
OPEN and CLOSE constants in src/constants.ts were updated to 60*6 and
60*24 - 1, and the calendar height was increased from 920px to 1180px to
fit the new timeframe and make sure event blocks remained the same
height.

Additionally fixed bug where a ghost event drag (transparent block)
would remain on the screen after a quick drag-and-release. The drag
logic now cancels pending animation frames so the draft always
disappears immediately.


### How to Test

NEW: add a 50 minute class and make sure prof name doesn't overflow
(ensure event block height isnt smushed)
adding recurring events (manually or dragging to create)
dragging to move recurring events
mobile
schedule export
.ics export
### Summary

Resolves #356 
- Modified the Oscar beans class to retrieve planned counts and store
it. I had to modify the constructor setup for this, because we want the
planned counts to be fetched before creating the Course beans.
- Modified Course and Section beans classes to contain field
`plannedCount` that stores the planned count for that course or section

### Checklist

- [x] Add a method(s) in the beans/ classes to retrieve the the
aggregate count information.
- [x] Update Course and Section types to contain this metric.


### How to Test
Deployed new cloud function to dev db and ran website locally. I used
console.log() to print the counts assigned to each section/course and
made sure it matched the count calculated by the function.

---------

Co-authored-by: Alexa Fazio <45372449+afazio1@users.noreply.github.com>
Implemented the discard button as per the issue.
<img width="1658" height="1202" alt="image"
src="https://github.com/user-attachments/assets/ca15c402-4484-4dfe-880f-4cb7101c8397"
/>

---------

Co-authored-by: Alexa Fazio <45372449+afazio1@users.noreply.github.com>
Resolves #377

1. Courses already added change color to selected color palette
2. Default palette displayed for new schedule versions
3. getRandomColor works
4. compare schedule uses user's currently selected palette

---------

Co-authored-by: DanielChee <128537022+DanielChee@users.noreply.github.com>
Co-authored-by: Uma Anand <63426041+uma-anand@users.noreply.github.com>
Co-authored-by: Uma Anand <uma2005anand@gmail.com>
Co-authored-by: Alexa Fazio <45372449+afazio1@users.noreply.github.com>
Co-authored-by: afazio1 <alexa.fazio04@gmail.com>
Implemented a hook that adds a comma separated list (non case sensitive)
to the desired courses tab on the side.

Testing: Created a button to run the hook with some test courses (not
committed of course, so attaching screenshots).
![WhatsApp Image 2025-11-02 at 01 16
23_4c259637](https://github.com/user-attachments/assets/9e24711d-484d-41ce-baae-f91020e9e549)
![WhatsApp Image 2025-11-02 at 01 16
46_7de4b689](https://github.com/user-attachments/assets/36c24d52-ddcf-460b-93f1-1bb0e69dfe1e)
![WhatsApp Image 2025-11-02 at 01 17
11_d505a76d](https://github.com/user-attachments/assets/8ed2f53f-e64c-4696-9b05-cf0de643787d)
### Summary

This PR changes the phrase "delivery mode" to be "class format" as
requested by exec in the GT-Scheduler Changes for this semester. It
hasn't been done yet and didn't need a ticket to be completed since it
literally changes two words.

Co-authored-by: Spencer Banko <spencer@lockchain.io>
Copy link
Member

@uma-anand uma-anand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes! Just have a couple of nits re smaller screen sizes for the TabBar

@@ -0,0 +1,40 @@
@import '../../variables';

.TabBar {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On mobile the overflow is weird. You can take a look at the action row and make sure that this is more adaptive. Re overflow, maybe you can just hide it for now and leave a comment.

padding: 2px;

.tab {
width: 100px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make this max width, can you check mobile and make sure it allows at least 3 tabs for mobile

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why max width? figma shows fixed width of 100

align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-size: 14px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't use px for font size in this codebase, instead we use em

@uma-anand
Copy link
Member

Mobile designs are available on the Figma for your perusal

@DanielChee DanielChee requested a review from uma-anand November 10, 2025 04:23
uma-anand
uma-anand previously approved these changes Nov 10, 2025
Copy link
Member

@uma-anand uma-anand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scroll is really cool! I don't want to request more changes on this so I'll take care of removing the sandbox and maybe making the fade a hook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Course Details Page: All Eyes on Classes

8 participants