diff --git a/.gitignore b/.gitignore index 60e1bcdd..91c46fb8 100644 --- a/.gitignore +++ b/.gitignore @@ -21,7 +21,6 @@ dist/ downloads/ eggs/ .eggs/ -lib/ lib64/ parts/ sdist/ diff --git a/front/app/_orgs/[orgslug]/collections/new/page.tsx b/front/app/_orgs/[orgslug]/collections/new/page.tsx index 609da319..0a1c0b50 100644 --- a/front/app/_orgs/[orgslug]/collections/new/page.tsx +++ b/front/app/_orgs/[orgslug]/collections/new/page.tsx @@ -57,7 +57,7 @@ function NewCollection(params : any) { }, [params.params.orgslug]); return ( - + <> Add new
@@ -90,7 +90,7 @@ function NewCollection(params : any) {
- + ); } diff --git a/front/app/_orgs/[orgslug]/collections/page.tsx b/front/app/_orgs/[orgslug]/collections/page.tsx index ddcffa93..3207daec 100644 --- a/front/app/_orgs/[orgslug]/collections/page.tsx +++ b/front/app/_orgs/[orgslug]/collections/page.tsx @@ -35,7 +35,7 @@ function Collections(params:any) { }, []); return ( - + <> {orgslug} Collections :{" "} <Link href={"/collections/new"}> @@ -61,7 +61,7 @@ function Collections(params:any) { ))} </div> )} - </Layout> + </> ); } diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx index 8100a8a7..1ea53a4f 100644 --- a/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx +++ b/front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx @@ -225,7 +225,7 @@ function CourseEdit(params: any) { }; return ( - <Layout> + <> <Header></Header> <Title> Edit Course Chapters{" "} @@ -283,7 +283,7 @@ function CourseEdit(params: any) { </DragDropContext> </ChapterlistWrapper> )} - </Layout> + </> ); } diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx index d94769dd..e7c5b83b 100644 --- a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx +++ b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx @@ -1,19 +1,14 @@ + "use client"; import { default as React, useEffect, useRef } from "react"; -import Layout from "../../../../../../../../components/UI/Layout"; -import { Title } from "../../../../../../../../components/UI/Elements/Styles/Title"; -import dynamic from "next/dynamic"; + import { useRouter } from "next/navigation"; import { getElement } from "../../../../../../../../services/courses/elements"; import AuthProvider from "../../../../../../../../components/Security/AuthProvider"; import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper"; import { getCourseMetadata } from "../../../../../../../../services/courses/courses"; -// Workaround (Next.js SSR doesn't support tip tap editor) -const Editor: any = dynamic(() => import("../../../../../../../../components/Editor/EditorWrapper") as any, { - ssr: false, -}); function EditElement(params: any) { const router = useRouter(); diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx index 0ddb9693..572ed1e9 100644 --- a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx +++ b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx @@ -1,50 +1,157 @@ "use client"; import { useRouter } from "next/navigation"; +import Link from "next/link"; import React, { useMemo } from "react"; import Layout from "../../../../../../../components/UI/Layout"; import { getElement } from "../../../../../../../services/courses/elements"; import { getBackendUrl } from "../../../../../../../services/config"; -import Canva from "../../../../../../../components/Canva/Canva"; +import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva"; +import styled from "styled-components"; +import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses"; +import VideoLecture from "@components/LectureViews/Video/Video"; function ElementPage(params: any) { const router = useRouter(); const elementid = params.params.elementid; + const courseid = params.params.courseid; + const orgslug = params.params.orgslug; const [element, setElement] = React.useState<any>({}); + const [course, setCourse] = React.useState<any>({}); const [isLoading, setIsLoading] = React.useState(true); async function fetchElementData() { + setIsLoading(true); const element = await getElement("element_" + elementid); setElement(element); + } + + async function fetchCourseData() { + const course = await getCourseMetadata("course_" + courseid); + setCourse(course); setIsLoading(false); } React.useEffect(() => { if (elementid) { fetchElementData(); + fetchCourseData(); } return () => {}; // eslint-disable-next-line react-hooks/exhaustive-deps }, [elementid]); return ( - <Layout> + <> {isLoading ? ( <div>Loading...</div> ) : ( - <div> - <p>element</p> - <h1>{element.name} </h1> - <hr /> + <LectureLayout> + <LectureTopWrapper> + <LectureThumbnail> + <Link href={`/org/${orgslug}/course/${courseid}`}> + <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" /> + </Link> + </LectureThumbnail> + <LectureInfo> + <p>Course</p> + <h1>{course.course.name}</h1> + </LectureInfo> + </LectureTopWrapper> + <ChaptersWrapper> + {course.chapters.map((chapter: any) => { + return ( + <> + <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}> + {chapter.elements.map((element: any) => { + return ( + <> + <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}> + <ChapterIndicator key={element.id} /> + </Link>{" "} + </> + ); + })} + </div> +      + </> + ); + })} + </ChaptersWrapper> - {element.type == "dynamic" && <Canva content= {element.content} element={element}/>} - {/* todo : use apis & streams instead of this */} - {element.type == "video" && ( - <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video> - )} - </div> + <CourseContent> + {element.type == "dynamic" && <Canva content={element.content} element={element} />} + {/* todo : use apis & streams instead of this */} + {element.type == "video" && <VideoLecture course={course} element={element} />} + </CourseContent> + </LectureLayout> )} - </Layout> + </> ); } +const LectureLayout = styled.div``; + +const LectureThumbnail = styled.div` + padding-right: 30px; + justify-self: center; + img { + box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42); + border-radius: 7px; + width: 100px; + height: 57px; + } +`; +const LectureInfo = styled.div` + h1 { + margin-top: 0px; + } + + p { + margin-top: 0; + margin-bottom: 0; + font-weight: 700; + } +`; + +const ChaptersWrapper = styled.div` + display: flex; + // row + flex-direction: row; + justify-content: space-around; + width: 100%; + width: 1300px; + margin: 0 auto; +`; + +const ChapterIndicator = styled.div` + border-radius: 20px; + height: 5px; + background: #151515; + border-radius: 3px; + + width: 35px; + background-color: black; + margin: 10px; + margin-bottom: 0px; + margin-left: 0px; + transition: all 0.2s ease; + + &:hover { + width: 50px; + cursor: pointer; + } +`; + +const LectureTopWrapper = styled.div` + width: 1300px; + padding-top: 50px; + margin: 0 auto; + display: flex; +`; + +const CourseContent = styled.div` + display: flex; + background-color: white; + min-height: 600px; +`; export default ElementPage; diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx index 964be16e..8a3273b6 100644 --- a/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx +++ b/front/app/_orgs/[orgslug]/course/[courseid]/page.tsx @@ -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); } @@ -34,7 +33,7 @@ const CourseIdPage = (params : any) => { }, [courseid && orgslug]); return ( - <Layout> + <> {isLoading ? ( <div>Loading...</div> ) : ( @@ -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>{" "} - </>; - })} -      - </>; + return ( + <> + {chapter.elements.map((element: any) => { + return ( + <> + <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}> + <ChapterIndicator /> + </Link>{" "} + </> + ); + })} +      + </> + ); })} </ChaptersWrapper> @@ -75,48 +70,54 @@ 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> - </>; - })} -      - </>; - })} + <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> + </> + ); + })} +      + </> + ); + })} + </BoxWrapper> </CoursePageLayout> )} - </Layout> + </> ); }; 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; diff --git a/front/app/_orgs/[orgslug]/courses/new/page.tsx b/front/app/_orgs/[orgslug]/courses/new/page.tsx index 971ab532..a05ad43c 100644 --- a/front/app/_orgs/[orgslug]/courses/new/page.tsx +++ b/front/app/_orgs/[orgslug]/courses/new/page.tsx @@ -1,3 +1,4 @@ +"use client"; import { useRouter } from "next/navigation"; import React from "react"; import { Header } from "../../../../../components/UI/Header"; @@ -55,8 +56,7 @@ const NewCoursePage = (params: any) => { return ( - <Layout title="New course"> - <Header></Header> + <> <Title>New Course
Name :
@@ -64,7 +64,7 @@ const NewCoursePage = (params: any) => { Cover Photo :
Learnings (empty for now) (separated by ; ) :