From 2a0483dee3f8d4c5f510126c83416b14769479ea Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 6 Jun 2019 16:02:38 +0530
Subject: [PATCH] refactor: styling cards and article

---
 erpnext/www/lms/content.html     | 24 ++++++++++++++++++++++--
 erpnext/www/lms/course.html      | 12 +++++++++---
 erpnext/www/lms/index.html       | 10 +++++++++-
 erpnext/www/lms/macros/card.html | 12 ++++++++++--
 erpnext/www/lms/program.html     | 14 ++++++++++----
 erpnext/www/lms/topic.html       |  6 ++++++
 6 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index bdbacc1f3d..9b8c45cb9b 100644
--- a/erpnext/www/lms/content.html
+++ b/erpnext/www/lms/content.html
@@ -3,6 +3,26 @@
 
 {% block head_include %}
 	<style>
+		.lms-content {
+			line-height: 1.8em;
+		}
+
+		.lms-content h1 {
+			margin-top: 1em;
+		}
+
+		.lms-content h2 {
+			margin-top: 1em;
+		}
+
+		.lms-content h3 {
+			margin-top: 0.8em;
+		}
+
+		.lms-content h4 {
+			margin-top: 0.6em;
+		}
+
 		section {
 			padding: 5rem 0 5rem 0;
 		}
@@ -79,7 +99,7 @@
 	</div>
 </div>
 <div id="player" data-plyr-provider="{{ content.provider|lower }}" data-plyr-embed-id="{{ content.url }}"></div>
-<div class="my-5" style="line-height: 1.8em;">
+<div class="my-5 lms-content">
 	{{ content.description }}
 </div>
 {% endmacro %}
@@ -99,7 +119,7 @@
 		{% endif %}
 	</div>
 </div>
-<div style="line-height: 1.8em;">
+<div class="lms-content">
 	{{ content.content }}
 </div>
 {% endmacro %}
diff --git a/erpnext/www/lms/course.html b/erpnext/www/lms/course.html
index 381af01a7a..0bfd059013 100644
--- a/erpnext/www/lms/course.html
+++ b/erpnext/www/lms/course.html
@@ -1,6 +1,7 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ course.course_name }}{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
+{% from "www/lms/macros/card.html" import null_card %}
 
 {% block head_include %}
 	<style>
@@ -35,8 +36,8 @@
 {% endblock %}
 
 
-{% macro card(topic, 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">
+{% macro card(topic) %}
+<div class="col-sm-4 mb-4 text-left">
 	<div class="card h-100">
 		{% if has_access %}
 			<a href="/lms/topic?program={{ program }}&course={{ course.name }}&topic={{ topic.name }}" class="no-decoration no-underline">
@@ -92,8 +93,13 @@
 	<div class='container'>
 		<div class="row mt-5">
 			{% for topic in topics %}
-				{{ card(topic, loop.index, topics|length) }}
+				{{ card(topic) }}
 			{% endfor %}
+			{% if topics %}
+				{% for n in range(3 - ((topics|length)%3)) %}
+					{{ null_card() }}
+				{% endfor %}
+			{% endif %}
 		</div>
 	</div>
 </section>
diff --git a/erpnext/www/lms/index.html b/erpnext/www/lms/index.html
index d7c28c7273..7ea39d8a99 100644
--- a/erpnext/www/lms/index.html
+++ b/erpnext/www/lms/index.html
@@ -1,6 +1,7 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ education_settings.portal_title }}{% endblock %}
 {% from "www/lms/macros/card.html" import program_card %}
+{% from "www/lms/macros/card.html" import null_card %}
 
 {% block head_include %}
 	<meta name="description" content="{{ education_settings.description }}" />
@@ -43,7 +44,9 @@
 		<h1>{{ education_settings.portal_title }}</h1>
 		<p class='lead'>{{ education_settings.description }}</p>
 		<p class="mt-4">
-			<a class="btn btn-primary btn-lg" href="{{ '/login#signup' if frappe.session.user == 'Guest' else '/lms/all-programs' }}">{{ 'Start Learning' if frappe.session.user == 'Guest' else 'Explore Programs'}}</a>
+			{% if frappe.session.user == 'Guest' %}
+			<a class="btn btn-primary btn-lg" href="'/login#signup'}}">Start Learning</a>
+			{% endif %}
 		</p>
 	</div>
 	<div class='container'>
@@ -51,6 +54,11 @@
 			{% for program in featured_programs %}
 				{{ program_card(program.program, program.has_access) }}
 			{% endfor %}
+			{% if featured_programs %}
+				{% for n in range(3 - ((featured_programs|length)%3)) %}
+					{{ null_card() }}
+				{% endfor %}
+			{% endif %}
 		</div>
 	</div>
 </section>
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index f77b514801..f227355832 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/erpnext/www/lms/macros/card.html
@@ -1,5 +1,5 @@
 {% macro program_card(program, has_access) %}
-<div class="col-sm mb-4 text-left">
+<div class="col-sm-4 mb-4 text-left">
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if program.hero_image %}
@@ -11,7 +11,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ program.program_name }}</h5>
-			<div class="text-muted">{{ program.description or '' }}</div>
+			<div class="text-muted">{{ program.description[:110] + '...' if program.description else '' }}</div>
 		</div>
 		{% if has_access or program.intro_video%}
 		<div class='card-footer'>
@@ -23,4 +23,12 @@
 	</div>
 	</a>
 </div>
+{% endmacro %}
+
+
+{% macro null_card() %}
+<div class="col-sm-4 mb-4 text-left">
+	<div class="h-100" style="border: 1px solid rgba(209,216,221,0.5);border-radius: 0.25rem;background-color: rgb(250, 251, 252);">
+	</div>
+</div>
 {% endmacro %}
\ No newline at end of file
diff --git a/erpnext/www/lms/program.html b/erpnext/www/lms/program.html
index 2cdf95ca55..d1227788b8 100644
--- a/erpnext/www/lms/program.html
+++ b/erpnext/www/lms/program.html
@@ -1,6 +1,7 @@
 {% extends "templates/base.html" %}
 {% block title %}{{ program.program_name }}{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
+{% from "www/lms/macros/card.html" import null_card %}
 
 {% block head_include %}
 	<style>
@@ -36,8 +37,8 @@
 {% endblock %}
 
 
-{% macro card(course, 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">
+{% macro card(course) %}
+<div class="col-sm-4 mb-4 text-left">
 	<a href="/lms/course?name={{ course.name }}&program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if course.hero_image %}
@@ -49,7 +50,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ course.course_name }}</h5>
-			<div class="text-muted">{{ course.description or '' }}</div>
+			<div class="text-muted">{{ course.description[:110] + '...' if course.description else '' }}</div>
 		</div>
 		{% if has_access and progress[course.name] %}
 		<div class='card-footer'>
@@ -73,8 +74,13 @@
 	<div class='container'>
 		<div class="row mt-5">
 			{% for course in courses %}
-				{{ card(course, loop.index, courses|length) }}
+				{{ card(course) }}
 			{% endfor %}
+			{% if courses %}
+				{% for n in range(3 - ((courses|length)%3)) %}
+					{{ null_card() }}
+				{% endfor %}
+			{% endif %}
 		</div>
 	</div>
 </section>
diff --git a/erpnext/www/lms/topic.html b/erpnext/www/lms/topic.html
index 54685a7966..3a777765a1 100644
--- a/erpnext/www/lms/topic.html
+++ b/erpnext/www/lms/topic.html
@@ -1,6 +1,7 @@
 {% extends "templates/base.html" %}
 {% block title %}Topic Title{% endblock %}
 {% from "www/lms/macros/hero.html" import hero %}
+{% from "www/lms/macros/card.html" import null_card %}
 
 {% block head_include %}
 	<style>
@@ -46,6 +47,11 @@
 			{% for content in contents %}
 				{{ card(content, loop.index, topic.contents|length) }}
 			{% endfor %}
+			{% if contents %}
+				{% for n in range(3 - ((contents|length)%3)) %}
+					{{ null_card() }}
+				{% endfor %}
+			{% endif %}
 		</div>
 	</div>
 </section>