Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed (ui): Fixed cards with better buttons

Browse Source
This commit is contained in:
scmmishra 2019-04-22 17:51:30 +05:30
parent 5079e6c1c1
commit 6c8f23b27e
5 changed files with 84 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
erpnext/public/js/education/lms/components/CourseCard.vue
View File

@ -9,18 +9,21 @@
<h5 class="card-title">{{ course.course_name }}</h5> <h5 class="card-title">{{ course.course_name }}</h5>
<span class="course-list text-muted" id="getting-started"> <span class="course-list text-muted" id="getting-started">
Topics Topics
<ul class="mb-0 mt-1"> <ul class="mb-0 mt-1" style="padding-left: 1.5em;">
<li v-for="topic in course.topics" :key="topic.name"> <li v-for="topic in course.topics" :key="topic.name">
<div><span style="padding-right: 0.4em"></span>{{ topic.topic_name }}</div> <div>{{ topic.topic_name }}</div>
</li> </li>
</ul> </ul>
</span> </span>
</div> </div>
<div class='text-right p-3'> <div class='p-3' style="display: flex; justify-content: space-between;">
<div class='course-buttons text-center'> <div>
<span v-if="complete"><i class="mr-2 text-success fa fa-check-circle" aria-hidden="true"></i>Course Complete</span>
</div>
<div class='text-right'>
<a-button <a-button
:type="buttonType" :type="'primary'"
size="sm btn-block" size="sm"
:route="courseRoute" :route="courseRoute"
> >
{{ buttonName }} {{ buttonName }}
@ -42,30 +45,27 @@ export default {
}, },
data() { data() {
return { return {
courseMeta: {}, courseDetails: {},
} }
}, },
mounted() { mounted() {
if(lms.store.checkLogin()) this.getCourseMeta().then(data => this.courseMeta = data) if(lms.store.checkLogin()) this.getCourseDetails().then(data => this.courseDetails = data)
}, },
computed: { computed: {
courseRoute() { courseRoute() {
return `${this.program_name}/${this.course.name}` return `${this.program_name}/${this.course.name}`
}, },
buttonType() { complete() {
if(lms.store.checkProgramEnrollment(this.program_name)){ if(lms.store.checkProgramEnrollment(this.program_name)){
if (this.courseMeta.flag == "Start Course" ){ if (this.courseDetails.flag === "Completed" ) {
return "primary" return true
} }
else if (this.courseMeta.flag == "Completed" ) { else {
return "success" return false
}
else if (this.courseMeta.flag == "Continue" ) {
return "info"
} }
} }
else { else {
return "info" return false
} }
}, },
isLogin() { isLogin() {
@ -73,7 +73,7 @@ export default {
}, },
buttonName() { buttonName() {
if(lms.store.checkProgramEnrollment(this.program_name)){ if(lms.store.checkProgramEnrollment(this.program_name)){
return this.courseMeta.flag return "Start Course"
} }
else { else {
return "Explore" return "Explore"
@ -81,7 +81,7 @@ export default {
} }
}, },
methods: { methods: {
getCourseMeta() { getCourseDetails() {
return lms.call('get_student_course_details', { return lms.call('get_student_course_details', {
course_name: this.course.name, course_name: this.course.name,
program_name: this.program_name program_name: this.program_name
@ -89,34 +89,4 @@ export default {
}, },
} }
}; };
</script> </script>
<style scoped>
.course-buttons {
margin-bottom: 1em;
}
div.card-hero-img {
height: 220px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(250, 251, 252);
}
.card-image-wrapper {
display: flex;
overflow: hidden;
height: 220px;
background-color: rgb(250, 251, 252);
}
.image-body {
align-self: center;
color: #d1d8dd;
font-size: 24px;
font-weight: 600;
line-height: 1;
padding: 20px;
}
</style>

28
erpnext/public/js/education/lms/components/ProgramCard.vue
View File

@ -3,12 +3,12 @@
<div class="card h-100"> <div class="card h-100">
<router-link :to="'/Program/' + program.name"> <router-link :to="'/Program/' + program.name">
<div class="card-hero-img" v-if="program.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div> <div class="card-hero-img" v-if="program.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
<div v-else class="card-image-wrapper"> <div v-else class="card-image-wrapper text-center">
<div class="image-body">{{ program.program_name }}</div> <div class="image-body">{{ program.program_name }}</div>
</div> </div>
<div class='card-body'> <div class='card-body'>
<h5 class='card-title'>{{ program.program_name }}</h5> <h5 class='card-title'>{{ program.program_name }}</h5>
<div>{{ program.description.substring(0,200) }}...</div> <div class="text-muted">{{ program.description.substring(0,200) }}...</div>
</div> </div>
</router-link> </router-link>
<div class='text-right p-3'> <div class='text-right p-3'>
@ -79,28 +79,4 @@ export default {
a.btn-secondary { a.btn-secondary {
color: white !important; color: white !important;
} }
div.card-hero-img {
height: 220px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(250, 251, 252);
}
.card-image-wrapper {
display: flex;
overflow: hidden;
height: 220px;
background-color: rgb(250, 251, 252);
}
.image-body {
align-self: center;
color: #d1d8dd;
font-size: 24px;
font-weight: 600;
line-height: 1;
padding: 20px;
}
</style> </style>

35
erpnext/public/js/education/lms/components/ProgressCard.vue
View File

@ -1,15 +1,13 @@
<template> <template>
<div class='card-deck mt-3'> <div class='mt-3 col-md-4 col-sm-12'>
<div class="card"> <div class="card h-100">
<div class='card-body'> <div class='card-body'>
<div class="row">
<div class="course-details col-xs-7 col-sm-8 col-md-9">
<router-link :to="'/Program/' + programData.name"> <router-link :to="'/Program/' + programData.name">
<h5 class='card-title'>{{ programData.program }}</h5> <h5 class='card-title'>{{ programData.program }}</h5>
</router-link> </router-link>
<span class="course-list text-muted" id="getting-started"> <span class="course-list text-muted" id="getting-started">
Courses Courses
<ul class="mb-0 mt-1"> <ul class="mb-0 mt-1 list-unstyled" style="padding-left: 1.5em;">
<li v-for="item in programData.progress" :key="item.name"> <li v-for="item in programData.progress" :key="item.name">
<span v-if="item.is_complete"><i class="text-success fa fa-check-circle" aria-hidden="true"></i></span> <span v-if="item.is_complete"><i class="text-success fa fa-check-circle" aria-hidden="true"></i></span>
<span v-else><i class="text-secondary fa fa-circle-o" aria-hidden="true"></i></span> <span v-else><i class="text-secondary fa fa-circle-o" aria-hidden="true"></i></span>
@ -18,19 +16,20 @@
</ul> </ul>
</span> </span>
</div> </div>
<div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'> <div class='p-3' style="display: flex; justify-content: space-between;">
<a-button <div></div>
:type="buttonType" <div class='text-right'>
size="sm btn-block" <a-button
:route="programRoute" :type="buttonType"
> size="sm btn-block"
{{ buttonName }} :route="programRoute"
</a-button> >
{{ buttonName }}
</a-button>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import AButton from './Button.vue'; import AButton from './Button.vue';
@ -82,10 +81,6 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
li {
list-style-type: none;
padding: 0;
}
a { a {
text-decoration: none; text-decoration: none;

33
erpnext/public/js/education/lms/components/ScoreCard.vue
View File

@ -1,28 +1,29 @@
<template> <template>
<div v-if="quizData" class='card-deck mt-3'> <div v-if="quizData" class='mt-3 col-md-4 col-sm-12'>
<div class="card"> <div class="card h-100">
<div class='card-body'> <div class='card-body'>
<div class="row"> <h5 class='card-title'>{{ quizData.program }}</h5>
<div class="course-details col-xs-7 col-sm-8 col-md-9"> <div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started">
<div class="course-details"> <div>
<h5 class='card-title'>{{ quizData.program }}</h5> {{ attempt.content }}
<div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started"> <ul v-if="attempt.is_complete">
<div><b>{{ attempt.content }}</b> <li><span class="text-muted">Score: </span>{{ attempt.score }}</li>
<span v-if="attempt.is_complete">- {{ attempt.score }} - {{attempt.result }}</span> <li><span class="text-muted">Status: </span>{{attempt.result }}</li>
<span v-else>- Unattempted</span> </ul>
</div> <span v-else>- Unattempted</span>
</div>
</div>
</div> </div>
<div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'> </div>
<a-button </div>
<div class='p-3' style="display: flex; justify-content: space-between;">
<div></div>
<div class='text-right'>
<a-button
:type="'primary'" :type="'primary'"
size="sm btn-block" size="sm btn-block"
:route="programRoute" :route="programRoute"
> >
Go To Program Go To Program
</a-button> </a-button>
</div>
</div> </div>
</div> </div>
</div> </div>

85
erpnext/public/js/education/lms/components/TopicCard.vue
View File

@ -10,25 +10,28 @@
<h5 class="card-title">{{ topic.topic_name }}</h5> <h5 class="card-title">{{ topic.topic_name }}</h5>
<span class="course-list text-muted" id="getting-started"> <span class="course-list text-muted" id="getting-started">
Content Content
<ul class="mb-0 mt-1"> <ul class="mb-0 mt-1" style="padding-left: 1.5em;">
<li v-for="content in topic.topic_content" :key="content.name"> <li v-for="content in topic.topic_content" :key="content.name">
<router-link v-if="isLogin" tag="a" :class="'text-muted'" :to="{name: 'content', params:{program_name: program_name, topic:topic.name, course_name: course_name, type:content.content_type, content: content.content} }"> <router-link v-if="isLogin" tag="a" :class="'text-muted'" :to="{name: 'content', params:{program_name: program_name, topic:topic.name, course_name: course_name, type:content.content_type, content: content.content} }">
<span style="padding-right: 0.4em"></span>{{ content.content }} {{ content.content }}
</router-link> </router-link>
<div v-else><span style="padding-right: 0.4em"></span>{{ content.content }}</div> <div v-else><span style="padding-right: 0.4em"></span>{{ content.content }}</div>
</li> </li>
</ul> </ul>
</span> </span>
</div> </div>
<div v-if="isLogin" class='text-right p-3'> <div v-if="isLogin" class='p-3' style="display: flex; justify-content: space-between;">
<div class='course-buttons text-center'> <div>
<span v-if="complete"><i class="mr-2 text-success fa fa-check-circle" aria-hidden="true"></i>Course Complete</span>
</div>
<div class='text-right'>
<a-button <a-button
:type="buttonType" :type="'primary'"
size="sm btn-block" size="sm"
:route="firstContentRoute" :route="firstContentRoute"
> >
{{ buttonName }} {{ buttonName }}
</a-button> </a-button>
</div> </div>
</div> </div>
</div> </div>
@ -43,11 +46,11 @@ export default {
name: "TopicCard", name: "TopicCard",
data() { data() {
return { return {
topicMeta: {} topicDetails: {}
} }
}, },
mounted() { mounted() {
if(lms.store.checkLogin()) this.getTopicMeta().then(data => this.topicMeta = data) if(lms.store.checkLogin()) this.gettopicDetails().then(data => this.topicDetails = data)
}, },
components: { components: {
AButton AButton
@ -55,26 +58,23 @@ export default {
computed: { computed: {
firstContentRoute() { firstContentRoute() {
if(lms.store.checkLogin()){ if(lms.store.checkLogin()){
return `/Program/${this.program_name}/${this.course_name}/${this.topic.name}/${this.topicMeta.content_type}/${this.topicMeta.content}` return `/Program/${this.program_name}/${this.course_name}/${this.topic.name}/${this.topicDetails.content_type}/${this.topicDetails.content}`
} }
else { else {
return {} return {}
} }
}, },
buttonType() { complete() {
if(lms.store.checkProgramEnrollment(this.program_name)){ if(lms.store.checkProgramEnrollment(this.program_name)){
if (this.topicMeta.flag == "Start Topic" ){ if (this.topicDetails.flag === "Completed" ) {
return "primary" return true
} }
else if (this.topicMeta.flag == "Completed" ) { else {
return "success" return false
}
else if (this.topicMeta.flag == "Continue" ) {
return "info"
} }
} }
else { else {
return "info" return false
} }
}, },
isLogin() { isLogin() {
@ -83,7 +83,12 @@ export default {
}, },
buttonName() { buttonName() {
if(lms.store.checkProgramEnrollment(this.program_name)){ if(lms.store.checkProgramEnrollment(this.program_name)){
return this.topicMeta.flag if (this.topicDetails.flag == 'Continue'){
return 'Continue'
}
else {
return 'Start Topic'
}
} }
else { else {
return "Explore" return "Explore"
@ -96,7 +101,7 @@ export default {
if(content_type == 'Article') return 'fa fa-file-text-o' if(content_type == 'Article') return 'fa fa-file-text-o'
if(content_type == 'Quiz') return 'fa fa-question-circle-o' if(content_type == 'Quiz') return 'fa fa-question-circle-o'
}, },
getTopicMeta() { gettopicDetails() {
return lms.call('get_student_topic_details', { return lms.call('get_student_topic_details', {
topic_name: this.topic.name, topic_name: this.topic.name,
course_name: this.course_name, course_name: this.course_name,
@ -104,34 +109,4 @@ export default {
}, },
} }
}; };
</script> </script>
<style scoped>
.course-buttons {
margin-bottom: 1em;
}
div.card-hero-img {
height: 220px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(250, 251, 252);
}
.card-image-wrapper {
display: flex;
overflow: hidden;
height: 220px;
background-color: rgb(250, 251, 252);
}
.image-body {
align-self: center;
color: #d1d8dd;
font-size: 24px;
font-weight: 600;
line-height: 1;
padding: 20px;
}
</style>