Skip to content

Commit bc671ed

Browse files
LSKprLSKpr
authored
Fav list rework (#80)
* Course page merged with main * some styling changes * merge continued * fixed fav item reviews * working fav drop-down list * small fix * small fix: clicking the searchbar does close the fav list * crated fav button * small fix * before merge with main * added Found courses {num of courses} in the listview * different "Found courses" * small fixes: prereq tree edges, now you have to click the tree to interact with it * fixed fav list course popup * quick save * small fixes/features * before merge --------- Co-authored-by: Kacper Lisik <lisik@kth.se>
1 parent 874fa25 commit bc671ed

File tree

2 files changed

+63
-15
lines changed

2 files changed

+63
-15
lines changed

‎my-app/src/views/Components/CoursePagePopup.jsx‎

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,10 @@ function CoursePagePopup({
5454

5555
if (!isOpen || !course) return null;
5656

57+
console.log(course); ``
5758
return (
5859
<div
60+
5961
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
6062
onClick={onClose}
6163
>
@@ -71,7 +73,16 @@ function CoursePagePopup({
7173
{/* Course Title Section */}
7274
<div>
7375
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
74-
<span className="text-violet-700">{course.code}</span> - {course.name}
76+
<a
77+
href={`https://www.kth.se/student/kurser/kurs/${course.code}`}
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
className="hover:text-violet-600 transition-colors duration-300"
81+
>
82+
<span className="text-violet-700 ">{course.code}</span>
83+
{' '}- {' '}
84+
{course.name}
85+
</a>
7586
<span className="ml-4 text-lg text-violet-700 whitespace-nowrap">
7687
({course.credits} Credits)
7788
</span>
@@ -81,13 +92,12 @@ function CoursePagePopup({
8192
<div className="flex justify-between items-center">
8293
<button
8394
className={`inline-flex items-center px-4 py-2 gap-2 rounded-lg
84-
transition-all duration-300 ease-in-out
85-
font-semibold text-sm shadow-sm
86-
${
87-
favouriteCourses.some((fav) => fav.code === course.code)
88-
? 'bg-yellow-400/90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900'
95+
transition-all duration-300 ease-in-out
96+
font-semibold text-sm shadow-sm
97+
${favouriteCourses.some((fav) => fav.code === course.code)
98+
? 'bg-yellow-400 /90 hover:bg-yellow-500/90 border-2 border-yellow-600 hover:border-yellow-700 text-yellow-900'
8999
: 'bg-yellow-200/90 hover:bg-yellow-300 border-2 border-yellow-400 hover:border-yellow-500 text-yellow-600 hover:text-yellow-700'
90-
}`}
100+
}`}
91101
onClick={(e) => {
92102
e.stopPropagation();
93103
handleFavouriteClick(course);
@@ -142,13 +152,34 @@ function CoursePagePopup({
142152
</div>
143153

144154
{/* Description Section */}
155+
{course.description &&
156+
course.description.trim() &&
157+
course.description.trim() !== "null" && (
158+
<div>
159+
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
160+
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
161+
<div
162+
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
163+
dangerouslySetInnerHTML={{ __html: course.description }}
164+
/>
165+
</div>
166+
)}
167+
168+
{/* Learning outcomes */}
145169
<div>
146-
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
170+
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Learning Outcomes:</h3>
147171
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
148-
<div
149-
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
150-
dangerouslySetInnerHTML={{ __html: course.description }}
151-
/>
172+
{course.learning_outcomes && course.learning_outcomes.trim() &&
173+
course.description.trim() !== "null" ? (
174+
<div
175+
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
176+
dangerouslySetInnerHTML={{ __html: course.learning_outcomes }}
177+
/>
178+
) : (
179+
<p className="text-lg text-[#2e2e4f] font-semibold italic">
180+
No learning outcomes information available
181+
</p>
182+
)}
152183
</div>
153184
{/* Prerequisite Graph Tree Section */}
154185
<div>
@@ -157,12 +188,13 @@ function CoursePagePopup({
157188
<div className="relative rounded-lg">
158189
{showOverlay && (
159190
<div
160-
className="absolute inset-0 z-10 bg-indigo-200/10 rounded-lg cursor-pointer flex items-center justify-center z-51"
191+
className="absolute inset-0 z-10 bg-indigo-200/10 rounded-lg cursor-pointer flex items-center justify-center z-51"
161192
onClick={(e) => {
162193
e.stopPropagation();
163194
setShowOverlay(false);
164195
}}
165-
></div>
196+
>
197+
</div>
166198
)}
167199
<div
168200
className="bg-indigo-300/50 outline-none focus:outline-none focus:ring-2 focus:ring-violet-600 rounded-lg transition-shadow"
@@ -174,6 +206,22 @@ function CoursePagePopup({
174206
</div>
175207
</div>
176208
</div>
209+
{/* Prereq Section */}
210+
<div>
211+
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Prerequisites:</h3>
212+
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
213+
{course.prerequisites_text && course.prerequisites_text.trim() &&
214+
course.description.trim() !== "null" ? (
215+
<div
216+
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
217+
dangerouslySetInnerHTML={{ __html: course.prerequisites_text }}
218+
/>
219+
) : (
220+
<p className="text-lg text-[#2e2e4f] font-semibold italic">
221+
Prerequisites information not available
222+
</p>
223+
)}
224+
</div>
177225
{/* Reviews Section (optional) */}
178226
{reviewPresenter && (
179227
<div>

‎my-app/src/views/ListView.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ function ListView(props) {
106106
dangerouslySetInnerHTML={{
107107
__html: readMore[course.code]
108108
? course.description
109-
: course.description.slice(0, 150),
109+
: (course.description.slice(0, 200)+"..."),
110110
}}
111111
/>
112112
{course.description.length > 150 && (

0 commit comments

Comments
 (0)