feat: better cards in lms
diff --git a/erpnext/public/js/education/lms/components/CardList.vue b/erpnext/public/js/education/lms/components/CardList.vue
index 21a23df..298627f 100644
--- a/erpnext/public/js/education/lms/components/CardList.vue
+++ b/erpnext/public/js/education/lms/components/CardList.vue
@@ -1,12 +1,12 @@
<template>
<section class="featured-products-section" :class='sectionType'>
<h5 class='featured-heading' v-html="title"></h5>
- <div class="featured-products">
+ <div class="featured-products row">
<!-- <p class='lead text-center' v-html="description"></p> -->
<slot name="card-list-slot"></slot>
- <div class='mt-4 text-center'>
- <slot name="list-bottom"></slot>
- </div>
+ </div>
+ <div class='mt-4 text-center'>
+ <slot name="list-bottom"></slot>
</div>
</section>
</template>
diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index 90c0c7b..1242a5c 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -1,8 +1,11 @@
<template>
-<div class="card mt-3" data-list="getting-started">
- <div class='card-body'>
- <div class="row">
- <div class="course-details col-xs-8 col-sm-9 col-md-10">
+ <div class="mt-3 col-md-4 col-sm-12">
+ <div class="card h-100">
+ <div class="card-hero-img" v-if="course.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
+ <div v-else class="card-image-wrapper">
+ <div class="image-body">{{ course.course_name }}</div>
+ </div>
+ <div class='card-body'>
<h5 class="card-title">{{ course.course_name }}</h5>
<span class="course-list text-muted" id="getting-started">
Topics
@@ -13,18 +16,19 @@
</ul>
</span>
</div>
- <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
- <a-button
- :type="buttonType"
- size="sm btn-block"
- :route="courseRoute"
- >
- {{ buttonName }}
- </a-button>
+ <div class='text-right p-3'>
+ <div class='course-buttons text-center'>
+ <a-button
+ :type="buttonType"
+ size="sm btn-block"
+ :route="courseRoute"
+ >
+ {{ buttonName }}
+ </a-button>
+ </div>
</div>
</div>
</div>
-</div>
</template>
<script>
@@ -88,9 +92,31 @@
</script>
<style scoped>
- @media only screen and (max-width: 576px) {
- .course-buttons {
- margin-top: 1em;
- }
+ .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
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index bc75469..76623aa 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -1,13 +1,16 @@
<template>
-<div class='mt-3'>
- <div class="card">
- <div class="card-hero-img" v-if="program.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
- <div class='card-body'>
- <router-link :to="'/Program/' + program.name">
+<div class='mt-3 col-md-4 col-sm-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 class="image-body">{{ program.program_name }}</div>
+ </div>
+ <div class='card-body'>
<h5 class='card-title'>{{ program.program_name }}</h5>
- </router-link>
- <div v-html="program.description"></div>
- </div>
+ <div>{{ program.description.substring(0,200) }}...</div>
+ </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>
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
@@ -79,6 +82,25 @@
div.card-hero-img {
height: 220px;
- background-position: center
+ 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/TopicCard.vue b/erpnext/public/js/education/lms/components/TopicCard.vue
index 3018c02..609fcd6 100644
--- a/erpnext/public/js/education/lms/components/TopicCard.vue
+++ b/erpnext/public/js/education/lms/components/TopicCard.vue
@@ -1,9 +1,12 @@
<template>
-<div class="card mt-3" data-list="getting-started">
- <div class='card-body'>
- <div class="row">
- <div class="course-details col-xs-8 col-sm-9 col-md-10">
+ <div class="mt-3 col-md-4 col-sm-12">
+ <div class="card h-100">
+ <div class="card-hero-img" v-if="topic.hero_image" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
+ <div v-else class="card-image-wrapper">
+ <div class="image-body">{{ topic.topic_name }}</div>
+ </div>
+ <div class='card-body'>
<h5 class="card-title">{{ topic.topic_name }}</h5>
<span class="course-list text-muted" id="getting-started">
Content
@@ -17,18 +20,19 @@
</ul>
</span>
</div>
- <div class='course-buttons text-center col-xs-4 col-sm-3 col-md-2'>
- <a-button v-if="isLogin"
- :type="buttonType"
- size="sm btn-block"
- :route="firstContentRoute"
- >
- {{ buttonName }}
- </a-button>
+ <div v-if="isLogin" class='text-right p-3'>
+ <div class='course-buttons text-center'>
+ <a-button
+ :type="buttonType"
+ size="sm btn-block"
+ :route="firstContentRoute"
+ >
+ {{ buttonName }}
+ </a-button>
+ </div>
</div>
</div>
</div>
-</div>
</template>
<script>
@@ -103,17 +107,31 @@
</script>
<style scoped>
- @media only screen and (max-width: 576px) {
- .course-buttons {
- margin-top: 1em;
- }
- }
- li {
- list-style-type: none;
- padding: 0;
+ .course-buttons {
+ margin-bottom: 1em;
}
- .fa {
- font-size: 0.8em;
+ 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/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index 9d7148d..b3c3159 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -2,7 +2,7 @@
<div>
<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
</TopSection>
- <CardList :title="'Courses'" :description="''" :sectionType="'section-padding section-bg'">
+ <CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
<CourseCard slot="card-list-slot" v-for="course in courseData" :course="course" :program_name="program_name" :key="course.name"/>
</CardList>
</div>