fix: layout for hero image of program card
This commit is contained in:
parent
29aaee1488
commit
c03db190d2
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class='margin'>
|
<div class='margin'>
|
||||||
<div class="card">
|
<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'>
|
<div class='card-body'>
|
||||||
<router-link :to="'/Program/' + program.name">
|
<router-link :to="'/Program/' + program.name">
|
||||||
<h5 class='card-title'>{{ program.program_name }}</h5>
|
<h5 class='card-title'>{{ program.program_name }}</h5>
|
||||||
@ -30,11 +30,10 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isLogin: frappe.is_user_logged_in(),
|
isLogin: frappe.is_user_logged_in(),
|
||||||
enrollButton: 'Enroll Now',
|
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: {
|
methods: {
|
||||||
enroll() {
|
enroll() {
|
||||||
this.enrollButton = 'Enrolling...'
|
this.enrollButton = 'Enrolling...'
|
||||||
@ -77,4 +76,9 @@ export default {
|
|||||||
a.btn-secondary {
|
a.btn-secondary {
|
||||||
color: white !important;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.card-hero-img {
|
||||||
|
height: 220px;
|
||||||
|
background-position: center
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
x
Reference in New Issue
Block a user