UI for Content
diff --git a/erpnext/public/js/education/web-academy/components/ContentArticle.vue b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
new file mode 100644
index 0000000..c50058c
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentArticle.vue
@@ -0,0 +1,53 @@
+<template>
+<div>
+ <section class='article-top-section video-section-bg'>
+ <div class='container'>
+ <div class="row">
+ <div class="col-md-8">
+ <h2>{{ content_data.title }}</h2>
+ <span class="text-muted">
+ Published on {{ content_data.publish_date }}, by {{ content_data.author }}
+ </span>
+ </div>
+ <div class="col-md-4 text-right">
+ <slot></slot>
+ </div>
+ </div>
+ <hr>
+ </div>
+ </section>
+ <section class="article-content-section">
+ <div class='container'>
+ <div class="content" v-html="content_data.content"></div>
+ <div class="text-right">
+ </div>
+ <div class="mt-3 text-right">
+ <a class="text-muted" href="/report"><i class="octicon octicon-issue-opened" title="Report"></i> Report a
+ Mistake</a>
+ </div>
+ </div>
+ </section>
+</div>
+</template>
+<script>
+export default {
+ props: ['content', 'type'],
+ name: 'ContentArticle',
+ data() {
+ return {
+ content_data: ''
+ }
+ },
+ mounted() {
+ frappe.call({
+ method: "erpnext.www.academy.get_content",
+ args: {
+ content_name: this.content,
+ content_type: this.type
+ }
+ }).then(r => {
+ this.content_data = r.message
+ });
+ }
+};
+</script>
diff --git a/erpnext/public/js/education/web-academy/components/ContentNavigation.vue b/erpnext/public/js/education/web-academy/components/ContentNavigation.vue
new file mode 100644
index 0000000..cb9cd8b
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentNavigation.vue
@@ -0,0 +1,21 @@
+<template>
+ <div class="nav-buttons">
+ <button class='btn btn-outline-secondary' @click="$router.go(-1)">Previous</button>
+ <button class='btn btn-primary' @click="$router.push({ name: 'content', params: { course: $route.params.course, type:nextContentType, content:nextContent }})">Next</button>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['nextContent', 'nextContentType'],
+ name: 'ContentNavigation',
+};
+</script>
+
+<style lang="css" scoped>
+ .nav-buttons {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ }
+</style>
diff --git a/erpnext/public/js/education/web-academy/components/ContentQuiz.vue b/erpnext/public/js/education/web-academy/components/ContentQuiz.vue
new file mode 100644
index 0000000..a334799
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentQuiz.vue
@@ -0,0 +1,21 @@
+<template>
+ <div>
+ Quiz
+ </div>
+</template>
+
+<script>
+export default {
+
+ name: 'ContentQuiz',
+
+ data() {
+ return {
+
+ };
+ },
+};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/erpnext/public/js/education/web-academy/components/ContentVideo.vue b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
new file mode 100644
index 0000000..4fd0b77
--- /dev/null
+++ b/erpnext/public/js/education/web-academy/components/ContentVideo.vue
@@ -0,0 +1,21 @@
+<template>
+ <div>
+ Video
+ </div>
+</template>
+
+<script>
+export default {
+
+ name: 'ContentVideo',
+
+ data() {
+ return {
+
+ };
+ },
+};
+</script>
+
+<style lang="css" scoped>
+</style>