PR changes -- added filter to flexbox

cornell-dti · Dec 26, 2024 · f70bdae · f70bdae
1 parent f6650ee
commit f70bdae
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 34 deletions.
diff --git a/client/src/modules/Course/Components/Course.tsx b/client/src/modules/Course/Components/Course.tsx
@@ -315,42 +315,40 @@ export const Course = () => {
             <div className={styles.reviewscontainer}>
               <div className={styles.bar}>
                 <h2 className={styles.title}>
-                  Past Reviews (
-                  {selectedProf.current !== 'none'
-                    ? visibleCourseReviews.length + ' of '
-                    : ''}
-                  {courseReviews.length}){' '}
+                  Past Reviews ({visibleCourseReviews.length}){' '}
                 </h2>
                 <div>
                   <div className={styles['select-container']}>
-                    <label htmlFor="sort-reviews">Sort by: </label>
-                    <select
-                      name="sort-reviews"
-                      id="sort-reviews"
-                      onChange={sortReviewsBy}
-                      className={styles.filtertext}
-                    >
-                      <option value="helpful">Most Helpful</option>
-                      <option value="recent">Recent</option>
-                      {selectedProf.current === "none" && <option value="professor">Professor Name</option>}
-                    </select>
-                  </div>
-                  <div className={styles['select-container']}>
-                    <label htmlFor="filter-by-prof">
-                      Filter by professor:{' '}
-                    </label>
-                    <select
-                      name="filter-by-prof"
-                      id="filter-by-prof"
-                      onChange={filterByProf}
-                      className={styles.filtertext}
-                    >
-                      <option value="none">None</option>
-                      {[...pastProfs.current]
-                        .sort()
-                        ?.filter((o) => o !== 'Not Listed')
-                        .map((o) => <option value={o}>{o}</option>)}
-                    </select>
+                    <div className={styles['filter-container']}>
+                      <label htmlFor="sort-reviews" style={{whiteSpace: "nowrap"}}>Sort by: </label>
+                      <select
+                        name="sort-reviews"
+                        id="sort-reviews"
+                        onChange={sortReviewsBy}
+                        className={styles.filtertext}
+                      >
+                        <option value="helpful">Most Helpful</option>
+                        <option value="recent">Recent</option>
+                        {selectedProf.current === "none" && <option value="professor">Professor Name</option>}
+                      </select>
+                    </div>
+                    <div className={styles.filterContainer}>
+                      <label htmlFor="filter-by-prof" style={{whiteSpace: "nowrap"}}>
+                        Filter by professor:{' '}
+                      </label>
+                      <select
+                        name="filter-by-prof"
+                        id="filter-by-prof"
+                        onChange={filterByProf}
+                        className={styles.filtertext}
+                      >
+                        <option value="none">None</option>
+                        {[...pastProfs.current]
+                          .sort()
+                          ?.filter((o) => o !== 'Not Listed')
+                          .map((o) => <option value={o}>{o}</option>)}
+                      </select>
+                    </div>
                   </div>
                 </div>
               </div>

diff --git a/client/src/modules/Course/Styles/Course.module.css b/client/src/modules/Course/Styles/Course.module.css
@@ -170,13 +170,22 @@
 
 .select-container {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
   vertical-align: middle;
   gap: 8px;
 }
 
+.filter-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .filtertext {
   color: var(--clr-blue-400);
+  flex: 1;
+  min-width: 0;
 }
 
 .reviews {