-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Roadmap Search Redesign (Part 1) (#514)
* Make mobile "add course" menu nicer * Fix visual issues * Empty Query = Show Course Bag * minor tweaks * Recreate basic drag functions * Merge changes * Fix linting error? * Update SearchSidebar.scss * Tap to add on mobile * Change the add course modal to show course info - (preliminary) * Tweak course card styles * Make lone row still follow grid structure * slightly increase button size * Remove dead code * comments * cursor when dragging * Improve placeholders
- Loading branch information
Showing
34 changed files
with
727 additions
and
1,242 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
site/src/component/SearchHitContainer/SearchHitContainer.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| const UIOverlay = ({ | ||
| zIndex, | ||
| ...props | ||
| }: { zIndex: number; passedRef?: React.RefObject<HTMLDivElement> } & JSX.IntrinsicElements['div']) => { | ||
| const passedRef = props.passedRef; | ||
| delete props.passedRef; | ||
| // Clicking this is only an alternative action to something that is already accessible | ||
| return <div className="ui-overlay" {...props} ref={passedRef} style={{ zIndex }}></div>; | ||
| }; | ||
|
|
||
| export default UIOverlay; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ReactSortableProps, SortableOptions } from 'react-sortablejs'; | ||
| import { CourseGQLData } from '../types/types'; | ||
|
|
||
| const baseSortable: SortableOptions = { | ||
| animation: 150, | ||
| forceFallback: true, | ||
| fallbackOnBody: true, | ||
| filter: '.btn', | ||
| }; | ||
|
|
||
| export const quarterSortable: SortableOptions & Partial<ReactSortableProps<CourseGQLData>> = { | ||
| ...baseSortable, | ||
| setList: () => {}, | ||
| group: { name: 'courses' }, | ||
| }; | ||
|
|
||
| export const courseSearchSortable: SortableOptions & Partial<ReactSortableProps<CourseGQLData>> = { | ||
| ...baseSortable, | ||
| setList: () => {}, | ||
| sort: false, | ||
| revertOnSpill: true, | ||
| group: { name: 'courses', pull: 'clone', put: false }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { quarterDisplayNames } from '../helpers/planner'; | ||
| import { useAppSelector } from '../store/hooks'; | ||
|
|
||
| export const useNamedAcademicTerm = () => { | ||
| const planner = useAppSelector((state) => state.roadmap.plans[state.roadmap.currentPlanIndex].content.yearPlans); | ||
| const { year, quarter } = useAppSelector((state) => state.roadmap.currentYearAndQuarter) || {}; | ||
|
|
||
| if (year == null || quarter == null) return { year: null, quarter: null }; | ||
|
|
||
| const quarterName = quarterDisplayNames[planner[year].quarters[quarter].name]; | ||
| const yearName = planner[year].startYear + Number(quarterName === quarterDisplayNames.Fall); | ||
| return { year: yearName, quarter: quarterName }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,71 @@ | ||
| @use '../../globals.scss'; | ||
|
|
||
| .add-course-modal { | ||
| @include globals.bottom-overlay(500); | ||
| background-color: var(--overlay1); | ||
|
|
||
| &:is(.enter, .enter-done) + .ui-overlay { | ||
| opacity: 1; | ||
| pointer-events: all; | ||
| } | ||
|
|
||
| button.fixed { | ||
| @include globals.bottom-button(); | ||
| } | ||
|
|
||
| .modal-dialog { | ||
| position: fixed; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: auto; | ||
| margin: 0; | ||
| max-width: 100%; | ||
| .modal-content { | ||
| border-radius: 8px 8px 0 0; | ||
| } | ||
| } | ||
|
|
||
| .modal-header { | ||
| gap: 8px; | ||
| .spacer { | ||
| margin-left: auto; | ||
| } | ||
| } | ||
|
|
||
| h2, | ||
| .unit-count { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| button:not(.fixed), | ||
| button.close { | ||
| background: none; | ||
| font: inherit; | ||
| border: none; | ||
| width: 20px; | ||
| height: 20px; | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 0; | ||
|
|
||
| @include globals.clickable(0.8, 0.5); | ||
| } | ||
|
|
||
| button.close-button { | ||
| width: 32px; | ||
| } | ||
|
|
||
| .quarter-offerings-section { | ||
| display: flex; | ||
| gap: 6px; | ||
| color: var(--text-secondary); | ||
| .quarter-indicator-container { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .add-course-form { | ||
| border-radius: var(--border-radius); | ||
| padding: 2rem; | ||
| } |
Oops, something went wrong.