From 8a976ba8abeed87d1b05b5062638792b1d812567 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scmmishra@users.noreply.github.com>
Date: Thu, 16 May 2019 16:38:13 +0530
Subject: [PATCH] feat: LMS is now compatible with Frappe Theme (#17600)

* style: UI fixes for frappe_theme compatibility

* chore: minor ui fixes
---
 .../js/education/lms/components/CardList.vue  | 20 +++----
 .../education/lms/components/CourseCard.vue   |  2 +-
 .../education/lms/components/ProfileInfo.vue  | 56 +++++++++----------
 .../education/lms/components/ProgramCard.vue  |  2 +-
 .../js/education/lms/components/Video.vue     |  8 +--
 .../js/education/lms/pages/ContentPage.vue    |  5 +-
 .../js/education/lms/pages/CoursePage.vue     |  4 +-
 .../public/js/education/lms/pages/Home.vue    |  2 +-
 .../js/education/lms/pages/ListPage.vue       |  4 +-
 .../js/education/lms/pages/ProfilePage.vue    |  4 +-
 .../js/education/lms/pages/ProgramPage.vue    |  2 +-
 11 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/erpnext/public/js/education/lms/components/CardList.vue b/erpnext/public/js/education/lms/components/CardList.vue
index 298627f757..10f6af096c 100644
--- a/erpnext/public/js/education/lms/components/CardList.vue
+++ b/erpnext/public/js/education/lms/components/CardList.vue
@@ -1,18 +1,18 @@
 <template>
-	<section class="featured-products-section" :class='sectionType'>
-	<h5 class='featured-heading' v-html="title"></h5>
-	<div class="featured-products row">
-		<!-- <p class='lead text-center' v-html="description"></p> -->
-		<slot name="card-list-slot"></slot>
+	<div class="featured-products-section py-3">
+		<h5 class='featured-heading' v-html="title"></h5>
+		<div class="featured-products row">
+			<!-- <p class='lead text-center' v-html="description"></p> -->
+			<slot name="card-list-slot"></slot>
+		</div>
+		<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>
 <script>
 export default {
-    props:['title', 'description', 'sectionType'],
+    props:['title', 'description'],
     name: "CardList",
 };
 </script>
diff --git a/erpnext/public/js/education/lms/components/CourseCard.vue b/erpnext/public/js/education/lms/components/CourseCard.vue
index dff896f6f9..48a9f591c7 100644
--- a/erpnext/public/js/education/lms/components/CourseCard.vue
+++ b/erpnext/public/js/education/lms/components/CourseCard.vue
@@ -8,7 +8,7 @@
             <div class='card-body'>
                 <h5 class="card-title">{{ course.course_name }}</h5>
                 <span class="course-list text-muted" id="getting-started">
-                    {{ course.course_intro }}
+                    {{ course.course_intro.substring(0,120) }}
                 </span>
             </div>
             <div class='p-3' style="display: flex; justify-content: space-between;">
diff --git a/erpnext/public/js/education/lms/components/ProfileInfo.vue b/erpnext/public/js/education/lms/components/ProfileInfo.vue
index 6f3e8f1266..5bad713997 100644
--- a/erpnext/public/js/education/lms/components/ProfileInfo.vue
+++ b/erpnext/public/js/education/lms/components/ProfileInfo.vue
@@ -1,36 +1,34 @@
 <template>
-<section>
-		<div class="py-5">
-			<div class="row">
-				<div class="col-sm-12">
-					<div>
-						<h3>{{ fullName }}</h3>
-						<ul>
-							<li class="row">
-								<div class="col-md-3 col-sm-4 pr-0 text-muted">Email:</div>
-								<div class="col-md-9 col-sm-8">{{ email }}</div>
-							</li>
-							<li v-if="joiningDate" class="row">
-								<div class="col-md-3 col-sm-4 pr-0 text-muted">Date of Joining:</div>
-								<div class="col-md-9 col-sm-8">{{ joiningDate }}</div>
-							</li>
-							<li class="row">
-								<div class="col-md-3 col-sm-4 pr-0 text-muted">Programs Enrolled:</div>
-								<div class="col-md-9 col-sm-8">
-									<ul v-if="enrolledPrograms">
-										<li v-for="program in enrolledPrograms" :key="program">{{ program }}</li>
-									</ul>
-									<span v-else>None</span>
-								</div>
-							</li>
-						</ul>
-					</div>
-					<a href="/update-profile" class="edit-button text-muted">Edit Profile</a>
+	<div class="py-5">
+		<div class="row">
+			<div class="col-sm-12">
+				<div>
+					<h3>{{ fullName }}</h3>
+					<ul>
+						<li class="row">
+							<div class="col-md-3 col-sm-4 pr-0 text-muted">Email:</div>
+							<div class="col-md-9 col-sm-8">{{ email }}</div>
+						</li>
+						<li v-if="joiningDate" class="row">
+							<div class="col-md-3 col-sm-4 pr-0 text-muted">Date of Joining:</div>
+							<div class="col-md-9 col-sm-8">{{ joiningDate }}</div>
+						</li>
+						<li class="row">
+							<div class="col-md-3 col-sm-4 pr-0 text-muted">Programs Enrolled:</div>
+							<div class="col-md-9 col-sm-8">
+								<ul v-if="enrolledPrograms">
+									<li v-for="program in enrolledPrograms" :key="program">{{ program }}</li>
+								</ul>
+								<span v-else>None</span>
+							</div>
+						</li>
+					</ul>
 				</div>
+				<a href="/update-profile" class="edit-button text-muted">Edit Profile</a>
 			</div>
-			<div ></div>
 		</div>
-	</section>
+		<div ></div>
+	</div>
 </template>
 <script>
 
diff --git a/erpnext/public/js/education/lms/components/ProgramCard.vue b/erpnext/public/js/education/lms/components/ProgramCard.vue
index 20de085e6f..15a9fcdcd2 100644
--- a/erpnext/public/js/education/lms/components/ProgramCard.vue
+++ b/erpnext/public/js/education/lms/components/ProgramCard.vue
@@ -8,7 +8,7 @@
             </div>
             <div class='card-body'>
                 <h5 class='card-title'>{{ program.program_name }}</h5>
-                <div class="text-muted">{{ program.description.substring(0,200) }}...</div>
+                <div class="text-muted">{{ program.description.substring(0,120) }}...</div>
             </div>
         </router-link>
         <div class='text-right p-3'>
diff --git a/erpnext/public/js/education/lms/components/Video.vue b/erpnext/public/js/education/lms/components/Video.vue
index ec7b0c08b0..50b4dd460d 100644
--- a/erpnext/public/js/education/lms/components/Video.vue
+++ b/erpnext/public/js/education/lms/components/Video.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-    <section class='mt-2'>
+    <div class='mt-2'>
     <div>
         <div class="mt-3 row">
             <div class="col-md-8">
@@ -16,8 +16,8 @@
         <youtube-player :url="contentData.url" class="mt-3"/>
         <hr>
     </div>
-</section>
-<section class="video-description-section">
+</div>
+<div class="video-description-section">
     <div>
         <div class="content" v-html="contentData.description">
         </div>
@@ -30,7 +30,7 @@
                 Mistake</a>
         </div>
     </div>
-</section>
+</div>
 </div>
 </template>
 <script>
diff --git a/erpnext/public/js/education/lms/pages/ContentPage.vue b/erpnext/public/js/education/lms/pages/ContentPage.vue
index 542e937112..224ee03a4a 100644
--- a/erpnext/public/js/education/lms/pages/ContentPage.vue
+++ b/erpnext/public/js/education/lms/pages/ContentPage.vue
@@ -1,6 +1,5 @@
 <template>
 	<div>
-		<breadcrumb/>
 		<component v-bind:is="currentComponent" :content="content" :type="type">
 			<ContentNavigation :nextContent="nextContent" :nextContentType="nextContentType"/>
 		</component>
@@ -11,7 +10,6 @@ import Article from "../components/Article.vue"
 import Quiz from "../components/Quiz.vue"
 import Video from "../components/Video.vue"
 import ContentNavigation from "../components/ContentNavigation.vue"
-import Breadcrumb from "../components/Breadcrumb.vue"
 
 export default {
 	props:['program_name', 'course_name', 'topic', 'type', 'content'],
@@ -56,8 +54,7 @@ export default {
 		Article,
 		Video,
 		Quiz,
-		ContentNavigation,
-		Breadcrumb
+		ContentNavigation
 	}
 };
 </script>
diff --git a/erpnext/public/js/education/lms/pages/CoursePage.vue b/erpnext/public/js/education/lms/pages/CoursePage.vue
index 9aaf8a9858..dc3d13052b 100644
--- a/erpnext/public/js/education/lms/pages/CoursePage.vue
+++ b/erpnext/public/js/education/lms/pages/CoursePage.vue
@@ -1,9 +1,9 @@
 <template>
 <div>
 	<breadcrumb></breadcrumb>
-	<TopSection v-bind:title="course.course_name" v-bind:description="course.description">
+	<TopSection v-bind:title="course.course_name" v-bind:description="course.course_intro">
     </TopSection>
-	<CardList :title="'Topics'" :description="''" :sectionType="'section-padding section-bg'">
+	<CardList :title="'Topics'" :description="''">
         <TopicCard slot="card-list-slot" v-for="topic in topicData" :topic="topic" :course_name="course_name" :program_name="program_name" :key="topic.name"/>
     </CardList>
 </div>
diff --git a/erpnext/public/js/education/lms/pages/Home.vue b/erpnext/public/js/education/lms/pages/Home.vue
index 569008674f..6554a76587 100644
--- a/erpnext/public/js/education/lms/pages/Home.vue
+++ b/erpnext/public/js/education/lms/pages/Home.vue
@@ -3,7 +3,7 @@
 	<TopSection :title="portal.title" :description="portal.description">
         <TopSectionButton/>
     </TopSection>
-	<CardList :title="'Featured Programs'" :description="'Master ERPNext'" :sectionType="'section-padding section-bg'">
+	<CardList :title="'Featured Programs'" :description="'Master ERPNext'">
         <ProgramCard slot="card-list-slot" v-for="item in featuredPrograms" :key="item.program.name" :program="item.program" :enrolled="item.is_enrolled"/>
         <AButton slot="list-bottom" :type="'primary'" :size="'md'" :route="'List/Program'">View All</AButton>
     </CardList>
diff --git a/erpnext/public/js/education/lms/pages/ListPage.vue b/erpnext/public/js/education/lms/pages/ListPage.vue
index 07681910e0..cf5cecce9c 100644
--- a/erpnext/public/js/education/lms/pages/ListPage.vue
+++ b/erpnext/public/js/education/lms/pages/ListPage.vue
@@ -3,7 +3,7 @@
 		<TopSection :title="'Programs at ' + portal.title" :description="portal.description">
         	<AButton v-if="isLogin" :type="'primary'" :size="'lg'" :route="{ name: 'signup'}">Sign Up</AButton>
     	</TopSection>
-		<CardList :title="'All Programs'" :description="''" :sectionType="'section-padding section-bg'">
+		<CardList :title="'All Programs'" :description="''">
 			<ProgramCard slot="card-list-slot" v-for="item in masterData" :key="item.program.name" :program="item.program" :enrolled="item.is_enrolled"/>
 		</CardList>
 	</div>
@@ -24,7 +24,7 @@ export default {
 		CourseCard,
 		ProgramCard,
 		CardList,
-		TopSection		
+		TopSection
 	},
 	data() {
 		return {
diff --git a/erpnext/public/js/education/lms/pages/ProfilePage.vue b/erpnext/public/js/education/lms/pages/ProfilePage.vue
index c926463fcd..beff5eb34e 100644
--- a/erpnext/public/js/education/lms/pages/ProfilePage.vue
+++ b/erpnext/public/js/education/lms/pages/ProfilePage.vue
@@ -2,10 +2,10 @@
 <div>
 	<ProfileInfo :enrolledPrograms="enrolledPrograms"></ProfileInfo>
 	<div v-if="enrolledPrograms">
-		<CardList :title="'Your Progress'" :description="''" :sectionType="'section-padding section-bg'">
+		<CardList :title="'Your Progress'" :description="''">
 	        <ProgressCard slot="card-list-slot" v-for="program in enrolledPrograms" :program="program" :key="program"/>
 	    </CardList>
-		<CardList :title="'Quiz Attempts'" :description="''" :sectionType="'section-padding section'">
+		<CardList :title="''" :description="''">
 	        <ScoreCard slot="card-list-slot" v-for="program in enrolledPrograms" :program="program" :key="program"/>
 	    </CardList>
 	</div>
diff --git a/erpnext/public/js/education/lms/pages/ProgramPage.vue b/erpnext/public/js/education/lms/pages/ProgramPage.vue
index 2a136614df..415c861e81 100644
--- a/erpnext/public/js/education/lms/pages/ProgramPage.vue
+++ b/erpnext/public/js/education/lms/pages/ProgramPage.vue
@@ -3,7 +3,7 @@
 	<breadcrumb></breadcrumb>
 	<TopSection v-bind:title="program.program_name" v-bind:description="program.description">
     </TopSection>
-	<CardList :title="'Courses'" :description="''" :sectionType="'section-padding'">
+	<CardList :title="'Courses'" :description="''">
         <CourseCard slot="card-list-slot" v-for="course in courseData" :course="course" :program_name="program_name" :key="course.name"/>
     </CardList>
 </div>