fix: layout for hero image of program card
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index 701a03e..f18ebe2 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -1,7 +1,7 @@
<template>
<div class='margin'>
<div class="card">
- <img v-if="program.hero_image" :src="program.hero_image" style='height: 150px; width: auto'>
+ <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">
<h5 class='card-title'>{{ program.program_name }}</h5>
@@ -30,11 +30,10 @@
return {
isLogin: frappe.is_user_logged_in(),
enrollButton: 'Enroll Now',
- programRoute: { name: 'program', params: { program_name: this.program.name }}
+ programRoute: { name: 'program', params: { program_name: this.program.name }},
+ image: "'" + this.program.hero_image + "'"
};
},
- created() {
- },
methods: {
enroll() {
this.enrollButton = 'Enrolling...'
@@ -77,4 +76,9 @@
a.btn-secondary {
color: white !important;
}
+
+ div.card-hero-img {
+ height: 220px;
+ background-position: center
+ }
</style>
\ No newline at end of file