Skip to content

Styling #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LSKpr merged 5 commits into from
Apr 9, 2025
Merged

Styling #41

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d8bd7ff
Course page merged with main
LSKpr Apr 9, 2025
05b055d
merge
LSKpr Apr 9, 2025
7aea6a5
Merge branch 'main' of github.com:InferenceKTH/Find-My-Next-Course
LSKpr Apr 9, 2025
1959be8
some styling changes
LSKpr Apr 9, 2025
8ffb3d6
more styling
LSKpr Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions my-app/src/views/Components/CoursePagePopup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ import React from 'react';

function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {
if (!isOpen || !course) return null; // Don't render if not open or course not selected

return (
<div
className="fixed backdrop-blur-sm inset-0 bg-transparent flex justify-end z-50"
onClick={onClose}
>
<div
className="bg-indigo-400/70 backdrop-blur-sm h-full w-3/4 flex flex-col overflow-auto"
className="bg-indigo-300/75 backdrop-blur-lg h-full w-3/4 flex flex-col overflow-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="flex-1">
<div className="px-10 py-10 md:px-20 md:py-16 text-slate-900 space-y-12 font-sans">
{/* Course Title Section */}
<div>
<h2 className="text-5xl font-extrabold text-[#2e2e4f]">
{course.code} - {course.name}
<span className="ml-4 text-lg text-violet-900">({course.credits} Credits)</span> {/* Display Credits */}
<h2 className="text-5xl font-extrabold text-[#2e2e4f] ">
<span className="text-violet-700">{course.code}</span> - {course.name}
<span className="ml-4 text-lg text-violet-700">({course.credits} Credits)</span>
</h2>
<div className="my-6 h-1.5 w-full bg-violet-500"></div>
</div>
<div>
<button
Expand All @@ -37,30 +37,30 @@ function CoursePagePopup({ isOpen, onClose, course, prerequisiteTree }) {

{/* Description Section */}
<div>
<h3 className="text-2xl font-bold text-[#3d3d68] mb-4">Course Description</h3>
<h3 className="text-2xl font-bold text-[#2e2e4f] mb-0.5">Course Description</h3>
<div className="mb-3 h-0.5 w-full bg-violet-500"></div>
<div
className="text-lg leading-8 text-[#2c2c2c] tracking-wide prose prose-slate max-w-full"
className="text-lg leading-8 text-[#2e2e4f] font-semibold tracking-wide prose prose-slate max-w-full"
dangerouslySetInnerHTML={{ __html: course.description }}
/>

</div>

{/* Prerequisite Graph Tree Section */}
<div>
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Prerequisite Graph Tree</h3>
<p className="text-lg text-slate-700 leading-7">Graph tree or prerequisite info will go here...</p>
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Prerequisite Graph Tree</h3>
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
<div className="bg-indigo-300/50">
{prerequisiteTree}
</div>
</div>
{/* Reviews Section */}
<div>
<h3 className="text-2xl font-semibold text-[#2e2e4f]">Reviews</h3>
<h3 className="text-2xl font-semibold text-[#2e2e4f] mb-0.5">Reviews</h3>
<div className="mb-4 h-0.5 w-full bg-violet-500"></div>
<p className="text-lg text-slate-700 leading-7">Here would be some reviews of the course...</p>
</div>

{/* Prerequisite Graph Tree Section */}
<div style={{ display: 'flex', flexDirection: 'column', marginBottom: '20px' }}>
<h3 style={{ fontFamily: 'Courier New, monospace', fontSize: '24px' }}>Prerequisite Graph Tree</h3>
{/* Placeholder for graph tree */}
{prerequisiteTree}
</div>
</div>
</div>
<button
Expand Down
Loading