Skip to content

Commit 599dc71

Browse files
alecliu1204ajzombie123annelise-kohAnnelise Kohl-duong05
authored
merged staging changes (#370)
* 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 * added clickable course code for bookmarked reviews (#364) * added link icon and clickable course code to bookmarked reviews * Make bookmarked review titles clickable, added link icon * added clickable course code to card view of bookmarked reviews --------- Co-authored-by: Annelise Koh <afekoh1559@gmail.com> * fixed bug for card/list toggle when there were no user reviews/bookmarked reviews (#362) * 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 card/list toggle only for when there are user reviews and user bookmarked reviews * removed extra file --------- Co-authored-by: alecliu1204 <111400188+alecliu1204@users.noreply.github.com> Co-authored-by: Auston Yang <163545426+ajzombie123@users.noreply.github.com> Co-authored-by: Lyn Duong <z5585295@ad.unsw.edu.au> * added hover colouring for bookmarked reviews (#363) * 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> * added hover colouring to bookmarked cards --------- Co-authored-by: alecliu1204 <111400188+alecliu1204@users.noreply.github.com> Co-authored-by: Auston Yang <163545426+ajzombie123@users.noreply.github.com> Co-authored-by: Lyn Duong <z5585295@ad.unsw.edu.au> * moved link icon to the right of course code and made icon smaller (#365) * added link icon and clickable course code to bookmarked reviews * Make bookmarked review titles clickable, added link icon * added clickable course code to card view of bookmarked reviews * made link icon smaller and moved it to the right of course code --------- Co-authored-by: Annelise Koh <afekoh1559@gmail.com> Co-authored-by: alecliu1204 <111400188+alecliu1204@users.noreply.github.com> * 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> * changed dimensions of modal and made centered in viewport (#369) changed dimensions of modal and made centered in viewport excluding navbar --------- Co-authored-by: Auston Yang <163545426+ajzombie123@users.noreply.github.com> Co-authored-by: annelise_k <afekoh@icloud.com> Co-authored-by: Annelise Koh <afekoh1559@gmail.com> Co-authored-by: l-duong05 <176846912+l-duong05@users.noreply.github.com> Co-authored-by: Lyn Duong <z5585295@ad.unsw.edu.au> Co-authored-by: Xx358hffy <150639855+Xx358hffy@users.noreply.github.com>
1 parent 59784d7 commit 599dc71

File tree

5 files changed

+144
-134
lines changed

5 files changed

+144
-134
lines changed

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

Lines changed: 100 additions & 93 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,93 +149,108 @@ export default function FilterModal({
157149

158150
return (
159151
<>
160-
{/* filter button */}
161-
<div className="mt-4 min-w-[140px] xs:min-w-1/2">
162-
<button
163-
className="relative flex items-center dark:text-white dark:bg-gray-900 justify-between gap-2 w-full cursor-pointer py-2 px-4 text-left text-[#989898] border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none"
164-
onClick={() => {
165-
setOpen(true);
166-
}}
167-
>
168-
Filter
169-
<AdjustmentsHorizontalIcon className="w-4 h-4 rounded-full dark:text-white text-black" />
170-
</button>
171-
</div>
172-
173-
{/* 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>
152+
<div>
153+
{/* filter button */}
154+
<div className="mt-4 min-w-[140px] xs:min-w-1/2">
155+
<button
156+
className="relative flex items-center dark:text-white dark:bg-gray-900 justify-between gap-2 w-full cursor-pointer py-2 px-4 text-left text-[#989898] border border-unilectives-subheadings rounded-md shadow-review-card aria-expanded:border-b-transparent aria-expanded:rounded-b-none"
157+
onClick={() => {
158+
setOpen(true);
159+
}}
160+
>
161+
Filter
162+
<AdjustmentsHorizontalIcon className="w-4 h-4 rounded-full dark:text-white text-black" />
163+
</button>
164+
</div>
229165

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

‎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

‎frontend/src/components/UserBookmarkedReviews/UserBookmarkedReviews.tsx‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Review, Reviews, TabsType } from "@/types/api";
44
import Dropdown from "../Dropdown/Dropdown";
55
import { Dispatch, SetStateAction, useEffect, useState } from "react";
66
import Rating from "../Rating/Rating";
7-
import { BookmarkIcon } from "@heroicons/react/24/solid";
7+
import { BookmarkIcon, LinkIcon } from "@heroicons/react/24/solid";
88
import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
99
import Pagination from "../Pagination/Pagination";
1010
import { validatedReq } from "@/utils/request";
@@ -105,17 +105,19 @@ export default function UserBookmarkedReviews({
105105
/>
106106
</div>
107107
{/* Toggle Switch */}
108-
<div className='flex ml-auto gap-2'>
109-
<span>Card</span>
110-
<div className='-scale-1'>
111-
<ToggleSwitch
112-
accessibleTitle='card-list-view'
113-
defaultValue={cardView}
114-
onChange={setCardView}
115-
/>
108+
{reviews.length > 0 && (
109+
<div className='flex ml-auto gap-2'>
110+
<span>Card</span>
111+
<div className='-scale-1'>
112+
<ToggleSwitch
113+
accessibleTitle='card-list-view'
114+
defaultValue={cardView}
115+
onChange={setCardView}
116+
/>
117+
</div>
118+
<span>List</span>
116119
</div>
117-
<span>List</span>
118-
</div>
120+
)}
119121
</div>
120122
{/* Reviews */}
121123
{/* List view */}
@@ -130,7 +132,14 @@ export default function UserBookmarkedReviews({
130132
>
131133
<div className='flex w-1/2 sm:w-full sm:flex-col sm:items-start items-center gap-2'>
132134
{/* Title */}
133-
<h1 className='font-bold text-xl'>{review.courseCode}</h1>
135+
<a
136+
href={`/course/${review.courseCode}`}
137+
className='flex items-center gap-2 font-bold hover:text-unilectives-blue/75 duration-150'
138+
>
139+
<LinkIcon className='w-5 h-5' />
140+
<span className='truncate'>{review.courseCode}</span>
141+
</a>
142+
134143
{/* Description */}
135144
<p className='text-unilectives-headings dark:text-gray-100 w-full truncate'>
136145
{!review.description ? "-" : review.description}
@@ -157,13 +166,19 @@ export default function UserBookmarkedReviews({
157166
.map((review: Review, index: number) => (
158167
<div
159168
key={index}
160-
className='box-border isolate px-6 py-7 bg-unilectives-card dark:bg-slate-700 shadow-lg shadow-gray-600 rounded-xl space-y-4'
169+
className='box-border isolate px-6 py-7 bg-unilectives-card dark:bg-slate-700 hover:bg-[#eff0f2] dark:hover:bg-slate-700/10 shadow-lg shadow-gray-600 rounded-xl space-y-4'
161170
>
162171
{/* Course courseCode + Ratings */}
163172
<div className='flex flex-wrap justify-between text-2xl'>
164-
<h1 className='font-bold block truncate'>
165-
{review.courseCode}
166-
</h1>
173+
<a
174+
href={`/course/${review.courseCode}`}
175+
className='font-bold hover:text-unilectives-blue/75 duration-150 truncate'
176+
>
177+
<div className='flex items-center gap-2'>
178+
<span className='block truncate'>{review.courseCode}</span>
179+
<LinkIcon className='w-4 h-4' />
180+
</div>
181+
</a>
167182
<div className='text-right'>
168183
{/* StarRating */}
169184
<div className='text-2xl inline'>

‎frontend/src/components/UserReports/UserReports.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from "react";
1111
import Dropdown from "../Dropdown/Dropdown";
1212
import Pagination from "../Pagination/Pagination";
13-
import ReviewCard from "../ReviewCard/ReviewCard";
1413

1514
type STATUS = {
1615
UNSEEN: boolean;

‎frontend/src/components/UserReviews/UserReviews.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -105,17 +105,19 @@ export default function UserReviews({
105105
/>
106106
</div>
107107
{/* Toggle Switch */}
108-
<div className='flex ml-auto gap-2'>
109-
<span>Card</span>
110-
<div className='-scale-1'>
111-
<ToggleSwitch
112-
accessibleTitle='card-list-view'
113-
defaultValue={cardView}
114-
onChange={setCardView}
115-
/>
108+
{reviews.length > 0 && (
109+
<div className='flex ml-auto gap-2'>
110+
<span>Card</span>
111+
<div className='-scale-1'>
112+
<ToggleSwitch
113+
accessibleTitle='card-list-view'
114+
defaultValue={cardView}
115+
onChange={setCardView}
116+
/>
117+
</div>
118+
<span>List</span>
116119
</div>
117-
<span>List</span>
118-
</div>
120+
)}
119121
</div>
120122
{/* Reviews */}
121123
{/* List view */}

0 commit comments

Comments
 (0)