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

feat: improve chapters and courses indicators

Browse source
This commit is contained in:
swve 2023-04-24 22:51:33 +02:00
parent 1a173964fe
commit 76324bc257
5 changed files with 60 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

28
front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx
View file

@ -12,6 +12,7 @@ import useSWR, { mutate } from "swr";
import { Check } from "lucide-react"; import { Check } from "lucide-react";
import { swrFetcher } from "@services/utils/ts/requests"; import { swrFetcher } from "@services/utils/ts/requests";
import { markActivityAsComplete } from "@services/courses/activity"; import { markActivityAsComplete } from "@services/courses/activity";
import ToolTip from "@components/UI/Tooltip/Tooltip";
function ActivityPage(params: any) { function ActivityPage(params: any) {
const activityid = params.params.activityid; const activityid = params.params.activityid;
@ -37,7 +38,7 @@ function ActivityPage(params: any) {
<ActivityLayout> <ActivityLayout>
<ActivityTopWrapper> <ActivityTopWrapper>
<ActivityThumbnail> <ActivityThumbnail>
<Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}`}> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
<img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" /> <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
</Link> </Link>
</ActivityThumbnail> </ActivityThumbnail>
@ -53,11 +54,14 @@ function ActivityPage(params: any) {
<div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}> <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
{chapter.activities.map((activity: any) => { {chapter.activities.map((activity: any) => {
return ( return (
<> <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
<Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
<ChapterIndicator key={activity.id} /> <ChapterIndicator
</Link>{" "} done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
</> active={"activity_" + activityid === activity.id ? true : false} key={activity.id}
/>
</Link>
</ToolTip>
); );
})} })}
</div> </div>
@ -76,8 +80,8 @@ function ActivityPage(params: any) {
<ActivityMarkerWrapper> <ActivityMarkerWrapper>
{course.trail.activities_marked_complete && {course.trail.activities_marked_complete &&
course.trail.activities_marked_complete.includes("activity_" + activityid) && course.trail.activities_marked_complete.includes("activity_" + activityid) &&
course.trail.status == "ongoing" ? ( course.trail.status == "ongoing" ? (
<button style={{ backgroundColor: "green" }}> <button style={{ backgroundColor: "green" }}>
<i> <i>
<Check size={20}></Check> <Check size={20}></Check>
@ -131,28 +135,26 @@ const ChaptersWrapper = styled.div`
display: flex; display: flex;
// row // row
flex-direction: row; flex-direction: row;
justify-content: space-around;
width: 100%; width: 100%;
width: 1300px; width: 1300px;
margin: 0 auto; margin: 0 auto;
`; `;
const ChapterIndicator = styled.div` const ChapterIndicator = styled.div < { active?: boolean, done?: boolean } > `
border-radius: 20px; border-radius: 20px;
height: 5px; height: 5px;
background: #151515; background: #151515;
border-radius: 3px; border-radius: 3px;
width: 35px; width: 35px;
background-color: black; background-color: ${props => props.done ? "green" : (props.active ? "#9d9d9d" : "black")};
margin: 10px; margin: 10px;
margin-bottom: 0px; margin-bottom: 0px;
margin-left: 0px; margin-left: 0px;
transition: all 0.2s ease;
&:hover { &:hover {
width: 50px;
cursor: pointer; cursor: pointer;
background-color: #9d9d9d;
} }
`; `;

38
front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
View file

@ -8,6 +8,7 @@ import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
import { swrFetcher } from "@services/utils/ts/requests"; import { swrFetcher } from "@services/utils/ts/requests";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import ToolTip from "@components/UI/Tooltip/Tooltip";
const CourseIdPage = (params: any) => { const CourseIdPage = (params: any) => {
const courseid = params.params.courseid; const courseid = params.params.courseid;
@ -54,18 +55,22 @@ const CourseIdPage = (params: any) => {
<ChaptersWrapper> <ChaptersWrapper>
{course.chapters.map((chapter: any) => { {course.chapters.map((chapter: any) => {
return ( return (
<> <ChapterSeparator key={chapter}>
{chapter.activities.map((activity: any) => { {chapter.activities.map((activity: any) => {
return ( return (
<> <>
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}> <ToolTip sideOffset={-18} slateBlack content={activity.name}>
<ChapterIndicator /> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
</Link>{" "} <CourseIndicator
done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
/>
</Link>
</ToolTip>
</> </>
); );
})} })}
&nbsp;&nbsp;&nbsp;&nbsp; </ChapterSeparator>
</>
); );
})} })}
</ChaptersWrapper> </ChaptersWrapper>
@ -93,12 +98,12 @@ const CourseIdPage = (params: any) => {
{course.chapters.map((chapter: any) => { {course.chapters.map((chapter: any) => {
return ( return (
<> <>
<h3>Chapter : {chapter.name}</h3> <h3>{chapter.name}</h3>
{chapter.activities.map((activity: any) => { {chapter.activities.map((activity: any) => {
return ( return (
<> <>
<p> <p>
Activity {activity.name} {activity.name}
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer"> <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
<EyeOpenIcon /> <EyeOpenIcon />
</Link>{" "} </Link>{" "}
@ -161,28 +166,33 @@ const CoursePageLayout = styled.div`
const ChaptersWrapper = styled.div` const ChaptersWrapper = styled.div`
display: flex; display: flex;
justify-content: space-around;
width: 100%; width: 100%;
`; `;
const ChapterIndicator = styled.div` const CourseIndicator = styled.div< { active?: boolean, done?: boolean } >`
border-radius: 20px; border-radius: 20px;
height: 5px; height: 5px;
background: #151515; background: #151515;
border-radius: 3px; border-radius: 3px;
width: 35px; background-color: ${props => props.done ? "green" : "black"};
background-color: black;
width: 40px;
margin: 10px; margin: 10px;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 0px; margin-left: 0px;
transition: all 0.2s ease;
&:hover { &:hover {
width: 50px;
cursor: pointer; cursor: pointer;
background-color: #9d9d9d;
} }
`; `;
const ChapterSeparator = styled.div`
display: flex;
flex-direction: row;
padding-right: 7px;
`;
const BoxWrapper = styled.div` const BoxWrapper = styled.div`
background: #ffffff; background: #ffffff;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);

1
front/components/Editor/Editor.tsx
View file

@ -20,7 +20,6 @@ import Youtube from "@tiptap/extension-youtube";
import VideoBlock from "./Extensions/Video/VideoBlock"; import VideoBlock from "./Extensions/Video/VideoBlock";
import { Save } from "lucide-react"; import { Save } from "lucide-react";
import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock"; import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
import PDFBlockComponent from "./Extensions/PDF/PDFBlockComponent";
import PDFBlock from "./Extensions/PDF/PDFBlock"; import PDFBlock from "./Extensions/PDF/PDFBlock";
import QuizBlock from "./Extensions/Quiz/QuizBlock"; import QuizBlock from "./Extensions/Quiz/QuizBlock";

2
front/components/Editor/Toolbar/ToolbarButtons.tsx
View file

@ -56,7 +56,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
<option value="6">Heading 6</option> <option value="6">Heading 6</option>
</ToolSelect> </ToolSelect>
{/* TODO: fix this : toggling only works one-way */} {/* TODO: fix this : toggling only works one-way */}
<DividerVerticalIcon style={{margin:"auto", color : "grey"}}/> <DividerVerticalIcon style={{marginTop:"auto", marginBottom:"auto", color : "grey"}}/>
<ToolTip content={"Info Callout"}> <ToolTip content={"Info Callout"}>
<ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}> <ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}>
<AlertCircle size={15} /> <AlertCircle size={15} />

22
front/components/UI/Tooltip/Tooltip.tsx
View file

@ -5,22 +5,24 @@ import { violet, blackA } from '@radix-ui/colors';
import { PlusIcon } from '@radix-ui/react-icons'; import { PlusIcon } from '@radix-ui/react-icons';
type TooltipParams = { type TooltipProps = {
sideOffset?: number; sideOffset?: number;
content: React.ReactNode; content: React.ReactNode;
children: React.ReactNode; children: React.ReactNode;
slateBlack?: boolean;
}; };
const ToolTip = (params: TooltipParams) => { const ToolTip = (props: TooltipProps) => {
return ( return (
<Tooltip.Provider delayDuration={200}> <Tooltip.Provider delayDuration={200}>
<Tooltip.Root> <Tooltip.Root>
<Tooltip.Trigger asChild> <Tooltip.Trigger asChild>
{params.children} {props.children}
</Tooltip.Trigger> </Tooltip.Trigger>
<Tooltip.Portal> <Tooltip.Portal>
<TooltipContent side="bottom" sideOffset={params.sideOffset}> <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
{params.content} {props.content}
<TooltipArrow /> <TooltipArrow />
</TooltipContent> </TooltipContent>
</Tooltip.Portal> </Tooltip.Portal>
@ -55,6 +57,16 @@ const closeAndFade = keyframes({
}); });
const TooltipContent = styled(Tooltip.Content, { const TooltipContent = styled(Tooltip.Content, {
variants : {
slateBlack: {
true: {
backgroundColor:" #5a5a5a",
color: 'white',
},
},
},
borderRadius: 4, borderRadius: 4,
padding: '5px 10px', padding: '5px 10px',
fontSize: 12, fontSize: 12,