Skip to content

Commit

Permalink
Loader is now centered
Browse files Browse the repository at this point in the history 
Also got rid of useless comments
  • Loading branch information
@mjaydenkim
mjaydenkim committed Jan 15, 2025
1 parent f613cfd commit 26c9daa
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 141 deletions.
12 changes: 9 additions & 3 deletions client/src/modules/Globals/Styles/Loading.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,14 @@
width: 80px;
height: 80px;
animation: spin 1s linear infinite;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 0);
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
/*position: absolute;*/
/*top: 30%;*/
/*left: 50%;*/
}
255 changes: 125 additions & 130 deletions client/src/modules/Results/Components/ResultsDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,7 @@ export const ResultsDisplay = ({
])
],
[
'subjects',
[] // Correctly type this as a string array.
'subjects', []
]
]);
const [filterMap, setFilterMap] = useState<FilterMap>(getInitialFilterMap());
Expand Down Expand Up @@ -262,146 +261,142 @@ export const ResultsDisplay = ({
};

return (
<div className={styles.container}>
<>
{loading && <Loading />}
{/* Case where results are returned, even if zero */}
{!loading && (
<div className={styles.layout} data-cy="results-display">
{/* Case where no results returned */}
<div className={styles.leftbar}>
{courseList.length !== 0 && <h1> Search Results </h1>}
{/*<button*/}
{/* className={styles.filterbutton}*/}
{/* onClick={() => setSearchListViewEnabled(!searchListViewEnabled)}*/}
{/*>*/}
{/* {searchListViewEnabled ? 'Hide' : 'View'} Search Results*/}
{/*</button>*/}
<div className={styles.filtersearch}>
{courseList.length !== 0 && (
<div className={styles.filtercol}>
<div className={styles.filtertext}>Filter</div>
<div>
<div className={styles.filtercategory}>Semester</div>
{renderCheckboxes('semesters')}
<div className={styles.container}>
{/* Case where results are returned, even if zero */}
{!loading && (
<div className={styles.layout} data-cy="results-display">
{/* Case where no results returned */}
<div className={styles.leftbar}>
{courseList.length !== 0 && <h1> Search Results </h1>}
{/*<button*/}
{/* className={styles.filterbutton}*/}
{/* onClick={() => setSearchListViewEnabled(!searchListViewEnabled)}*/}
{/*>*/}
{/* {searchListViewEnabled ? 'Hide' : 'View'} Search Results*/}
{/*</button>*/}
<div className={styles.filtersearch}>
{courseList.length !== 0 && (
<div className={styles.filtercol}>
<div className={styles.filtertext}>Filter</div>
<div>
<div className={styles.filtercategory}>Semester</div>
{renderCheckboxes('semesters')}
</div>
<div>
<div className={styles.filtercategory}>Level</div>
{renderCheckboxes('levels')}
</div>
</div>
<div>
<div className={styles.filtercategory}>Level</div>
{renderCheckboxes('levels')}
</div>
</div>
)}

{filteredItems.length !== 0 && (
<div className={styles.columns}>
{searchListViewEnabled && (
<>
<div>
We found <b>{filteredItems.length}</b> courses for
&quot;
{userInput}
&quot;
</div>
<div className={styles.filtersortbuttons}>
<div className={styles.bar}>
<div>
<label>Sort By: </label>
<select
value={selected}
className={styles.sortselector}
onChange={(e) => handleSelect(e)}
)}

{filteredItems.length !== 0 && (
<div className={styles.columns}>
{searchListViewEnabled && (
<>
<div>
We found <b>{filteredItems.length}</b> courses for
&quot;
{userInput}
&quot;
</div>
<div className={styles.filtersortbuttons}>
<div className={styles.bar}>
<div>
<label>Sort By: </label>
<select
value={selected}
className={styles.sortselector}
onChange={(e) => handleSelect(e)}
>
<option value="relevance">Relevance</option>
<option value="rating">Overall Rating</option>
<option value="diff">Difficulty</option>
<option value="work">Workload</option>
</select>
</div>

<button
className={styles.filterbutton}
onClick={() => setShowFilterPopup(!showFilterPopup)}
>
<option value="relevance">Relevance</option>
<option value="rating">Overall Rating</option>
<option value="diff">Difficulty</option>
<option value="work">Workload</option>
</select>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
</div>

<button
className={styles.filterbutton}
onClick={() => setShowFilterPopup(!showFilterPopup)}
>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
{showFilterPopup && (
<FilterPopup
renderCheckboxes={renderCheckboxes}
setShowFilterPopup={() =>
setShowFilterPopup(!showFilterPopup)
}
/>
)}
</div>
{showFilterPopup && (
<FilterPopup
renderCheckboxes={renderCheckboxes}
setShowFilterPopup={() =>
setShowFilterPopup(!showFilterPopup)
}
/>
)}
</div>
<div className={styles.layout}>
<div className={styles.list}>
<div className={styles.resultslist}>
<ul>{renderResults()}</ul>
<div className={styles.layout}>
<div className={styles.list}>
<div className={styles.resultslist}>
<ul>{renderResults()}</ul>
</div>
</div>
</div>
</div>
</>
)}
</div>
)}
{filteredItems.length === 0 && courseList.length !== 0 && (
<div className={styles.columns}>
{searchListViewEnabled && (
<>
<div className={styles.filtersortbuttons}>
<div className={styles.bar}>
<button
className={styles.filterbutton}
onClick={() => setShowFilterPopup(!showFilterPopup)}
>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
</>
)}
</div>
)}
{filteredItems.length === 0 && courseList.length !== 0 && (
<div className={styles.columns}>
{searchListViewEnabled && (
<>
<div className={styles.filtersortbuttons}>
<div className={styles.bar}>
<button
className={styles.filterbutton}
onClick={() => setShowFilterPopup(!showFilterPopup)}
>
Filter <img src={FilterIcon} alt="filter-icon" />
</button>
</div>
{showFilterPopup && (
<FilterPopup
renderCheckboxes={renderCheckboxes}
setShowFilterPopup={() =>
setShowFilterPopup(!showFilterPopup)
}
/>
)}
</div>
{showFilterPopup && (
<FilterPopup
renderCheckboxes={renderCheckboxes}
setShowFilterPopup={() =>
setShowFilterPopup(!showFilterPopup)
}
/>
)}
</div>
</>
)}
</div>
)}
</>
)}
</div>
)}
</div>
</div>
</div>

{filteredItems.length === 0 && (
<div className={styles.noitems}>
<img src={Bear} alt="Bear Icon" className={styles.bearicon} />
<div>
No classes found. Try searching something else
{courseList.length !== 0 ? " or switching up the filters!" : "!"}
{filteredItems.length === 0 && (
<div className={styles.noitems}>
<img src={Bear} alt="Bear Icon" className={styles.bearicon} />
<div>
No classes found. Try searching something else
{courseList.length !== 0 ? " or switching up the filters!" : "!"}
</div>
</div>
{/* <img*/}
{/* src="/noResults.svg"*/}
{/* className={styles.noresultimg}*/}
{/* alt="No class found"*/}
{/* />*/}
{/* <div>Sorry! No classes match your search.</div>*/}
</div>
)}

{filteredItems.length !== 0 && (
<div className={styles.preview}>
<div className={styles.previewcard}>
<PreviewCard
course={cardCourse}
// transformGauges={transformGauges}
/>
)}

{filteredItems.length !== 0 && (
<div className={styles.preview}>
<div className={styles.previewcard}>
<PreviewCard
course={cardCourse}
// transformGauges={transformGauges}
/>
</div>
</div>
</div>
)}
</div>
)}
</div>
)}
</div>
)}
</div>
</>
);
};

Expand Down
16 changes: 8 additions & 8 deletions client/src/modules/Results/Styles/Results.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ html {
}

.page {
/*background-color: var(--clr-blue-100);*/
height: 100%;
max-height: 100vh;
padding-bottom: 63px;
Expand Down Expand Up @@ -38,7 +37,7 @@ html {
gap: 24px;

justify-content: space-between;
align-items: stretch; /* Matches heights of left and right sections */
align-items: stretch;
}

.columns {
Expand All @@ -54,8 +53,8 @@ html {
gap: 16px;
width: 100%;
max-width: 426px;
height: 100%; /* Take full height of the parent */
overflow: hidden; /* Avoid adding scroll here */
height: 100%;
overflow: hidden;
}

.resultslist {
Expand All @@ -66,15 +65,16 @@ html {
}

.preview {
width: 60vw; /* Dynamically adjusts based on viewport width */
max-width: 900px; /* Prevents growing too wide on larger screens */
width: 60vw;
max-width: 900px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
max-height: 100%; /* Prevent extra height growth */
max-height: 100%;
height: 100%;
overflow: hidden; /* Avoid extra scrollbars */
overflow: hidden;
padding-bottom: 10px;
}

.previewcard {
Expand Down

0 comments on commit 26c9daa

Please sign in to comment.