Shiloh/brotherton-erpnext
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: better cards in lms

Browse Source
This commit is contained in:
scmmishra 2019-03-31 19:46:39 +05:30
parent 751e75bb4c
commit d3bae4e8b5
5 changed files with 120 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
erpnext/public/js/education/lms/components/CardList.vue
View File

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

60
erpnext/public/js/education/lms/components/CourseCard.vue
View File

@ -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 @@ export default {
</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>

40
erpnext/public/js/education/lms/components/ProgramCard.vue
View File

@ -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 @@ export default {
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>

64
erpnext/public/js/education/lms/components/TopicCard.vue
View File

@ -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 @@ export default {
</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>

2
erpnext/public/js/education/lms/pages/ProgramPage.vue
View File

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