refactor: styling cards and article
diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index bdbacc1..9b8c45c 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 381af01..0bfd059 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 d7c28c7..7ea39d8 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 f77b514..f227355 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 2cdf95c..d122778 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 54685a7..3a77776 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>