refactor: styling changes
diff --git a/erpnext/www/lms/content.html b/erpnext/www/lms/content.html
index 92cfec2..bdbacc1 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>