fix: misc lesson fixes

frontend/src/components/CourseOutline.vue

@@ -25,7 +25,7 @@
 				:key="chapter.name"
 				:defaultOpen="openChapterDetail(chapter.idx)"
 			>
-				<DisclosureButton ref="" class="flex w-full px-2 py-3">
+				<DisclosureButton ref="" class="flex w-full p-2">
 					<ChevronRight
 						:class="{
 							'rotate-90 transform duration-200': open,
@@ -38,7 +38,7 @@
 						{{ chapter.title }}
 					</div>
 				</DisclosureButton>
-				<DisclosurePanel class="pb-2">
+				<DisclosurePanel>
 					<div v-for="lesson in chapter.lessons" :key="lesson.name">
 						<div class="outline-lesson pl-8 py-2">
 							<router-link

frontend/src/components/Discussions.vue

@@ -40,13 +40,16 @@
 	<div v-else-if="singleThread && topics.data">
 		<DiscussionReplies :topic="topics.data" :singleThread="singleThread" />
 	</div>
-	<div v-else class="flex justify-center border mt-5 p-5 rounded-md">
-		<MessageSquareIcon class="w-10 h-10 stroke-1.5 text-gray-800 mr-2" />
+	<div
+		v-else
+		class="flex items-center justify-center border mt-5 p-5 rounded-md"
+	>
+		<MessageSquareIcon class="w-5 h-5 stroke-1.5 mr-2" />
 		<div>
-			<div class="text-xl font-semibold mb-2">
+			<div v-if="emptyStateTitle" class="font-medium mb-2">
 				{{ __(emptyStateTitle) }}
 			</div>
-			<div>
+			<div class="">
 				{{ __(emptyStateText) }}
 			</div>
 		</div>
@@ -89,7 +92,7 @@ const props = defineProps({
 	},
 	emptyStateTitle: {
 		type: String,
-		default: 'No topics yet',
+		default: '',
 	},
 	emptyStateText: {
 		type: String,

frontend/src/components/LessonPlugins.vue

@@ -68,13 +68,34 @@
 				</div>
 			</div>
 		</div>
+		<div class="mt-4">
+			<div class="text-xs text-gray-600 mb-1">
+				{{
+					__(
+						'To add a YouTube video, paste the URL of the video in the editor.'
+					)
+				}}
+			</div>
+			<YouTubeExplanation>
+				<template v-slot="{ togglePopover }">
+					<div
+						@click="togglePopover()"
+						class="flex items-center text-sm underline cursor-pointer"
+					>
+						<Info class="w-3 h-3 stroke-1.5 text-gray-700 mr-1" />
+						{{ __('Learn More') }}
+					</div>
+				</template>
+			</YouTubeExplanation>
+		</div>
 	</div>
 </template>
 <script setup>
 import Link from '@/components/Controls/Link.vue'
 import { FileUploader, Button, Select, Tooltip } from 'frappe-ui'
-import { Plus, FileText } from 'lucide-vue-next'
+import { Plus, FileText, Info } from 'lucide-vue-next'
 import { ref, watch } from 'vue'
+import YouTubeExplanation from '@/components/Modals/YouTubeExplanation.vue'
 
 const quiz = ref(null)
 const file = ref(null)

frontend/src/components/Modals/YouTubeExplanation.vue

@@ -0,0 +1,30 @@
+<template>
+	<Popover transition="default">
+		<template #target="{ isOpen, togglePopover }" class="flex w-full">
+			<slot v-bind="{ isOpen, togglePopover }"></slot>
+		</template>
+		<template #body>
+			<div
+				class="absolute left-0 mt-3 w-[35rem] max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
+			>
+				<div
+					class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
+				>
+					<video
+						controls
+						autoplay
+						muted
+						width="100%"
+						controlsList="nodownload"
+						class="rounded-sm"
+					>
+						<source src="/Youtube.mov" type="video/mp4" />
+					</video>
+				</div>
+			</div>
+		</template>
+	</Popover>
+</template>
+<script setup>
+import { Popover } from 'frappe-ui'
+</script>

frontend/src/pages/CreateLesson.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="">
-		<div class="grid md:grid-cols-[75%,25%] h-full">
+		<div class="grid md:grid-cols-[75%,25%] h-screen">
 			<div class="border-r">
 				<header
 					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"

frontend/src/pages/Lesson.vue

@@ -5,10 +5,10 @@
 		>
 			<Breadcrumbs class="h-7" :items="breadcrumbs" />
 		</header>
-		<div class="grid md:grid-cols-[70%,30%] h-full">
+		<div class="grid md:grid-cols-[70%,30%] h-screen">
 			<div
 				v-if="lesson.data.no_preview"
-				class="border-r-2 text-center pt-10 px-5 md:px-0 pb-10"
+				class="border-r text-center pt-10 px-5 md:px-0 pb-10"
 			>
 				<p class="mb-4">
 					{{
@@ -25,7 +25,7 @@
 					</Button>
 				</router-link>
 			</div>
-			<div v-else class="border-r-2 container pt-5 pb-10 px-5">
+			<div v-else class="border-r container pt-5 pb-10 px-5">
 				<div class="flex flex-col md:flex-row md:items-center justify-between">
 					<div class="text-3xl font-semibold">
 						{{ lesson.data.title }}
@@ -161,7 +161,7 @@
 				</div>
 			</div>
 			<div class="sticky top-10">
-				<div class="bg-gray-50 p-5 border-b-2">
+				<div class="bg-gray-50 p-5 border-b">
 					<div class="text-lg font-semibold">
 						{{ lesson.data.course_title }}
 					</div>
@@ -246,7 +246,6 @@ const lesson = createResource({
 
 const renderEditor = (holder, content) => {
 	// empty the holder
-	document.getElementById(holder).innerHTML = ''
 	return new EditorJS({
 		holder: holder,
 		tools: getEditorTools(),
@@ -396,4 +395,8 @@ const allowInstructorContent = () => {
 .embed-tool__caption {
 	display: none;
 }
+
+.ce-block__content {
+	max-width: unset;
+}
 </style>

frontend/src/utils/upload.js

@@ -16,7 +16,7 @@ export class Upload {
 
 	renderUpload(file) {
 		if (this.isVideo(file.file_type)) {
-			return `<video controls width='100%' controls controlsList='nodownload' class="mb-4">
+			return `<video controls width='100%' controlsList='nodownload' class="mb-4">
 				<source src=${encodeURI(file.file_url)} type='video/mp4'>
 			</video>`
 		} else if (this.isAudio(file.file_type)) {