eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lesson pagination

Browse Source
This commit is contained in:
Jannat Patel
2023-12-18 19:17:17 +05:30
parent 372425bed2
commit 5928b8e5f9
7 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/pages/BatchDetail.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="h-screen">
this is a batch
</div>
</template>
<script setup>
const props = defineProps({
batchName: {
type: String,
required: true,
},
})
</script>

10
frontend/src/pages/CourseDetail.vue
View File

@@ -15,20 +15,20 @@
{{ course.data.short_introduction }}
</div>
<div class="flex items-center justify-between mt-3 w-1/3">
<div class="flex items-center">
<div v-if="course.data.avg_rating" class="flex items-center">
<Star class="h-5 w-5 text-gray-100 fill-orange-500"/>
<span class="ml-1">
{{ course.data.avg_rating }}
</span>
</div>
&middot;
<div class="flex items-center">
<span v-if="course.data.avg_rating">&middot;</span>
<div v-if="course.data.enrollment_count" class="flex items-center">
<Users class="h-4 w-4 text-gray-700"/>
<span class="ml-1">
{{ course.data.enrollment_count_formatted }}
</span>
</div>
&middot;
<span v-if="course.data.enrollment_count">&middot;</span>
<div class="flex items-center">
<span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
<UserAvatar v-for="instructor in course.data.instructors" :user="instructor"/>
@@ -54,7 +54,7 @@
</div>
<CourseOutline :courseName="course.data.name"/>
</div>
<CourseReviews :courseName="course.data.name" :avg_rating="course.data.avg_rating"/>
<CourseReviews v-if="course.data.avg_rating" :courseName="course.data.name" :avg_rating="course.data.avg_rating"/>
</div>
<div>
<CourseCardOverlay :course="course"/>

12
frontend/src/pages/Courses.vue
View File

@@ -30,7 +30,17 @@
<template #default="{ tab }">
<div v-if="tab.courses && tab.courses.value.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-5">
<router-link v-for="course in tab.courses.value"
:to="{ name: 'CourseDetail', params: { courseName: course.name } }">
:to="
course.membership && course.current_lesson
? {name: 'Lesson', params: {
courseName: course.name,
chapterNumber: course.current_lesson.split('.')[0],
lessonNumber: course.current_lesson.split('.')[1] }}
: course.membership ? { name: 'Lesson', params: {
courseName: course.name,
chapterNumber: 1,
lessonNumber: 1 }
} : { name: 'CourseDetail', params: { courseName: course.name } }">
<CourseCard :course="course" />
</router-link>
</div>

12
frontend/src/pages/Lesson.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="lesson.data && course.data" class="h-screen text-base">
<header class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5">
<Breadcrumbs class="h-7" :items="breadcrumbs"/>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
<div class="grid grid-cols-[70%,30%] h-full">
<div class="border-r-2 container pt-5 pb-10">
@@ -10,7 +10,7 @@
</div>
<div class="flex items-center mt-2">
<span class="mr-1" :class="{ 'avatar-group overlap': course.data.instructors.length > 1 }">
<UserAvatar v-for="instructor in course.data.instructors" :user="instructor"/>
<UserAvatar v-for="instructor in course.data.instructors" :user="instructor" />
</span>
<span v-if="course.data.instructors.length == 1">
{{ course.data.instructors[0].full_name }}
@@ -33,10 +33,11 @@
{{ Math.ceil(course.data.membership.progress) }}% completed
</div>
<div v-if="user && course.data.membership" class="w-full bg-gray-200 rounded-full h-1 my-2">
<div class="bg-gray-900 h-1 rounded-full" :style="{ width: Math.ceil(course.data.membership.progress) + '%' }"></div>
<div class="bg-gray-900 h-1 rounded-full"
:style="{ width: Math.ceil(course.data.membership.progress) + '%' }"></div>
</div>
</div>
<CourseOutline :courseName="lesson.data.course"/>
<CourseOutline :courseName="lesson.data.course" />
</div>
</div>
</div>
@@ -111,13 +112,14 @@ onUnmounted(() => {
.youtube-video {
border: 1px solid #ddd;
}
.avatar-group {
display: inline-flex;
align-items: center;
}
.avatar-group .avatar {
transition: margin 0.1s ease-in-out;
transition: margin 0.1s ease-in-out;
}
iframe {