fixed (ui): Fixed cards with better buttons
diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index da700eb..223654f 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -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 @@
},
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 @@
},
buttonName() {
if(lms.store.checkProgramEnrollment(this.program_name)){
- return this.courseMeta.flag
+ return "Start Course"
}
else {
return "Explore"
@@ -81,7 +81,7 @@
}
},
methods: {
- getCourseMeta() {
+ getCourseDetails() {
return lms.call('get_student_course_details', {
course_name: this.course.name,
program_name: this.program_name
@@ -89,34 +89,4 @@
},
}
};
-</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>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index 0ecb9c0..26d3882 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -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 @@
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>
\ No newline at end of file
diff --git a/erpnext/public/js/education/lms/components/ProgressCard.vue b/erpnext/public/js/education/lms/components/ProgressCard.vue
index 214c09f..77fb6ef 100644
--- a/erpnext/public/js/education/lms/components/ProgressCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgressCard.vue
@@ -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 @@
};
</script>
<style scoped>
- li {
- list-style-type: none;
- padding: 0;
- }
a {
text-decoration: none;
diff --git a/erpnext/public/js/education/lms/components/ScoreCard.vue b/erpnext/public/js/education/lms/components/ScoreCard.vue
index cbb6a04..679cf4e 100644
--- a/erpnext/public/js/education/lms/components/ScoreCard.vue
+++ b/erpnext/public/js/education/lms/components/ScoreCard.vue
@@ -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>
diff --git a/erpnext/public/js/education/lms/components/TopicCard.vue b/erpnext/public/js/education/lms/components/TopicCard.vue
index 18574fb..3e930df 100644
--- a/erpnext/public/js/education/lms/components/TopicCard.vue
+++ b/erpnext/public/js/education/lms/components/TopicCard.vue
@@ -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 @@
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 @@
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 @@
},
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 @@
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 @@
},
}
};
-</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>
\ No newline at end of file
+</script>
\ No newline at end of file