rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update course ui

Browse source
This commit is contained in:
swve 2023-01-11 23:06:32 +01:00
parent b1d0ece5cd
commit b7ef575d83
2 changed files with 98 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

141
front/app/_orgs/[orgslug]/course/[courseid]/page.tsx
View file

@ -8,7 +8,7 @@ import Layout from "../../../../../components/UI/Layout";
import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses";
const CourseIdPage = (params : any) => {
const CourseIdPage = (params: any) => {
const router = useRouter();
const courseid = params.params.courseid;
const orgslug = params.params.orgslug;
@ -21,7 +21,6 @@ const CourseIdPage = (params : any) => {
setCourseInfo(course);
setIsLoading(false);
}
@ -43,30 +42,26 @@ const CourseIdPage = (params : any) => {
<p>Course</p>
<h1>
{courseInfo.course.name}{" "}
<Link
href={`/org/${orgslug}/course/${courseid}/edit`}
rel="noopener noreferrer">
<Link href={`/org/${orgslug}/course/${courseid}/edit`} rel="noopener noreferrer">
<Pencil2Icon />
</Link>{" "}
</h1>
<br />
<ChaptersWrapper>
{courseInfo.chapters.map((chapter: any) => {
return <>
{chapter.elements.map((element: any) => {
return <>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<ChapterIndicator />
</Link>{" "}
</>;
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>;
return (
<>
{chapter.elements.map((element: any) => {
return (
<>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<ChapterIndicator />
</Link>{" "}
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>
);
})}
</ChaptersWrapper>
@ -75,34 +70,40 @@ const CourseIdPage = (params : any) => {
</CourseThumbnailWrapper>
<h2>Description</h2>
<p>{courseInfo.course.description}</p>
<BoxWrapper>
<p>{courseInfo.course.description}</p>
</BoxWrapper>
<h2>What you will learn</h2>
<p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
<BoxWrapper>
<p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
</BoxWrapper>
<h2>Course Lessons</h2>
{courseInfo.chapters.map((chapter: any) => {
return <>
<h3>Chapter : {chapter.name}</h3>
{chapter.elements.map((element: any) => {
return <>
<p>
Element {element.name}
<Link
href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}
rel="noopener noreferrer">
<EyeOpenIcon />
</Link>{" "}
</p>
</>;
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>;
})}
<BoxWrapper>
{courseInfo.chapters.map((chapter: any) => {
return (
<>
<h3>Chapter : {chapter.name}</h3>
{chapter.elements.map((element: any) => {
return (
<>
<p>
Element {element.name}
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`} rel="noopener noreferrer">
<EyeOpenIcon />
</Link>{" "}
</p>
</>
);
})}
&nbsp;&nbsp;&nbsp;&nbsp;
</>
);
})}
</BoxWrapper>
</CoursePageLayout>
)}
</Layout>
@ -111,12 +112,12 @@ const CourseIdPage = (params : any) => {
const CourseThumbnailWrapper = styled.div`
display: flex;
padding-bottom: 20px;
img {
width: 794px;
height: 224.28px;
width: 100%;
height: 300px;
object-fit: cover;
object-position: top;
object-position: center;
background: url(), #d9d9d9;
border: 1px solid rgba(255, 255, 255, 0.19);
box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
@ -124,21 +125,39 @@ const CourseThumbnailWrapper = styled.div`
}
`;
const CoursePageLayout = styled.div`
margin-left: 40px;
margin-right: 40px;
width: 1300px;
margin: 0 auto;
p {
margin-bottom: 0px;
letter-spacing: -0.05em;
color: #727272;
font-weight: 700;
}
h1 {
margin-top: 5px;
letter-spacing: -0.05em;
margin-bottom: 10px;
}
`;
const ChaptersWrapper = styled.div`
display: flex;
justify-content: space-around;
width: 100%;
`;
const ChapterIndicator = styled.div`
border-radius: 20px;
height: 5px;
background: #151515;
border-radius: 3px;
width: 40px;
width: 35px;
background-color: black;
margin: 10px;
margin-bottom: 20px;
margin-left: 0px;
transition: all 0.2s ease;
@ -148,4 +167,24 @@ const ChapterIndicator = styled.div`
}
`;
const BoxWrapper = styled.div`
background: #ffffff;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
border-radius: 7px;
padding: 20px;
padding-top: 7px;
padding-left: 30px;
p {
font-family: "DM Sans";
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: -0.02em;
color: #9d9d9d;
}
`;
export default CourseIdPage;

17
front/app/layout.tsx
View file

@ -1,15 +1,14 @@
import '../styles/globals.css'
import StyledComponentsRegistry from '../services/lib/styled-registry'
import "../styles/globals.css";
import StyledComponentsRegistry from "../services/lib/styled-registry";
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head />
<body> <StyledComponentsRegistry>{children}</StyledComponentsRegistry></body>
<body>
{" "}
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
)
);
}