UI for Course page
diff --git a/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue b/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
new file mode 100644
index 0000000..3620ccb
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/AcademyCourseCard.vue
@@ -0,0 +1,54 @@
+<template>
+<div class="card mt-3" data-list="getting-started">
+ <div class='card-body'>
+ <div class="row">
+ <div class="course-details col-xs-8 col-sm-9 col-md-10">
+ <h5 class="card-title">{{ course.course_name }}</h5>
+ <span class="course-list text-muted" id="getting-started">
+ Course Content
+ <ul class="mb-0 mt-1">
+ <li v-for="content in course.course_content" :key="content.name">{{ content.content }}</li>
+ </ul>
+ </span>
+ </div>
+ <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
+ <button class='btn btn-primary btn-sm btn-block' @click="$router.push($route.path + '/' + course.name + '/' + nextContentType + '/' + nextContent)">Start Course</button>
+ <button class='btn btn-primary btn-sm btn-block'>Continue</button>
+ <button class='btn btn-success btn-sm btn-block'>Completed</button>
+ </div>
+ </div>
+ </div>
+</div>
+</template>
+
+<script>
+export default {
+ props: ['course'],
+ name: "AcademyCourseCard",
+ data() {
+ return {
+ nextContent: '',
+ nextContentType: ''
+ }
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_starting_content",
+ args: {
+ course_name: this.course.name
+ }
+ }).then(r => {
+ this.nextContent = r.message.content,
+ this.nextContentType = r.message.content_type
+ });
+ }
+};
+</script>
+
+<style scoped>
+ @media only screen and (max-width: 576px) {
+ .course-buttons {
+ margin-top: 1em;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
index c57076b..1616ba6 100644
--- a/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
+++ b/erpnext/public/js/education/web-academy/pages/AcademyCoursePage.vue
@@ -1,10 +1,85 @@
<template>
-<div>
- Course Page
-</div>
+ <div>
+ <component v-bind:is="currentComponent" :content="content" :type="type">
+ <ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
+ </component>
+ </div>
</template>
<script>
+import ContentArticle from "../components/ContentArticle.vue"
+import ContentQuiz from "../components/ContentQuiz.vue"
+import ContentVideo from "../components/ContentVideo.vue"
+import ContentNavigation from "../components/ContentNavigation.vue"
+
export default {
- name: "AcademyCoursePage"
+ props:['code', 'course', 'type', 'content'],
+ name: "AcademyCoursePage",
+ data() {
+ return{
+ nextContent: '',
+ nextContentType: '',
+ }
+ },
+ computed: {
+ currentComponent: function() {
+ if(this.type === "Article") {
+ return 'ContentArticle'
+ }
+ else if(this.type === "Quiz") {
+ return 'ContentQuiz'
+ }
+ else if(this.type === "Video") {
+ return 'ContentVideo'
+ }
+ },
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_next_content",
+ args:{
+ content: this.content,
+ content_type: this.type,
+ course: this.course
+ }
+ }).then(r => {
+ this.nextContent = r.message.content,
+ this.nextContentType = r.message.content_type
+ });
+ },
+ components: {
+ ContentArticle,
+ ContentVideo,
+ ContentQuiz,
+ ContentNavigation
+ }
};
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.footer-message {
+ display: none;
+}
+
+.video-top-section {
+ padding-top: 3rem !important;
+ padding-bottom: 1rem !important;
+}
+
+.video-description-section {
+ padding-top: 0em !important;
+}
+
+.article-top-section {
+ padding-top: 0.5em !important;
+ padding-bottom: 0rem !important;
+}
+
+.article-content-section {
+ padding-top: 0em !important;
+}
+
+.quiz-section {
+ padding-top: 3rem !important;
+ padding-bottom: 0rem !important;
+}
+</style>
\ No newline at end of file