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: various UI updates

Browse source
This commit is contained in:
swve 2023-06-21 21:13:01 +02:00
parent 52bc9e556b
commit d5ad9e2f2f
10 changed files with 214 additions and 291 deletions
Download patch file Download diff file Expand all files Collapse all files

2
front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx
View file

@ -64,7 +64,7 @@ function Canva(props: Editor) {
const CanvaWrapper = styled.div`
padding-top: 20px;
width: 1300px;
width: 100%;
margin: 0 auto;
`;

2
front/components/Pages/CourseEdit/Draggables/Activity.tsx
View file

@ -11,7 +11,7 @@ function Activity(props: any) {
<Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
{(provided) => (
<div
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2 w-auto" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
<p>{props.activity.name} </p>
<Link
href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}

31
front/components/Pages/CourseEdit/Draggables/Chapter.tsx
View file

@ -2,6 +2,7 @@ import React from "react";
import styled from "styled-components";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Activity from "./Activity";
import { PlusSquare } from "lucide-react";
function Chapter(props: any) {
return (
@ -16,16 +17,9 @@ function Chapter(props: any) {
>
<h3 className="pt-3 font-bold text-md">
{props.info.list.chapter.name}
<button
onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id);
}}
>
Create Activity
</button>
<button
onClick={() => {
props.deleteChapter(props.info.list.chapter.id);
@ -37,13 +31,24 @@ function Chapter(props: any) {
<Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
{(provided) => (
<ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
{props.info.list.activities.map((activity: any, index: any) => (
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
))}
{provided.placeholder}
<div className="flex flex-col ">
{props.info.list.activities.map((activity: any, index: any) => (
<Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
))}
{provided.placeholder}
<div onClick={() => {
props.openNewActivityModal(props.info.list.chapter.id);
}} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center outline outline-3 text-slate-500 outline-slate-200 bg-slate-50 hover:cursor-pointer">
<PlusSquare className="" size={17} />
<div className="text-sm mx-auto my-auto items-center font-bold">Add Activity</div>
</div>
</div>
</ActivitiesList>
)}
</Droppable>
</ChapterWrapper>
)}
</Draggable>

73
front/components/Pages/Courses/ActivityIndicators.tsx Normal file
View file

@ -0,0 +1,73 @@
import ToolTip from '@components/UI/Tooltip/Tooltip'
import { getUriWithOrg } from '@services/config/config'
import Link from 'next/link'
import React from 'react'
interface Props {
course: any
orgslug: string
current_activity?: any
}
function ActivityIndicators(props: Props) {
const course = props.course
const orgslug = props.orgslug
const courseid = course.course.course_id.replace("course_", "")
const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
const black_activity_style = 'bg-black hover:bg-gray-700'
const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
function isActivityDone(activity: any) {
if (course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing") {
return true
}
return false
}
function isActivityCurrent(activity: any) {
let activityid = activity.id.replace("activity_", "")
if (props.current_activity && props.current_activity == activityid) {
return true
}
return false
}
function getActivityClass(activity: any) {
if (isActivityDone(activity)) {
return done_activity_style
}
if (isActivityCurrent(activity)) {
return current_activity_style
}
return black_activity_style
}
return (
<div className='grid grid-flow-col justify-stretch space-x-6'>
{course.chapters.map((chapter: any) => {
return (
<>
<div className='grid grid-flow-col justify-stretch space-x-2'>
{chapter.activities.map((activity: any) => {
return (
<ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
<div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
</Link>
</ToolTip>
);
})}
</div>
</>
);
})}
</div>
)
}
export default ActivityIndicators