Skip to content

Commit 69f8f21

Browse files
Xx358hffyalecliu1204ajzombie123
authored
Feature/filter and reviews (#368)
* Added animation to modal popup for Filter * colour changes (#361) * Update code to match main * Clean reset: make develop code match main exactly * Light and Dark mode Colour scheme changes (#360) added visual improvements to CourseCard, Navbar, ReviewCard and tailwind.config.js --------- Co-authored-by: Auston Yang <163545426+ajzombie123@users.noreply.github.com> * Fixed filter animation and padding * Fixed text only review always --------- Co-authored-by: alecliu1204 <111400188+alecliu1204@users.noreply.github.com> Co-authored-by: Auston Yang <163545426+ajzombie123@users.noreply.github.com>
1 parent e46f029 commit 69f8f21

File tree

2 files changed

+83
-96
lines changed

2 files changed

+83
-96
lines changed

‎frontend/src/components/FilterModal/FilterModal.tsx‎

Lines changed: 82 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from "react";
33
import Dropdown from "../Dropdown/Dropdown";
44
import { useState } from "react";
55
import { Dialog } from "@headlessui/react";
6+
import { Transition } from "@headlessui/react";
67
import { XMarkIcon } from "@heroicons/react/24/outline";
78
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";
89
import { Course } from "@/types/api";
@@ -105,15 +106,6 @@ export default function FilterModal({
105106
}
106107
});
107108

108-
// Show secret message if specific filters are selected
109-
if (
110-
selectedFaculties.includes("Arts") &&
111-
selectedTerms.includes("-1") &&
112-
selectedTerms.includes("-2")
113-
) {
114-
alert("Alss aol zlhyjo ihy...");
115-
}
116-
117109
setFilters({ faculties: selectedFaculties, terms: selectedTerms });
118110

119111
setOpen(false);
@@ -157,6 +149,7 @@ export default function FilterModal({
157149

158150
return (
159151
<>
152+
<div>
160153
{/* filter button */}
161154
<div className="mt-4 min-w-[140px] xs:min-w-1/2">
162155
<button
@@ -171,79 +164,86 @@ export default function FilterModal({
171164
</div>
172165

173166
{/* filter dialog */}
174-
<Dialog open={open} onClose={handleClose}>
175-
{/* the blurred backdrop */}
176-
<div
177-
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-10"
178-
aria-hidden="true"
179-
/>
180-
181-
{/* Full-screen container to center the panel */}
182-
<div className="fixed inset-0 flex w-screen items-center justify-center pl-20 z-10 ">
183-
{/* The actual dialog panel */}
184-
<Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full">
185-
<button className="w-6 h-6 place-self-end" onClick={handleClose}>
186-
<XMarkIcon />
187-
</button>
188-
<Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
189-
Filter by:
190-
</Dialog.Title>
191-
<Dialog.Description className="text-xl font-semibold mb-2 ">
192-
Faculty
193-
</Dialog.Description>
194-
{/* display the faculty tags */}
195-
<div className="flex flex-wrap mb-4">
196-
{faculties.map((faculty, index) => {
197-
return styledFilterButton(
198-
"faculty",
199-
index,
200-
facultiesCheckedState[index],
201-
faculty,
202-
);
203-
})}
204-
</div>
205-
<Dialog.Description className="text-xl font-semibold mb-2">
206-
Term
207-
</Dialog.Description>
208-
{/* display the term tags */}
209-
<div className="sm:hidden flex flex-wrap mb-4">
210-
{terms.map((term, index) => {
211-
return styledFilterButton(
212-
"term",
213-
index,
214-
termsCheckedState[index],
215-
term,
216-
);
217-
})}
218-
</div>
219-
<div className="sm:flex hidden flex-wrap mb-4 ">
220-
{termsShortened.map((term, index) => {
221-
return styledFilterButton(
222-
"term",
223-
index,
224-
termsCheckedState[index],
225-
term,
226-
);
227-
})}
228-
</div>
229-
230-
<div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
231-
<button
232-
className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
233-
onClick={handleClearAll}
234-
>
235-
Clear All
236-
</button>
237-
<button
238-
className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
239-
onClick={handleApply}
240-
>
241-
Apply
242-
</button>
243-
</div>
244-
</Dialog.Panel>
245-
</div>
246-
</Dialog>
167+
<Transition show={open}>
168+
<Dialog open={open} onClose={handleClose} className="fixed inset-0 z-10">
169+
{/* Backdrop */}
170+
<div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />
171+
{/* Modal content wrapper */}
172+
<div className="fixed inset-0 flex items-center justify-center p-4 ">
173+
<Transition.Child
174+
enter="transition-transform ease-out duration-700"
175+
enterFrom="opacity-0 scale-90"
176+
enterTo="opacity-100 scale-100"
177+
leave="transition-transform ease-in duration-200"
178+
leaveFrom="opacity-100 scale-100"
179+
leaveTo="opacity-0 scale-95"
180+
>
181+
<Dialog.Panel className="mx-auto max-w-sm p-8 rounded dark:bg-gray-900 bg-white flex flex-col xs:w-full pl-20">
182+
<button className="w-6 h-6 place-self-end" onClick={handleClose}>
183+
<XMarkIcon />
184+
</button>
185+
<Dialog.Title className="text-2xl dark:text-white font-bold mb-4 text-unilectives-headings">
186+
Filter by:
187+
</Dialog.Title>
188+
<Dialog.Description className="text-xl font-semibold mb-2 ">
189+
Faculty
190+
</Dialog.Description>
191+
{/* display the faculty tags */}
192+
<div className="flex flex-wrap mb-4">
193+
{faculties.map((faculty, index) => {
194+
return styledFilterButton(
195+
"faculty",
196+
index,
197+
facultiesCheckedState[index],
198+
faculty,
199+
);
200+
})}
201+
</div>
202+
<Dialog.Description className="text-xl font-semibold mb-2">
203+
Term
204+
</Dialog.Description>
205+
{/* display the term tags */}
206+
<div className="sm:hidden flex flex-wrap mb-4">
207+
{terms.map((term, index) => {
208+
return styledFilterButton(
209+
"term",
210+
index,
211+
termsCheckedState[index],
212+
term,
213+
);
214+
})}
215+
</div>
216+
<div className="sm:flex hidden flex-wrap mb-4 ">
217+
{termsShortened.map((term, index) => {
218+
return styledFilterButton(
219+
"term",
220+
index,
221+
termsCheckedState[index],
222+
term,
223+
);
224+
})}
225+
</div>
226+
227+
<div className="flex justify-between mt-4 xs:flex-col xs:gap-4">
228+
<button
229+
className="flex items-center justify-center xs:w-full dark:hover:border-gray-900 gap-1 px-4 py-2 text-unilectives-button border-2 border-unilectives-button rounded-md hover:bg-unilectives-icon/95 hover:border-unilectives-icon/95 hover:text-white hover:border-white font-bold disabled:opacity-50"
230+
onClick={handleClearAll}
231+
>
232+
Clear All
233+
</button>
234+
<button
235+
className="flex items-center justify-center w-1/3 xs:w-full gap-1 px-4 py-2 bg-unilectives-button text-white rounded-md hover:bg-unilectives-icon/95 font-bold disabled:opacity-50"
236+
onClick={handleApply}
237+
>
238+
Apply
239+
</button>
240+
</div>
241+
</Dialog.Panel>
242+
</Transition.Child>
243+
</div>
244+
</Dialog>
245+
</Transition>
246+
</div>
247247
</>
248248
);
249249
}

‎frontend/src/components/ReviewsBar/ReviewsBar.tsx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ export default function ReviewsBar({
2121
const [currentReviews, setCurrentReviews] = useState(reviews ? reviews : []);
2222
const [allBookmarkedReviews, setAllBookmarkedReviews] =
2323
useState(bookmarkedReviews);
24-
const [displayTextReview, setDisplayTextReview] = useState(false);
2524
const [selected, setSelected] = useState("Most Recent");
2625

2726
// Change review sorting based on dropdown
@@ -51,14 +50,10 @@ export default function ReviewsBar({
5150
break;
5251
}
5352

54-
if (!displayTextReview) {
55-
return setCurrentReviews(sortedReviews);
56-
}
57-
5853
setCurrentReviews(
5954
sortedReviews.filter((r: Review) => r.title || r.description)
6055
);
61-
}, [displayTextReview, selected]);
56+
}, [selected]);
6257

6358
return (
6459
<div className="space-y-5 isolate">
@@ -90,14 +85,6 @@ export default function ReviewsBar({
9085
{/* Switch */}
9186
{currentReviewRef.current && currentReviewRef.current.length !== 0 && (
9287
<>
93-
<div className="flex items-center flex-wrap gap-1">
94-
<ToggleSwitch
95-
defaultValue={displayTextReview}
96-
onChange={setDisplayTextReview}
97-
accessibleTitle="Text only reviews"
98-
/>
99-
<span>Text only reviews</span>
100-
</div>
10188
{/* Reviews */}
10289
{currentReviews.map((review: Review, index: number) => (
10390
<ReviewCard

0 commit comments

Comments
 (0)