mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add mobile dashboard menu, make dashboard pages responsive
This commit is contained in:
swve
parent
56d2007181
commit
3014817d95
13 changed files with 416 additions and 340 deletions
|
|
@ -50,14 +50,14 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
{courseStructure && (
|
||||
<div>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
<div className="mx-4 sm:mx-10 bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-lg sm:text-xl text-gray-800">Access to the course</h1>
|
||||
<h2 className="text-gray-500 text-xs sm:text-sm">
|
||||
Choose if you want your course to be publicly available on the internet or only accessible to signed in users
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto mb-3">
|
||||
<div className="flex flex-col sm:flex-row sm:space-x-2 space-y-2 sm:space-y-0 mx-auto mb-3">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Change to Public"
|
||||
confirmationMessage="Are you sure you want this course to be publicly available on the internet?"
|
||||
|
|
@ -69,12 +69,12 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
Active
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Globe className="text-slate-400" size={40} />
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full p-2 sm:p-4">
|
||||
<Globe className="text-slate-400" size={32} />
|
||||
<div className="text-xl sm:text-2xl text-slate-700 font-bold">
|
||||
Public
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
<div className="text-gray-400 text-sm sm:text-md tracking-tight w-full sm:w-[500px] leading-5 text-center">
|
||||
The Course is publicly available on the internet, it is indexed by search engines and can be accessed by anyone
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,12 +94,12 @@ function EditCourseAccess(props: EditCourseAccessProps) {
|
|||
Active
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full">
|
||||
<Users className="text-slate-400" size={40} />
|
||||
<div className="text-2xl text-slate-700 font-bold">
|
||||
<div className="flex flex-col space-y-1 justify-center items-center h-full p-2 sm:p-4">
|
||||
<Users className="text-slate-400" size={32} />
|
||||
<div className="text-xl sm:text-2xl text-slate-700 font-bold">
|
||||
Users Only
|
||||
</div>
|
||||
<div className="text-gray-400 text-md tracking-tight w-[500px] leading-5 text-center">
|
||||
<div className="text-gray-400 text-sm sm:text-md tracking-tight w-full sm:w-[500px] leading-5 text-center">
|
||||
The Course is only accessible to signed in users, additionally you can choose which UserGroups can access this course
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -139,42 +139,44 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">UserGroups</h1>
|
||||
<h2 className="text-gray-500 text-sm">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-3 sm:px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-lg sm:text-xl text-gray-800">UserGroups</h1>
|
||||
<h2 className="text-gray-500 text-xs sm:text-sm">
|
||||
You can choose to give access to this course to specific groups of users only by linking it to a UserGroup
|
||||
</h2>
|
||||
</div>
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Name</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{usergroups?.map((usergroup: any) => (
|
||||
<tr key={usergroup.invite_code_uuid} className="border-b border-gray-100 text-sm">
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Link"
|
||||
confirmationMessage="Users from this UserGroup will no longer have access to this course"
|
||||
dialogTitle="Unlink UserGroup?"
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span>Delete link</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => removeUserGroupLink(usergroup.id)}
|
||||
status="warning"
|
||||
/>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Name</th>
|
||||
<th className="py-3 px-4">Actions</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{usergroups?.map((usergroup: any) => (
|
||||
<tr key={usergroup.invite_code_uuid} className="border-b border-gray-100 text-sm">
|
||||
<td className="py-3 px-4">{usergroup.name}</td>
|
||||
<td className="py-3 px-4">
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Link"
|
||||
confirmationMessage="Users from this UserGroup will no longer have access to this course"
|
||||
dialogTitle="Unlink UserGroup?"
|
||||
dialogTrigger={
|
||||
<button className="mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-rose-700 rounded-md font-bold items-center text-sm text-rose-100">
|
||||
<X className="w-4 h-4" />
|
||||
<span>Delete link</span>
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => removeUserGroupLink(usergroup.id)}
|
||||
status="warning"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex flex-row-reverse mt-3 mr-2">
|
||||
<Modal
|
||||
isDialogOpen={userGroupModal}
|
||||
|
|
@ -185,8 +187,8 @@ function UserGroupsSection({ usergroups }: { usergroups: any[] }) {
|
|||
dialogTitle="Link Course to a UserGroup"
|
||||
dialogDescription="Choose a UserGroup to link this course to. Users from this UserGroup will have access to this course."
|
||||
dialogTrigger={
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100">
|
||||
<SquareUserRound className="w-4 h-4" />
|
||||
<button className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-xs sm:text-sm text-green-100">
|
||||
<SquareUserRound className="w-3 h-3 sm:w-4 sm:h-4" />
|
||||
<span>Link to a UserGroup</span>
|
||||
</button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { deleteAssignmentUsingActivityUUID, getAssignmentFromActivityUUID } from
|
|||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useCourse } from '@components/Contexts/CourseContext'
|
||||
import toast from 'react-hot-toast'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
type ActivitiyElementProps = {
|
||||
orgslug: string
|
||||
|
|
@ -50,6 +51,7 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
string | undefined
|
||||
>(undefined)
|
||||
const activityUUID = props.activity.activity_uuid
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
|
||||
async function deleteActivityUI() {
|
||||
const toast_loading = toast.loading('Deleting activity...')
|
||||
|
|
@ -110,14 +112,14 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="flex flex-row py-2 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 hover:shadow space-x-1 items-center ring-1 ring-inset ring-gray-400/10 shadow-sm"
|
||||
className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center ring-1 ring-inset ring-gray-400/10 nice-shadow"
|
||||
key={props.activity.id}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{/* Activity Type Icon */}
|
||||
<ActivityTypeIndicator activityType={props.activity.activity_type} />
|
||||
<ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
|
||||
|
||||
{/* Centered Activity Name */}
|
||||
<div className="grow items-center space-x-2 flex mx-auto justify-center">
|
||||
|
|
@ -143,13 +145,11 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
onClick={() => updateActivityName(props.activity.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save
|
||||
size={12}
|
||||
/>
|
||||
<Save size={12} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="first-letter:uppercase"> {props.activity.name} </p>
|
||||
<p className="first-letter:uppercase text-center sm:text-left"> {props.activity.name} </p>
|
||||
)}
|
||||
<Pencil
|
||||
onClick={() => setSelectedActivity(props.activity.id)}
|
||||
|
|
@ -157,65 +157,60 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Edit and View Button */}
|
||||
<div className="flex basis-1/2 justify-end">
|
||||
<div className="flex flex-row space-x-2">
|
||||
<ActivityElementOptions activity={props.activity} />
|
||||
{/* Publishing */}
|
||||
<div
|
||||
className={`hover:cursor-pointer p-1 px-3 border shadow-lg rounded-md font-bold text-xs flex items-center space-x-1 ${!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 shadow-green-900/10'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 shadow-gray-900/10'
|
||||
}`}
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
{!props.activity.published ? (
|
||||
<Globe strokeWidth={2} size={12} className="text-green-600" />
|
||||
) : (
|
||||
<Lock strokeWidth={2} size={12} className="text-gray-600" />
|
||||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</div>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-cyan-900/10 shadow-lg rounded-md font-bold text-xs flex items-center space-x-1"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={12} className="text-sky-600" />
|
||||
<span>Preview</span>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Edit, View, Publish, and Delete Buttons */}
|
||||
<div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
|
||||
<ActivityElementOptions activity={props.activity} isMobile={isMobile} />
|
||||
{/* Publishing */}
|
||||
<button
|
||||
className={`p-1 px-2 sm:px-3 border shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 ${
|
||||
!props.activity.published
|
||||
? 'bg-gradient-to-bl text-green-800 from-green-400/50 to-lime-200/80 border-green-600/10 hover:from-green-500/50 hover:to-lime-300/80'
|
||||
: 'bg-gradient-to-bl text-gray-800 from-gray-400/50 to-gray-200/80 border-gray-600/10 hover:from-gray-500/50 hover:to-gray-300/80'
|
||||
}`}
|
||||
onClick={() => changePublicStatus()}
|
||||
>
|
||||
{!props.activity.published ? (
|
||||
<Globe strokeWidth={2} size={12} className="text-green-600" />
|
||||
) : (
|
||||
<Lock strokeWidth={2} size={12} className="text-gray-600" />
|
||||
)}
|
||||
<span>{!props.activity.published ? 'Publish' : 'Unpublish'}</span>
|
||||
</button>
|
||||
<Link
|
||||
href={
|
||||
getUriWithOrg(props.orgslug, '') +
|
||||
`/course/${props.course_uuid.replace(
|
||||
'course_',
|
||||
''
|
||||
)}/activity/${props.activity.activity_uuid.replace(
|
||||
'activity_',
|
||||
''
|
||||
)}`
|
||||
}
|
||||
prefetch
|
||||
className="p-1 px-2 sm:px-3 bg-gradient-to-bl text-cyan-800 from-sky-400/50 to-cyan-200/80 border border-cyan-600/10 shadow-md rounded-md font-bold text-xs flex items-center space-x-1 transition-colors duration-200 hover:from-sky-500/50 hover:to-cyan-300/80"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Eye strokeWidth={2} size={12} className="text-sky-600" />
|
||||
<span>Preview</span>
|
||||
</Link>
|
||||
{/* Delete Button */}
|
||||
<div className="flex flex-row pr-3 space-x-1 items-center">
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this activity ?"
|
||||
confirmationButtonText="Delete Activity"
|
||||
dialogTitle={'Delete ' + props.activity.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-5 bg-red-600 rounded-md"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
</div>
|
||||
<ConfirmationModal
|
||||
confirmationMessage="Are you sure you want to delete this activity ?"
|
||||
confirmationButtonText="Delete Activity"
|
||||
dialogTitle={'Delete ' + props.activity.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="p-1 px-2 sm:px-3 bg-red-600 rounded-md flex items-center space-x-1 shadow-md transition-colors duration-200 hover:bg-red-700"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
{!isMobile && <span className="text-rose-200 font-bold text-xs">Delete</span>}
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteActivityUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -242,11 +237,11 @@ const ACTIVITIES = {
|
|||
}
|
||||
}
|
||||
|
||||
const ActivityTypeIndicator = ({activityType} : { activityType: keyof typeof ACTIVITIES}) => {
|
||||
const ActivityTypeIndicator = ({activityType, isMobile} : { activityType: keyof typeof ACTIVITIES, isMobile: boolean}) => {
|
||||
const {displayName, Icon} = ACTIVITIES[activityType]
|
||||
|
||||
return (
|
||||
<div className="px-3 text-gray-300 space-x-1 w-28 flex">
|
||||
<div className={`px-3 text-gray-300 space-x-1 w-28 flex ${isMobile ? 'flex-col' : ''}`}>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<Icon className="size-4" />{' '}
|
||||
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">
|
||||
|
|
@ -257,7 +252,7 @@ const ActivityTypeIndicator = ({activityType} : { activityType: keyof typeof ACT
|
|||
)
|
||||
}
|
||||
|
||||
const ActivityElementOptions = ({ activity }: any) => {
|
||||
const ActivityElementOptions = ({ activity, isMobile }: { activity: any; isMobile: boolean }) => {
|
||||
const [assignmentUUID, setAssignmentUUID] = useState('');
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
|
|
@ -299,11 +294,11 @@ const ActivityElementOptions = ({ activity }: any) => {
|
|||
)}/edit`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
|
||||
target='_blank' // hotfix for an editor prosemirror bug
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-sky-700 rounded-md items-center`}
|
||||
target='_blank'
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> <span>Edit Page</span>
|
||||
<FilePenLine size={12} /> <span>Edit Page</span>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
|
|
@ -316,10 +311,10 @@ const ActivityElementOptions = ({ activity }: any) => {
|
|||
`/dash/assignments/${assignmentUUID}`
|
||||
}
|
||||
prefetch
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-teal-700 rounded-md items-center"
|
||||
className={`hover:cursor-pointer p-1 ${isMobile ? 'px-2' : 'px-3'} bg-teal-700 rounded-md items-center`}
|
||||
>
|
||||
<div className="text-sky-100 font-bold text-xs flex items-center space-x-1">
|
||||
<FilePenLine size={12} /> <span>Edit Assignment</span>
|
||||
<FilePenLine size={12} /> {!isMobile && <span>Edit Assignment</span>}
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
Pencil,
|
||||
Save,
|
||||
X,
|
||||
Trash2,
|
||||
} from 'lucide-react'
|
||||
import React from 'react'
|
||||
import { Draggable, Droppable } from 'react-beautiful-dnd'
|
||||
|
|
@ -71,27 +72,27 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 pt-6"
|
||||
className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
|
||||
key={props.chapter.chapter_uuid}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
<div className="flex font-bold text-md items-center space-x-2 pb-3">
|
||||
<div className="flex grow text-lg space-x-3 items-center rounded-md ">
|
||||
<div className="flex flex-wrap items-center justify-between pb-3">
|
||||
<div className="flex grow items-center space-x-2 mb-2 sm:mb-0">
|
||||
<div className="bg-neutral-100 rounded-md p-2">
|
||||
<Hexagon
|
||||
strokeWidth={3}
|
||||
size={16}
|
||||
className="text-neutral-600 "
|
||||
className="text-neutral-600"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-2 items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
{selectedChapter === props.chapter.id ? (
|
||||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-4 rounded-lg space-x-3">
|
||||
<div className="chapter-modification-zone bg-neutral-100 py-1 px-2 sm:px-4 rounded-lg flex items-center space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700"
|
||||
className="bg-transparent outline-none text-sm text-neutral-700 w-full max-w-[150px] sm:max-w-none"
|
||||
placeholder="Chapter name"
|
||||
value={
|
||||
modifiedChapter
|
||||
|
|
@ -109,14 +110,11 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
onClick={() => updateChapterName(props.chapter.id)}
|
||||
className="bg-transparent text-neutral-700 hover:cursor-pointer hover:text-neutral-900"
|
||||
>
|
||||
<Save
|
||||
size={15}
|
||||
onClick={() => updateChapterName(props.chapter.id)}
|
||||
/>
|
||||
<Save size={15} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-neutral-700 first-letter:uppercase">
|
||||
<p className="text-neutral-700 first-letter:uppercase text-sm sm:text-base">
|
||||
{props.chapter.name}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -127,23 +125,24 @@ function ChapterElement(props: ChapterElementProps) {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Chapter"
|
||||
confirmationMessage="Are you sure you want to delete this chapter?"
|
||||
dialogTitle={'Delete ' + props.chapter.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<div
|
||||
className=" hover:cursor-pointer p-1 px-4 bg-red-600 rounded-md shadow flex space-x-1 items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<X size={15} className="text-rose-200 font-bold" />
|
||||
<p>Delete Chapter</p>
|
||||
</div>
|
||||
}
|
||||
functionToExecute={() => deleteChapterUI()}
|
||||
status="warning"
|
||||
></ConfirmationModal>
|
||||
<div className="flex items-center space-x-2">
|
||||
<MoreVertical size={15} className="text-gray-300" />
|
||||
<ConfirmationModal
|
||||
confirmationButtonText="Delete Chapter"
|
||||
confirmationMessage="Are you sure you want to delete this chapter?"
|
||||
dialogTitle={'Delete ' + props.chapter.name + ' ?'}
|
||||
dialogTrigger={
|
||||
<button
|
||||
className="hover:cursor-pointer p-1 px-2 sm:px-3 bg-red-600 rounded-md shadow flex items-center text-rose-100 text-sm"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Trash2 size={15} className="text-rose-200" />
|
||||
</button>
|
||||
}
|
||||
functionToExecute={() => deleteChapterUI()}
|
||||
status="warning"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Droppable
|
||||
key={props.chapter.chapter_uuid}
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ function OrgEditGeneral() {
|
|||
useEffect(() => {}, [org])
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<div className="sm:ml-10 sm:mr-10 ml-0 mr-0 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 sm:mb-0 mb-16">
|
||||
<Toaster />
|
||||
<Formik
|
||||
enableReinitialize
|
||||
|
|
@ -107,8 +107,8 @@ function OrgEditGeneral() {
|
|||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<div className="flex space-x-8">
|
||||
<div className="max-w-md flex-grow">
|
||||
<div className="flex flex-col lg:flex-row lg:space-x-8">
|
||||
<div className="w-full lg:w-1/2 mb-8 lg:mb-0">
|
||||
<label className="block mb-2 font-bold" htmlFor="name">
|
||||
Name
|
||||
</label>
|
||||
|
|
@ -149,24 +149,24 @@ function OrgEditGeneral() {
|
|||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
className="w-full sm:w-auto px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col grow space-y-3">
|
||||
<Tabs defaultValue="logo" className="w-full ">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-20">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<Tabs defaultValue="logo" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-6 sm:mb-10">
|
||||
<TabsTrigger value="logo">Logo</TabsTrigger>
|
||||
<TabsTrigger value="thumbnail">Thumbnail</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="logo">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-4 sm:mx-10">
|
||||
<div className="flex flex-col justify-center items-center mt-6 sm:mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
className="w-[150px] sm:w-[200px] h-[75px] sm:h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localLogo || getOrgLogoMediaDirectory(org?.org_uuid, org?.logo_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -189,16 +189,16 @@ function OrgEditGeneral() {
|
|||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<p>Accepts PNG , JPG</p>
|
||||
<p>Accepts PNG, JPG</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="thumbnail">
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-4 sm:mx-10">
|
||||
<div className="flex flex-col justify-center items-center mt-6 sm:mt-10">
|
||||
<div
|
||||
className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
className="w-[150px] sm:w-[200px] h-[75px] sm:h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
|
||||
style={{ backgroundImage: `url(${localThumbnail || getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import AdminAuthorization from '@components/Security/AdminAuthorization'
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
|
||||
function LeftMenu() {
|
||||
function DashLeftMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
|
|
@ -176,4 +176,4 @@ function LeftMenu() {
|
|||
)
|
||||
}
|
||||
|
||||
export default LeftMenu
|
||||
export default DashLeftMenu
|
||||
69
apps/web/components/Dashboard/UI/DashMobileMenu.tsx
Normal file
69
apps/web/components/Dashboard/UI/DashMobileMenu.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
'use client'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { signOut } from 'next-auth/react'
|
||||
import { Backpack, BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
import AdminAuthorization from '@components/Security/AdminAuthorization'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
|
||||
function DashMobileMenu() {
|
||||
const org = useOrg() as any
|
||||
const session = useLHSession() as any
|
||||
|
||||
async function logOutUI() {
|
||||
const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
|
||||
if (res) {
|
||||
getUriWithOrg(org.slug, '/')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-black/90 backdrop-blur-lg text-white shadow-xl">
|
||||
<div className="flex justify-around items-center h-16 px-2">
|
||||
<AdminAuthorization authorizationMode="component">
|
||||
<ToolTip content={'Home'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/`} className="flex flex-col items-center p-2">
|
||||
<Home size={20} />
|
||||
<span className="text-xs mt-1">Home</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Courses'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/courses`} className="flex flex-col items-center p-2">
|
||||
<BookCopy size={20} />
|
||||
<span className="text-xs mt-1">Courses</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Assignments'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/assignments`} className="flex flex-col items-center p-2">
|
||||
<Backpack size={20} />
|
||||
<span className="text-xs mt-1">Assignments</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Users'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/users/settings/users`} className="flex flex-col items-center p-2">
|
||||
<Users size={20} />
|
||||
<span className="text-xs mt-1">Users</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
<ToolTip content={'Organization'} slateBlack sideOffset={8} side="top">
|
||||
<Link href={`/dash/org/settings/general`} className="flex flex-col items-center p-2">
|
||||
<School size={20} />
|
||||
<span className="text-xs mt-1">Org</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</AdminAuthorization>
|
||||
<ToolTip content={session.data.user.username + "'s Settings"} slateBlack sideOffset={8} side="top">
|
||||
<Link href={'/dash/user-account/settings/general'} className="flex flex-col items-center p-2">
|
||||
<Settings size={20} />
|
||||
<span className="text-xs mt-1">Settings</span>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashMobileMenu
|
||||
|
|
@ -40,7 +40,7 @@ function UserEditGeneral() {
|
|||
useEffect(() => { }, [session, session.data])
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5 sm:mb-0 mb-16">
|
||||
{session.data.user && (
|
||||
<Formik
|
||||
enableReinitialize
|
||||
|
|
@ -59,84 +59,53 @@ function UserEditGeneral() {
|
|||
}}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<div className="flex space-x-8">
|
||||
<Form className="max-w-md">
|
||||
<label className="block mb-2 font-bold" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="email"
|
||||
name="email"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="username">
|
||||
Username
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="username"
|
||||
name="username"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="first_name">
|
||||
First Name
|
||||
</label>
|
||||
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="first_name"
|
||||
name="first_name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="last_name">
|
||||
Last Name
|
||||
</label>
|
||||
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="last_name"
|
||||
name="last_name"
|
||||
/>
|
||||
|
||||
<label className="block mb-2 font-bold" htmlFor="bio">
|
||||
Bio
|
||||
</label>
|
||||
|
||||
<Field
|
||||
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type="bio"
|
||||
name="bio"
|
||||
/>
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<Form className="flex-1 min-w-0">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ label: 'Email', name: 'email', type: 'email' },
|
||||
{ label: 'Username', name: 'username', type: 'text' },
|
||||
{ label: 'First Name', name: 'first_name', type: 'text' },
|
||||
{ label: 'Last Name', name: 'last_name', type: 'text' },
|
||||
{ label: 'Bio', name: 'bio', type: 'text' },
|
||||
].map((field) => (
|
||||
<div key={field.name}>
|
||||
<label className="block mb-2 font-bold" htmlFor={field.name}>
|
||||
{field.label}
|
||||
</label>
|
||||
<Field
|
||||
className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
type={field.type}
|
||||
name={field.name}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
className="mt-6 px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</Form>
|
||||
<div className="flex flex-col grow justify-center align-middle space-y-3">
|
||||
<label className="flex mx-auto mb-2 font-bold ">Avatar</label>
|
||||
{error && (
|
||||
<div className="flex justify-center mx-auto bg-red-200 rounded-md text-red-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
|
||||
<FileWarning size={16} className="mr-2" />
|
||||
<div className="text-sm font-semibold first-letter:uppercase">
|
||||
{error}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<label className="font-bold">Avatar</label>
|
||||
{error && (
|
||||
<div className="flex items-center bg-red-200 rounded-md text-red-950 px-4 py-2 text-sm">
|
||||
<FileWarning size={16} className="mr-2" />
|
||||
<span className="font-semibold first-letter:uppercase">{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div className="flex justify-center mx-auto bg-green-200 rounded-md text-green-950 space-x-1 px-4 items-center p-2 transition-all shadow-sm">
|
||||
<Check size={16} className="mr-2" />
|
||||
<div className="text-sm font-semibold first-letter:uppercase">
|
||||
{success}
|
||||
)}
|
||||
{success && (
|
||||
<div className="flex items-center bg-green-200 rounded-md text-green-950 px-4 py-2 text-sm">
|
||||
<Check size={16} className="mr-2" />
|
||||
<span className="font-semibold first-letter:uppercase">{success}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
|
||||
<div className="flex flex-col justify-center items-center mt-10">
|
||||
)}
|
||||
<div className="w-full max-w-xs bg-gray-50 rounded-xl outline outline-1 outline-gray-200 shadow p-6">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{localAvatar ? (
|
||||
<UserAvatar
|
||||
border="border-8"
|
||||
|
|
@ -146,42 +115,32 @@ function UserEditGeneral() {
|
|||
) : (
|
||||
<UserAvatar border="border-8" width={100} />
|
||||
)}
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<div className="font-bold animate-pulse antialiased items-center bg-green-200 text-gray text-sm rounded-md px-4 py-2 mt-4 flex">
|
||||
{isLoading ? (
|
||||
<div className="font-bold animate-pulse antialiased bg-green-200 text-gray text-sm rounded-md px-4 py-2 flex items-center">
|
||||
<ArrowBigUpDash size={16} className="mr-2" />
|
||||
<span>Uploading</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center items-center">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
|
||||
onClick={() =>
|
||||
document.getElementById('fileInput')?.click()
|
||||
}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Avatar</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<>
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
className="font-bold antialiased text-gray text-sm rounded-md px-4 py-2 flex items-center"
|
||||
onClick={() => document.getElementById('fileInput')?.click()}
|
||||
>
|
||||
<UploadCloud size={16} className="mr-2" />
|
||||
<span>Change Avatar</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
|
||||
<Info size={13} />
|
||||
<div className="flex items-center text-xs text-gray-500">
|
||||
<Info size={13} className="mr-2" />
|
||||
<p>Recommended size 100x100</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import WarningCallout from './Extensions/Callout/Warning/WarningCallout'
|
|||
import ImageBlock from './Extensions/Image/ImageBlock'
|
||||
import Youtube from '@tiptap/extension-youtube'
|
||||
import VideoBlock from './Extensions/Video/VideoBlock'
|
||||
import { Eye } from 'lucide-react'
|
||||
import { ComputerIcon, Eye, Monitor } from 'lucide-react'
|
||||
import MathEquationBlock from './Extensions/MathEquation/MathEquationBlock'
|
||||
import PDFBlock from './Extensions/PDF/PDFBlock'
|
||||
import QuizBlock from './Extensions/Quiz/QuizBlock'
|
||||
|
|
@ -51,6 +51,7 @@ import { getUriWithOrg } from '@services/config/config'
|
|||
import EmbedObjects from './Extensions/EmbedObjects/EmbedObjects'
|
||||
import Badges from './Extensions/Badges/Badges'
|
||||
import Buttons from './Extensions/Buttons/Buttons'
|
||||
import { useMediaQuery } from 'usehooks-ts'
|
||||
|
||||
interface Editor {
|
||||
content: string
|
||||
|
|
@ -170,6 +171,21 @@ function Editor(props: Editor) {
|
|||
content: props.isCollabEnabledOnThisOrg ? null : props.content,
|
||||
})
|
||||
|
||||
const isMobile = useMediaQuery('(max-width: 767px)')
|
||||
if (isMobile) {
|
||||
// TODO: Work on a better editor mobile experience
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex items-center justify-center p-4">
|
||||
<div className="bg-white p-6 rounded-lg shadow-md text-center">
|
||||
<h2 className="text-xl font-bold mb-4">Desktop Only</h2>
|
||||
<Monitor className='mx-auto my-5' size={60} />
|
||||
<p>The editor is only accessible from a desktop device.</p>
|
||||
<p>Please switch to a desktop to view.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<CourseProvider courseuuid={props.course.course_uuid}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue