refactor: styling changes

erpnext/www/lms/all-programs.html

@@ -28,6 +28,10 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 

erpnext/www/lms/content.html

@@ -3,40 +3,51 @@
 
 {% block head_include %}
 	<style>
-		div.card-hero-img {
+		section {
-			height: 220px;
+			padding: 5rem 0 5rem 0;
-			background-size: cover;
+		}
-			background-repeat: no-repeat;
+		.plyr--video .plyr__control.plyr__tab-focus,
-			background-position: center;
+		.plyr--video .plyr__control:hover,
-			background-color: rgb(250, 251, 252);
+		.plyr--video .plyr__control[aria-expanded='true'] {
+			 background: #5e64ff !important;
 		}
 
-		.card-image-wrapper {
+		.plyr__control--overlaid:focus,
-			display: flex;
+		.plyr__control--overlaid:hover {
-			overflow: hidden;
+		  background: #5e64ff !important;
-			height: 220px;
-			background-color: rgb(250, 251, 252);
-			justify-content: center;
 		}
 
-		.image-body {
+		.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
-			align-self: center;
+    		background: #5e64ff !important;
-			color: #d1d8dd;
+		}
-			font-size: 24px;
+
-			font-weight: 600;
+		.plyr__menu__container
-			line-height: 1;
+		.plyr__control[role='menuitemradio'][aria-checked='true']::before {
-			padding: 20px;
+		  background: #5e64ff;
+		}
+		.plyr--full-ui input[type='range'] {
+		  color: #5e64ff !important;
+		}
+
+		.plyr__control--overlaid {
+			background: rgba(94, 100, 255, 0.8) !important;
 		}
 	</style>
 	<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
 {% endblock %}
 
-{% macro navigation() %}
+{% macro title() %}
-<div class="row">
+	<div class="mb-3">
-		<div class="col-md-7">
+		<a href="#" class="text-muted">
+				Back to Course
+		</a>
+	</div>
+	<div>
 		<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
 	</div>
-		<div id="nav-buttons" class="col-md-5 text-right" {{ 'hidden' if content_type=='Quiz' }}>
+{% endmacro %}
+
+{% macro navigation() %}
 		{% if previous %}
 			<a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">Previous</a>
 		{% else %}
@@ -48,13 +59,11 @@
 		{% else %}
 			<button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
 		{% endif %}
-		</div>
-	</div>
 {% endmacro %}
 
 {% macro video() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.duration %}
 			{{ content.duration }} Mins
@@ -77,7 +86,7 @@
 
 {% macro article() %}
 <div class="mb-5">
-	{{ navigation() }}
+	{{ title() }}
 	<div class="text-muted">
 		{% if content.author or content.publish_date %}
 			Published
@@ -97,11 +106,7 @@
 
 {% macro quiz() %}
 <div class="mb-5">
-	<div class="row">
+	{{ title() }}
-		<div class="col-md-7">
-			<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
-		</div>
-	</div>
 </div>
 <div id="quiz-wrapper">
 </div>
@@ -118,6 +123,9 @@
 			{% elif content_type=='Quiz' %}
 				{{ quiz() }}
 			{% endif %}
+			<div class="pull-right" {{ 'hidden' if content_type=='Quiz'}}>
+				{{ navigation() }}
+			</div>
 		</div>
 	</div>
 </section>

erpnext/www/lms/course.html

@@ -28,6 +28,9 @@
 			line-height: 1;
 			padding: 20px;
 		}
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 

erpnext/www/lms/index.html

@@ -30,11 +30,15 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
 {% block content %}
-<section class="top-section ">
+<section class="top-section" style="padding: 6rem 0rem;">
 	<div class='container pb-5'>
 		<h1>{{ education_settings.portal_title }}</h1>
 		<p class='lead'>{{ education_settings.description }}</p>
@@ -54,42 +58,4 @@
 		</p>
 	</div>
 </section>
-<section class="section-padding section-bg">
-	<div class='container'>
-	<div class='card-deck'>
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/balloon.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Curated Courses</h5>
-				<div>Start with a 14 day trial to get instant access to your own ERPNext Instance. Get expert support and world class hosting too.</div>
-			</div>
-		</div>
-
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/umbrella.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Built by Experts</h5>
-				<div>For self hosted users, ERPNext Support provides you the priority support and bug fix guarantee, so you can stop worrying.</div>
-			</div>
-		</div>
-
-		<div class="card">
-			<!-- <img class='mt-3' src="/assets/erpnext_com/img/sun.svg" style='height: 150px'> -->
-			<div class='card-body'>
-				<h5 class='card-title'>Learn from the OEMs</h5>
-				<div>ERPNext is open source and infinitely extensible. Customize it, build upon it, add your own apps built with <a href="https://frappe.io/frappe" class="underline">Frappe Framework</a>.</div>
-			</div>
-		</div>
-	</div>
-	</div>
-</section>
-<section class='section-padding'>
-	<div class='container text-center'>
-		<h3 class='text-center'>About ERPNext</h3>
-		<p class='lead'>ERPNext is the world's best 100% open source ERP used by over 5000 companies worldwide.</p>
-		<div class='mt-4 '>
-			<a class="btn btn-primary btn-lg" href="/pricing">Start Learning</a>
-		</div>
-	</div>
-</section>
 {% endblock %}

erpnext/www/lms/macros/card.html

@@ -11,7 +11,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ program.program_name }}</h5>
-			<div>{{ program.description or '' }}</div>
+			<div class="text-muted">{{ program.description or '' }}</div>
 		</div>
 		{% if has_access or program.intro_video%}
 		<div class='card-footer'>

erpnext/www/lms/macros/hero.html

@@ -2,7 +2,7 @@
 	<div class='container pb-5'>
 		<div class="mb-3">
 			<a href="{{ back.url }}" class="text-muted">
-				<i class="octicon octicon-chevron-left"></i> Back to {{ back.name }}
+				Back to {{ back.name }}
 			</a>
 		</div>
 		<h1>{{ title }}</h1>

erpnext/www/lms/profile.html

@@ -2,6 +2,14 @@
 {% block title %}Profile{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
 
+{% block head_include %}
+	<style>
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+	</style>
+{% endblock %}
+
 {% macro card(program) %}
 <div class="col-sm-4 mb-4 text-left">
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
@@ -15,7 +23,7 @@
 					{% elif course.started %} <span class="indicator orange">
 					{% else %} <span class="indicator blue">
 					{% endif %}
-						<a class="text-muted" href="/lms/course?program={{ program.name }}&name={{ course.course }}">{{ course.course }}</a>
+						<a class="text-muted" href="/lms/course?name={{ course.name }}&program={{ program.name }}">{{ course.course }}</a>
 					</span>
 				</li>
 				{% endfor %}
@@ -35,7 +43,7 @@
 		<div class="mb-3 row">
 			<div class="col-md-7">
 				<a href="/lms" class="text-muted">
-					<i class="fa fa-chevron-left"></i> Back to Home
+					Back to Home
 				</a>
 			</div>
 			<div class="col-md-5 text-right">

erpnext/www/lms/program.html

@@ -28,6 +28,10 @@
 			line-height: 1;
 			padding: 20px;
 		}
+
+		section {
+			padding: 5rem 0 5rem 0;
+		}
 	</style>
 {% endblock %}
 
@@ -45,7 +49,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ course.course_name }}</h5>
-			<div>{{ course.description or '' }}</div>
+			<div class="text-muted">{{ course.description or '' }}</div>
 		</div>
 		{% if has_access and progress[course.name] %}
 		<div class='card-footer'>

erpnext/www/lms/topic.html

@@ -2,6 +2,14 @@
 {% block title %}Topic Title{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
 
+{% block head_include %}
+	<style>
+		section {
+			padding: 5rem 0 5rem 0;
+		}
+	</style>
+{% endblock %}
+
 
 {% macro card(content, index, length) %}
 <div class="col-sm-{{ 12 if length%3 == 1 and index == 1 else 6 if length%3 == 2 and index in [1,2] else 4}} mb-4 text-left">