From b31276572b3b3d16b962e18f183ca8aa758ad6b1 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 6 Jun 2019 14:03:01 +0530
Subject: [PATCH] refactor: styling changes
---
erpnext/www/lms/all-programs.html | 4 ++
erpnext/www/lms/content.html | 96 +++++++++++++++++--------------
erpnext/www/lms/course.html | 5 +-
erpnext/www/lms/index.html | 44 ++------------
erpnext/www/lms/macros/card.html | 2 +-
erpnext/www/lms/macros/hero.html | 2 +-
erpnext/www/lms/profile.html | 12 +++-
erpnext/www/lms/program.html | 6 +-
erpnext/www/lms/topic.html | 8 +++
9 files changed, 90 insertions(+), 89 deletions(-)
diff --git a/erpnext/www/lms/all-programs.html b/erpnext/www/lms/all-programs.html
index 02df51acdf..11ca21485d 100644
--- a/erpnext/www/lms/all-programs.html
+++ b/erpnext/www/lms/all-programs.html
@@ -28,6 +28,10 @@
line-height: 1;
padding: 20px;
}
+
+ section {
+ padding: 5rem 0 5rem 0;
+ }
</style>
{% endblock %}
diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index 92cfec2c8c..bdbacc1f3d 100644
--- a/erpnext/www/lms/content.html
+++ b/erpnext/www/lms/content.html
@@ -3,58 +3,67 @@
{% block head_include %}
<style>
- div.card-hero-img {
- height: 220px;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- background-color: rgb(250, 251, 252);
+ section {
+ padding: 5rem 0 5rem 0;
+ }
+ .plyr--video .plyr__control.plyr__tab-focus,
+ .plyr--video .plyr__control:hover,
+ .plyr--video .plyr__control[aria-expanded='true'] {
+ background: #5e64ff !important;
}
- .card-image-wrapper {
- display: flex;
- overflow: hidden;
- height: 220px;
- background-color: rgb(250, 251, 252);
- justify-content: center;
+ .plyr__control--overlaid:focus,
+ .plyr__control--overlaid:hover {
+ background: #5e64ff !important;
}
- .image-body {
- align-self: center;
- color: #d1d8dd;
- font-size: 24px;
- font-weight: 600;
- line-height: 1;
- padding: 20px;
+ .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
+ background: #5e64ff !important;
+ }
+
+ .plyr__menu__container
+ .plyr__control[role='menuitemradio'][aria-checked='true']::before {
+ 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() %}
-<div class="row">
- <div class="col-md-7">
- <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' }}>
- {% 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 %}
- <a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
- {% endif %}
-
- {% if next %}
- <button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
- {% else %}
- <button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
- {% endif %}
- </div>
+{% macro title() %}
+ <div class="mb-3">
+ <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>
+{% 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 %}
+ <a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">Back to Course</a>
+ {% endif %}
+
+ {% if next %}
+ <button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">Next</button>
+ {% else %}
+ <button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">Finish Topic</button>
+ {% endif %}
{% 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">
- <div class="col-md-7">
- <h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
- </div>
- </div>
+ {{ title() }}
</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>
diff --git a/erpnext/www/lms/course.html b/erpnext/www/lms/course.html
index d046ac8514..381af01a7a 100644
--- a/erpnext/www/lms/course.html
+++ b/erpnext/www/lms/course.html
@@ -28,6 +28,9 @@
line-height: 1;
padding: 20px;
}
+ section {
+ padding: 5rem 0 5rem 0;
+ }
</style>
{% endblock %}
@@ -84,7 +87,7 @@
{% endmacro %}
{% block content %}
-<section class="section ">
+<section class="section">
{{ hero(course.course_name, course.description, has_access, {'name': 'Program', 'url': '/lms/program?program=' + program }) }}
<div class='container'>
<div class="row mt-5">
diff --git a/erpnext/www/lms/index.html b/erpnext/www/lms/index.html
index 6661e22ce3..c33aeb59d5 100644
--- a/erpnext/www/lms/index.html
+++ b/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 %}
\ No newline at end of file
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index ffed8e9ee0..f77b514801 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/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'>
diff --git a/erpnext/www/lms/macros/hero.html b/erpnext/www/lms/macros/hero.html
index 85052e1171..66bb861c46 100644
--- a/erpnext/www/lms/macros/hero.html
+++ b/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>
diff --git a/erpnext/www/lms/profile.html b/erpnext/www/lms/profile.html
index be4d677566..9508daedb7 100644
--- a/erpnext/www/lms/profile.html
+++ b/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">
diff --git a/erpnext/www/lms/program.html b/erpnext/www/lms/program.html
index 615abd50de..2cdf95ca55 100644
--- a/erpnext/www/lms/program.html
+++ b/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'>
diff --git a/erpnext/www/lms/topic.html b/erpnext/www/lms/topic.html
index bb960075f7..54685a7966 100644
--- a/erpnext/www/lms/topic.html
+++ b/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">