fix: layout for hero image of program card

This commit is contained in:
scmmishra 2019-03-28 14:15:30 +05:30
parent 29aaee1488
commit c03db190d2

View File

@ -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>