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>
<span class="course-list text-muted" id="getting-started">
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">
<div><span style="padding-right: 0.4em"></span>{{ topic.topic_name }}</div>
<div>{{ topic.topic_name }}</div>
</li>
</ul>
</span>
</div>
<div class='text-right p-3'>
<div class='course-buttons text-center'>
<div class='p-3' style="display: flex; justify-content: space-between;">
<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
:type="buttonType"
size="sm btn-block"
:type="'primary'"
size="sm"
:route="courseRoute"
>
{{ buttonName }}
@ -42,30 +45,27 @@ export default {
},
data() {
return {
courseMeta: {},
courseDetails: {},
}
},
mounted() {
if(lms.store.checkLogin()) this.getCourseMeta().then(data => this.courseMeta = data)
if(lms.store.checkLogin()) this.getCourseDetails().then(data => this.courseDetails = data)
},
computed: {
courseRoute() {
return `${this.program_name}/${this.course.name}`
},
buttonType() {
complete() {
if(lms.store.checkProgramEnrollment(this.program_name)){
if (this.courseMeta.flag == "Start Course" ){
return "primary"
if (this.courseDetails.flag === "Completed" ) {
return true
}
else if (this.courseMeta.flag == "Completed" ) {
return "success"
}
else if (this.courseMeta.flag == "Continue" ) {
return "info"
else {
return false
}
}
else {
return "info"
return false
}
},
isLogin() {
@ -73,7 +73,7 @@ export default {
},
buttonName() {
if(lms.store.checkProgramEnrollment(this.program_name)){
return this.courseMeta.flag
return "Start Course"
}
else {
return "Explore"
@ -81,7 +81,7 @@ export default {
}
},
methods: {
getCourseMeta() {
getCourseDetails() {
return lms.call('get_student_course_details', {
course_name: this.course.name,
program_name: this.program_name
@ -89,34 +89,4 @@ export default {
},
}
};
</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>
</script>

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

@ -3,12 +3,12 @@
<div class="card h-100">
<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 v-else class="card-image-wrapper">
<div v-else class="card-image-wrapper text-center">
<div class="image-body">{{ program.program_name }}</div>
</div>
<div class='card-body'>
<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>
</router-link>
<div class='text-right p-3'>
@ -79,28 +79,4 @@ export default {
a.btn-secondary {
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>

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

@ -1,15 +1,13 @@
<template>
<div class='card-deck mt-3'>
<div class="card">
<div class='card-body'>
<div class="row">
<div class="course-details col-xs-7 col-sm-8 col-md-9">
<div class='mt-3 col-md-4 col-sm-12'>
<div class="card h-100">
<div class='card-body'>
<router-link :to="'/Program/' + programData.name">
<h5 class='card-title'>{{ programData.program }}</h5>
</router-link>
<span class="course-list text-muted" id="getting-started">
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">
<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>
@ -18,19 +16,20 @@
</ul>
</span>
</div>
<div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'>
<a-button
:type="buttonType"
size="sm btn-block"
:route="programRoute"
>
{{ buttonName }}
</a-button>
<div class='p-3' style="display: flex; justify-content: space-between;">
<div></div>
<div class='text-right'>
<a-button
:type="buttonType"
size="sm btn-block"
:route="programRoute"
>
{{ buttonName }}
</a-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AButton from './Button.vue';
@ -82,10 +81,6 @@ export default {
};
</script>
<style scoped>
li {
list-style-type: none;
padding: 0;
}
a {
text-decoration: none;

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

@ -1,28 +1,29 @@
<template>
<div v-if="quizData" class='card-deck mt-3'>
<div class="card">
<div v-if="quizData" class='mt-3 col-md-4 col-sm-12'>
<div class="card h-100">
<div class='card-body'>
<div class="row">
<div class="course-details col-xs-7 col-sm-8 col-md-9">
<div class="course-details">
<h5 class='card-title'>{{ quizData.program }}</h5>
<div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started">
<div><b>{{ attempt.content }}</b>
<span v-if="attempt.is_complete">- {{ attempt.score }} - {{attempt.result }}</span>
<span v-else>- Unattempted</span>
</div>
</div>
</div>
<h5 class='card-title'>{{ quizData.program }}</h5>
<div v-for="attempt in quizData.quiz_attempt" :key="attempt.content" class="course-list" id="getting-started">
<div>
{{ attempt.content }}
<ul v-if="attempt.is_complete">
<li><span class="text-muted">Score: </span>{{ attempt.score }}</li>
<li><span class="text-muted">Status: </span>{{attempt.result }}</li>
</ul>
<span v-else>- Unattempted</span>
</div>
<div class='course-buttons text-center col-xs-5 col-sm-4 col-md-3'>
<a-button
</div>
</div>
<div class='p-3' style="display: flex; justify-content: space-between;">
<div></div>
<div class='text-right'>
<a-button
:type="'primary'"
size="sm btn-block"
:route="programRoute"
>
Go To Program
</a-button>
</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>
<span class="course-list text-muted" id="getting-started">
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">
<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>
<div v-else><span style="padding-right: 0.4em"></span>{{ content.content }}</div>
</li>
</ul>
</span>
</div>
<div v-if="isLogin" class='text-right p-3'>
<div class='course-buttons text-center'>
<div v-if="isLogin" class='p-3' style="display: flex; justify-content: space-between;">
<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
:type="buttonType"
size="sm btn-block"
:route="firstContentRoute"
>
{{ buttonName }}
</a-button>
:type="'primary'"
size="sm"
:route="firstContentRoute"
>
{{ buttonName }}
</a-button>
</div>
</div>
</div>
@ -43,11 +46,11 @@ export default {
name: "TopicCard",
data() {
return {
topicMeta: {}
topicDetails: {}
}
},
mounted() {
if(lms.store.checkLogin()) this.getTopicMeta().then(data => this.topicMeta = data)
if(lms.store.checkLogin()) this.gettopicDetails().then(data => this.topicDetails = data)
},
components: {
AButton
@ -55,26 +58,23 @@ export default {
computed: {
firstContentRoute() {
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 {
return {}
}
},
buttonType() {
complete() {
if(lms.store.checkProgramEnrollment(this.program_name)){
if (this.topicMeta.flag == "Start Topic" ){
return "primary"
if (this.topicDetails.flag === "Completed" ) {
return true
}
else if (this.topicMeta.flag == "Completed" ) {
return "success"
}
else if (this.topicMeta.flag == "Continue" ) {
return "info"
else {
return false
}
}
else {
return "info"
return false
}
},
isLogin() {
@ -83,7 +83,12 @@ export default {
},
buttonName() {
if(lms.store.checkProgramEnrollment(this.program_name)){
return this.topicMeta.flag
if (this.topicDetails.flag == 'Continue'){
return 'Continue'
}
else {
return 'Start Topic'
}
}
else {
return "Explore"
@ -96,7 +101,7 @@ export default {
if(content_type == 'Article') return 'fa fa-file-text-o'
if(content_type == 'Quiz') return 'fa fa-question-circle-o'
},
getTopicMeta() {
gettopicDetails() {
return lms.call('get_student_topic_details', {
topic_name: this.topic.name,
course_name: this.course_name,
@ -104,34 +109,4 @@ export default {
},
}
};
</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>
</script>