Skip to content

Commit

Permalink
update style consistency using trailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
@aattiyah
aattiyah committed Dec 12, 2024
1 parent 3ad0863 commit d092d75
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 367 deletions.
76 changes: 10 additions & 66 deletions apps/frontend/src/components/PostReqCourses.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import Link from "next/link"; // Import Next.js Link component
import Link from "next/link";
import { useFetchCourseInfo } from "~/app/api/course";

interface TreeNode {
Expand All @@ -21,80 +21,31 @@ export const PostReqCourses = ({ courseID }: Props) => {
// Recursive function to render only the child branches
const renderTree = (nodes: TreeNode[]) => {
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex flex-col">
{nodes.map((node) => (
<div
key={node.courseID}
style={{
display: "flex",
alignItems: "center",
}}
>

<div key={node.courseID} className="flex items-center">
{/* Half vertical line for the first prereq in the list */}
{nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
<div
style={{
width: "1px",
height: "20px",
backgroundColor: "#d1d5db",
marginTop: "20px",
}}
></div>
<div className="w-[1px] h-[20px] bg-[#d1d5db] mt-[20px]"></div>
)}

{/* Normal vertical Line connector */}
{nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
<div
style={{
width: "1px",
backgroundColor: "#d1d5db",
alignSelf: "stretch",
}}
></div>
<div className="w-[1px] bg-[#d1d5db] self-stretch"></div>
)}

{/* Half vertical line for the last prereq in the list */}
{nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
<div
style={{
width: "1px",
height: "20px",
backgroundColor: "#d1d5db",
marginBottom: "20px",
}}
></div>
<div className="w-[1px] h-[20px] bg-[#d1d5db] mb-[20px]"></div>
)}

{/* Line connector */}
<div
style={{
width: "20px",
height: "1px",
backgroundColor: "#d1d5db",
}}
></div>
<div className="w-[20px] h-[1px] bg-[#d1d5db]"></div>

{/* Course ID button */}
<button
onClick={() => window.location.href = `/course/${node.courseID}`}
style={{
fontWeight: "normal",
textAlign: "center",
padding: "5px 10px",
fontSize: "14px",
backgroundColor: "#f9fafb",
color: "#111827",
border: "1px solid #d1d5db",
borderRadius: "4px",
boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.05)",
cursor: "pointer",
textDecoration: "none",
minWidth: "100px", // Ensure consistent width
display: "inline-block",
marginTop: "2px",
marginBottom: "2px",
}}
className="font-normal text-center px-2 py-1 text-base bg-[#f9fafb] text-[#111827] border border-[#d1d5db] rounded shadow cursor-pointer no-underline min-w-[80px] inline mt-[2px] mb-[2px]"
>
{node.courseID}
</button>
Expand All @@ -117,17 +68,10 @@ export const PostReqCourses = ({ courseID }: Props) => {
{childNodes.length > 0 ? (
renderTree(childNodes)
) : (
<div
style={{
fontStyle: "italic",
color: "#000000",
textAlign: "center",
fontSize: "14px",
fontWeight: "bold",
}}
>
<div className="italic text-[#000000] text-center text-base font-bold">
No further post-requisites
</div>

)}
</div>
);
Expand Down
76 changes: 10 additions & 66 deletions apps/frontend/src/components/PreReqCourses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,81 +20,33 @@ export const PreReqCourses = ({ courseID }: Props) => {
// Recursive function to render only the child branches
const renderTree = (nodes: TreeNode[]) => {
return (
<div style={{ display: "flex", flexDirection: "column" }}>
<div className="flex flex-col">
{nodes.map((node) => (
<div
key={node.courseID}
style={{
display: "flex",
alignItems: "center",
}}
>
<div key={node.courseID} className="flex items-center">
{/* Course ID button */}
<button
onClick={() => window.location.href = `/course/${node.courseID}`}
style={{
fontWeight: "normal",
textAlign: "center",
padding: "5px 10px",
fontSize: "14px",
backgroundColor: "#f9fafb",
color: "#111827",
border: "1px solid #d1d5db",
borderRadius: "4px",
boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.05)",
cursor: "pointer",
textDecoration: "none",
minWidth: "100px", // Ensure consistent width
display: "inline-block",
marginTop: "2px",
marginBottom: "2px",
}}
onClick={() => (window.location.href = `/course/${node.courseID}`)}
className="font-normal text-center px-2 py-1 text-base bg-[#f9fafb] text-[#111827] border border-[#d1d5db] rounded shadow cursor-pointer no-underline min-w-[80px] inline mt-[2px] mb-[2px]"
>
{node.courseID}
</button>

{/* Line connector */}
<div
style={{
width: "20px",
height: "1px",
backgroundColor: "#d1d5db",
}}
></div>
<div className="w-[20px] h-[1px] bg-[#d1d5db]"></div>

{/* Half vertical line for the first prereq in the list */}
{nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
<div
style={{
width: "1px",
height: "20px",
backgroundColor: "#d1d5db",
marginTop: "20px",
}}
></div>
<div className="w-[1px] h-[20px] bg-[#d1d5db] mt-[20px]"></div>
)}

{/* Normal vertical Line connector */}
{nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
<div
style={{
width: "1px",
backgroundColor: "#d1d5db",
alignSelf: "stretch",
}}
></div>
<div className="w-[1px] bg-[#d1d5db] self-stretch"></div>
)}

{/* Half vertical line for the last prereq in the list */}
{nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
<div
style={{
width: "1px",
height: "20px",
backgroundColor: "#d1d5db",
marginBottom: "20px",
}}
></div>
<div className="w-[1px] h-[20px] bg-[#d1d5db] mb-[20px]"></div>
)}

{/* Render child nodes recursively */}
Expand All @@ -115,20 +67,12 @@ export const PreReqCourses = ({ courseID }: Props) => {
{childNodes.length > 0 ? (
renderTree(childNodes)
) : (
<div
style={{
fontStyle: "italic",
color: "#000000",
textAlign: "center",
fontSize: "14px",
fontWeight: "bold",
}}
>
<div className="italic text-[#000000] text-center text-base font-bold">
No further prerequisites
</div>
)}
</div>
);
};

export default PreReqCourses;
export default PreReqCourses;
4 changes: 2 additions & 2 deletions apps/frontend/src/components/ReqTreeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ const ReqTreeCard: React.FC<ReqTreeCardProps> = ({ courseID, prereqs, postreqs,
<Card>
<Card.Header>Requisite Tree</Card.Header>
{hasNoRequisites ? (
<div style={{ fontStyle: "italic", color: "#6b7280", padding: "20px", textAlign: "center" }}>
<div className="italic text-[#6b7280] p-[20px] text-center">
There are no prerequisites, corequisites, or postrequisites for this course.
</div>
</div>
) : (
<ReqTreeDetail root={tree} />
)}
Expand Down
Loading

0 comments on commit d092d75

Please sign in to comment.