Skip to content

Merge Staging #110

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
brueningf merged 6 commits into from
Feb 19, 2025
Merged

Merge Staging #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eb32a2c
fix layout
brueningf Feb 19, 2025
92f238c
wip: layout fix
brueningf Feb 19, 2025
05c76fc
fix code styling
brueningf Feb 19, 2025
ad947fa
wip: layout fix
brueningf Feb 19, 2025
275b16c
Merge branch 'staging' into staging
brueningf Feb 19, 2025
f44f845
Merge pull request #109 from brueningf/staging
brueningf Feb 19, 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
19 changes: 15 additions & 4 deletions frontend/src/app/courses/[slug]/EnrollButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ import Link from "next/link";
import { Check, KeyboardArrowRight } from "@mui/icons-material";
import { EnrollmentStatus } from "@prisma/client";
import { AssignmentIcon } from "./AssignmentIcon";

export default function EnrollButton() {
function truncateString(str, lim) {
return str.length > lim
? str.slice(0, lim > 3 ? lim - 3 : lim) + "..."
: str;
}
export default function EnrollButton({ compact }: { compact?: boolean }) {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState<string>("Start learning!");
const { data: session } = useSession();
Expand Down Expand Up @@ -127,8 +131,15 @@ export default function EnrollButton() {
<AssignmentIcon
type={actualNextAssignment?.type || "READING"}
/>
<p className="pl-2 text-lg font-bold">
{actualNextAssignment?.title}
<p
className={`pl-2 font-bold ${compact ? "text-sm ellipsis" : "text-lg"}`}
>
{compact
? truncateString(
actualNextAssignment?.title,
16,
)
: actualNextAssignment?.title}
</p>
</div>
</div>
Expand Down
44 changes: 25 additions & 19 deletions frontend/src/components/Course/HorizontalCourseCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
<CoursePageContext.Provider
value={{ course, enrolled: enrollment, setEnrolled }}
>
<article className="flex flex-col md:flex-row lg:w-4/5 lg:h-56 border-2 rounded-lg bg-white overflow-hidden">
<figure className="relative w-full h-72 lg:h-full md:w-1/4 md:min-w-64 mb-2 md:mb-0 overflow-hidden">
<article className="flex flex-col md:flex-row border-2 rounded-lg bg-white overflow-hidden">
<figure className="relative w-full min-h-32 md:w-1/4 md:min-w-64 mb-2 md:mb-0 overflow-hidden">
<img
src={course.thumbnail}
alt={course.title}
Expand All @@ -37,24 +37,30 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
</div>

<div className="w-full mb-4 md:flex justify-between gap-4 lg:items-center">
<div className="flex-1 md:pr-4">
<div className="w-2/3 md:pr-4 clip max-h-24">
{course.shortDescription}
</div>
{completed ? (
<Link
className="max-w-fit lg:w-full p-6 text-center rounded-md font-semibold text-lg text-slate-100 dark:text-slate-800 bg-slate-700 dark:bg-slate-400"
href={
"/certificates/" +
enrollment.certificate?.id
}
>
View certificate
</Link>
) : (
<Link className="" href={`/courses/${course.slug}`}>
<EnrollButton />
</Link>
)}

<div className="w-1/3">
{completed ? (
<Link
className="max-w-fit lg:w-full button"
href={
"/certificates/" +
enrollment.certificate?.id
}
>
View certificate
</Link>
) : (
<Link
className=""
href={`/courses/${course.slug}`}
>
<EnrollButton compact={true} />
</Link>
)}
</div>
</div>

{completed ? (
Expand All @@ -66,7 +72,7 @@ const HorizontalCourseCard = ({ enrollment }: { enrollment: Enrollment }) => {
</span>
</div>
) : (
<div className="">
<div className="mt-2">
<ProgressBar />
</div>
)}
Expand Down