Make search results scrollable and search bar sticky

pennlabs · Mar 8, 2024 · cc466be · cc466be
1 parent 13116bb
commit cc466be
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 78 deletions.
diff --git a/frontend/degree-plan/components/Dock/Dock.tsx b/frontend/degree-plan/components/Dock/Dock.tsx
@@ -88,7 +88,7 @@ interface DockProps {
     user: User | null;
 }
 const Dock = ({ user, login, logout  }: DockProps) => {
-    const { setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext(SearchPanelContext)
+    const { searchPanelOpen, setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext(SearchPanelContext)
     const [dockedCourses, setDockedCourses] = React.useState<string[]>([]);
     const { createOrUpdate,remove } = useSWRCrud<IDockedCourse>(`/api/degree/docked`, {idKey: 'full_code'});
     const {data: dockedCourseObjs, isLoading} = useSWR<IDockedCourse[]>(`/api/degree/docked`, {fallback: []}) 
@@ -152,7 +152,7 @@ const Dock = ({ user, login, logout  }: DockProps) => {
                 <SearchIconContainer onClick={() => {
                     setSearchRuleQuery("");
                     setSearchRuleId(null);
-                    setSearchPanelOpen(true);
+                    setSearchPanelOpen(!searchPanelOpen);
                 }}>
                     <DarkBlueIcon>
                         <i className="fas fa-search fa-lg"/>

diff --git a/frontend/degree-plan/components/Dock/DockedCourse.tsx b/frontend/degree-plan/components/Dock/DockedCourse.tsx
@@ -7,25 +7,11 @@ import styled from '@emotion/styled';
 import { ItemTypes } from '../dnd/constants';
 import { Draggable } from "../common/DnD";
 import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
+import { BaseCourseContainer } from "../FourYearPlan/CoursePlanned";
 
-const BaseCourseContainer = styled.span<{ $isDragging?: boolean, $isDepressed: boolean, $isDisabled: boolean }>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 70px;
-  background: #F2F3F4;
-  margin: 0px 6px;
-  border-radius: 0px;
-  padding: 0rem 2rem;
-  text-wrap: nowrap;
-  color: ${props => props.$isDisabled ? "rgba(0, 0, 0, .6)" : "#000"};
-  cursor: ${props => props.$isDisabled || props.$isDepressed ? "not-allowed" : "grab"};
-  opacity: ${props => props.$isDragging ? 0.5 : 1};
-  background-color: ${props => props.$isDragging ? "#4B9AE7" : props.$isDepressed ? "var(--primary-color)" : "#F2F3F4"};
-`;
 
 const DockedCourseContainer = styled(BaseCourseContainer)`
-    height: 100%;
+  height: 100%;
   position: relative;
   opacity: ${props => props.$isDragging ? 0.5 : 1};
 
@@ -64,13 +50,13 @@ const DockedCourse = ({removeDockedCourse, full_code}: any) => {
     return (
         <DockedCourseContainer
         $isDragging={isDragging}
-        $isDepressed={false}
+        $isUsed={false}
         $isDisabled={false}
         ref={drag} 
         >
             <Draggable isDragging={isDragging} >
                 <ReviewPanelTrigger full_code={full_code}>
-                  <BaseCourseContainer $isDisabled={false} $isDragging={isDragging} $isDepressed={false}>
+                  <BaseCourseContainer $isDisabled={false} $isDragging={isDragging} $isUsed={false}>
                     {full_code.replace(/-/g, " ")}
                   </BaseCourseContainer>
                 </ReviewPanelTrigger>

diff --git a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
@@ -8,19 +8,18 @@ import { Draggable } from "../common/DnD";
 import Skeleton from "react-loading-skeleton"
 import 'react-loading-skeleton/dist/skeleton.css'
 
-export const BaseCourseContainer = styled.span<{ $isDragging?: boolean, $isDepressed: boolean, $isDisabled: boolean }>`
+export const BaseCourseContainer = styled.span<{ $isDragging?: boolean, $isUsed: boolean, $isDisabled: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 70px;
   min-height: 35px;
-  background: #F2F3F4;
   border-radius: 10px;
   padding: .5rem;
   text-wrap: nowrap;
-  cursor: ${props => props.$isDisabled || props.$isDepressed ? "not-allowed" : "grab"};
+  cursor: ${props => props.$isDisabled || props.$isUsed ? "not-allowed" : "grab"};
   opacity: ${props => props.$isDisabled || props.$isDragging ? 0.7 : 1};
-  background-color: ${props => props.$isDragging ? "#4B9AE7" : props.$isDepressed ? "var(--primary-color)" : "#F2F3F4"};
+  background-color: ${props => props.$isDragging ? "#4B9AE7" : props.$isUsed ? "var(--primary-color)" : "var(--background-grey)"};
 `;
 
 export const PlannedCourseContainer = styled(BaseCourseContainer)`
@@ -53,7 +52,7 @@ interface CoursePlannedProps {
 }
 
 export const SkeletonCourse = () => (
-  <PlannedCourseContainer $isDepressed={false} $isDisabled={false}>
+  <PlannedCourseContainer $isUsed={false} $isDisabled={false}>
       <div>
         <Skeleton width="5em"/>
       </div>
@@ -74,7 +73,7 @@ const CoursePlanned = ({ fulfillment, semester, removeCourse } : CoursePlannedPr
       <ReviewPanelTrigger full_code={fulfillment.full_code}>
         <PlannedCourseContainer
         $isDragging={isDragging}
-        $isDepressed={false}
+        $isUsed={false}
         $isDisabled={false}
         ref={drag} 
         >

diff --git a/frontend/degree-plan/components/FourYearPlan/PanelCommon.tsx b/frontend/degree-plan/components/FourYearPlan/PanelCommon.tsx
@@ -15,16 +15,16 @@ export const PanelTopBarString = styled.div`
     flex-shrink: 1;
 `
 
-export const PanelTopBarButton = styled.div`
+export const PanelTopBarButton = styled.button`
     display: flex;
     flex-direction: row;
     justify-content: start;
     align-items: center;
-    padding: 0 1rem;
+    padding: .5rem 1rem;
     gap: .5rem;
     min-height: 1.5rem;
 
-    font-size: 1rem !important;
+    font-size: 1rem;
     font-weight: 500;
    
     background: var(--primary-color-xx-dark); 

diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -9,7 +9,7 @@ import { PanelTopBarButton, PanelTopBarIcon } from "./PanelCommon";
 import { PanelContainer, PanelHeader, PanelTopBarIconList, PanelBody } from "./PanelCommon";
 
 const ShowStatsWrapper = styled(PanelTopBarButton)`
-    min-width: 8.75rem;
+    min-width: 9rem;
 `
 
 const ShowStatsButton = ({ showStats, setShowStats }: { showStats: boolean, setShowStats: (arg0: boolean) => void }) => (

diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -75,7 +75,7 @@ collect: (monitor) => ({ isDragging: !!monitor.isDragging() }),
     return (
         <ReviewPanelTrigger full_code={full_code}>
             <Draggable isDragging={isDragging}>
-                <BaseCourseContainer ref={drag} $isDepressed={isChosen} $isDisabled={!isChosen && ruleIsSatisfied}>
+                <BaseCourseContainer ref={drag} $isUsed={isChosen} $isDisabled={!isChosen && ruleIsSatisfied}>
                     {semester ? `${full_code} (${semester})` : full_code.replace("-", " ")}
                 </BaseCourseContainer>
             </Draggable>

diff --git a/frontend/degree-plan/components/Search/ResultsList.tsx b/frontend/degree-plan/components/Search/ResultsList.tsx
@@ -9,47 +9,14 @@ const goodEasy = ({ difficulty, course_quality: courseQuality }: CourseType) =>
         ? 0
         : Math.pow(courseQuality + 0.5, 1.5) / (difficulty + 1);
 
-/**
- * Sorts courses by the given sort mode
- * @param courses A list of course objects
- * @param sortMode The sort mode as a string
- * @returns {*} A sorted list of courses
- */
-const courseSort = (courses: CourseType[], sortMode: SortMode) => {
-    const sorted = [...courses];
-    sorted.sort((courseA, courseB) => {
-        switch (sortMode) {
-            case SortMode.QUALITY:
-                return !courseB.course_quality
-                    ? -1
-                    : courseB.course_quality - courseA.course_quality;
-            case SortMode.DIFFICULTY:
-                return !courseB.difficulty
-                    ? -1
-                    : courseA.difficulty - courseB.difficulty;
-            case SortMode.RECOMMENDED:
-                return !courseB.recommendation_score
-                    ? -1
-                    : courseB.recommendation_score -
-                          courseA.recommendation_score;
-            case SortMode.GOOD_AND_EASY:
-                return goodEasy(courseB) - goodEasy(courseA);
-            case SortMode.NAME:
-            default:
-                return courseA.id.localeCompare(courseB.id);
-        }
-    });
-    return sorted;
-};
-
 const CourseListContainer = styled.div`
     box-sizing: border-box;
     border-radius: 0.375em;
     height: 100%;
     display: flex;
     flex-direction: column;
     min-height: 0;
-    overflow: auto;
+    overflow: hidden;
 `;
 
 const HeaderContainer = styled.div`

diff --git a/frontend/degree-plan/components/Search/SearchPanel.tsx b/frontend/degree-plan/components/Search/SearchPanel.tsx
@@ -26,12 +26,13 @@ export const SearchPanelContext = createContext<SearchPanelContextType>({
 
 
 const SearchPanelBody = styled.div`
-    margin: 10px;
+    margin: .6rem;
     overflow-y: auto;
 `
 
 const SearchPanelResult = styled.div`
-    margin-top: 8px;
+    margin-top: .5rem;
+    overflow-x: hidden;
 `
 
 const SearchContainer = styled.div`
@@ -54,16 +55,6 @@ const SearchField = styled.input`
     font: inherit;
 `;
 
-const LoadingComponentContainer = styled.div`
-    height: 10em;
-`
-const LoadingComponent = styled.div`
-    margin: 0;
-    text: bold;
-    font-size: 1em;
-    text-align: center; 
-    transform: translate(0, 90%)
-`
 const PanelContainer = styled.div`
     border-radius: 10px;
     box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.05);

diff --git a/frontend/degree-plan/styles/globals.css b/frontend/degree-plan/styles/globals.css
@@ -18,7 +18,7 @@
   --background-white: #F7F9FC;
   --background-blue-grey:#F7F9FC;
   --background-light-grey: #F8F8F8;
-  --background-grey: #f5f5f5;
+  --background-grey: #f3f3f3;
 
   /* Edit mode */
   --plus-button-color: #9FB5EF;