feat: Added breadcrumbs

This commit is contained in:
scmmishra 2019-04-08 19:56:21 +05:30
parent a409400e58
commit 88f0c464b4
6 changed files with 65 additions and 9 deletions

View File

@ -0,0 +1,49 @@
<template>
<div>
<span v-for="(route, index) in routeData">
<a href="route.route">{{ route.label }}</a><span> / </span>
</span>
</div>
</template>
<script type="text/javascript">
export default {
name: "Breadcrumb",
data() {
return {
routeName: this.$route.name,
routeParams: this.$route.params,
routeData: [{
label: "All Programs",
route: "/List/Program"
}]
}
},
mounted() {
this.buildBreadcrumb()
},
methods: {
buildBreadcrumb() {
if(this.routeName == 'program') {
return
}
if(this.routeName == 'course') {
let routeObject = {
label: this.routeParams.program_name,
route: `/Program/${this.routeParams.program_name}`
}
this.routeData.push(routeObject)
}
if(this.routeName == 'content') {
this.routeData.push({
label: this.routeParams.program_name,
route: `/Program/${this.routeParams.program_name}`
})
this.routeData.push({
label: this.routeParams.course_name,
route: `/Program/${this.routeParams.program_name}/${this.routeParams.course_name}`
})
}
}
}
};
</script>

View File

@ -12,11 +12,11 @@
</div>
</router-link>
<div class='text-right p-3'>
<button v-if="program.intro_video" class='btn btn-secondary btn-sm text-white' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
<button v-if="program.intro_video" class='btn btn-light btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
{{ buttonName }}
</a-button>
<a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
<button v-else-if="isLogin" class='btn btn-dark btn-sm' @click="enroll()">{{ enrollButton }}</button>
<a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
</div>
<VideoModal v-if="program.intro_video" :title="program.program_name" :video="program.intro_video"/>

View File

@ -1,6 +1,6 @@
<template>
<div>
<section class='video-top-section video-section-bg'>
<section class='mt-2'>
<div>
<youtube-player :url="contentData.url"/>
<div class="mt-3 row">
@ -61,4 +61,4 @@ export default {
}
}
};
</script>
</script>

View File

@ -1,5 +1,6 @@
<template>
<div>
<breadcrumb/>
<component v-bind:is="currentComponent" :content="content" :type="type">
<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
</component>
@ -10,6 +11,7 @@ import Article from "../components/Article.vue"
import Quiz from "../components/Quiz.vue"
import Video from "../components/Video.vue"
import ContentNavigation from "../components/ContentNavigation.vue"
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
props:['program_name', 'course_name', 'topic', 'type', 'content'],
@ -54,7 +56,8 @@ export default {
Article,
Video,
Quiz,
ContentNavigation
ContentNavigation,
Breadcrumb
}
};
</script>

View File

@ -1,5 +1,6 @@
<template>
<div>
<breadcrumb></breadcrumb>
<TopSection v-bind:title="course.course_name" v-bind:description="course.description">
</TopSection>
<CardList :title="'Topics'" :description="''" :sectionType="'section-padding section-bg'">
@ -11,7 +12,7 @@
import TopSection from "../components/TopSection.vue"
import CardList from "../components/CardList.vue"
import TopicCard from "../components/TopicCard.vue"
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
props: ['program_name','course_name'],
@ -19,7 +20,8 @@ export default {
components: {
TopSection,
CardList,
TopicCard
TopicCard,
Breadcrumb
},
data() {
return {

View File

@ -1,5 +1,6 @@
<template>
<div>
<breadcrumb></breadcrumb>
<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
</TopSection>
<CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
@ -11,7 +12,7 @@
import TopSection from "../components/TopSection.vue"
import CardList from "../components/CardList.vue"
import CourseCard from "../components/CourseCard.vue"
import Breadcrumb from "../components/Breadcrumb.vue"
export default {
props: ['program_name'],
@ -19,7 +20,8 @@ export default {
components: {
TopSection,
CardList,
CourseCard
CourseCard,
Breadcrumb
},
data() {
return {