eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: course details page structure

Browse Source
This commit is contained in:
pateljannat
2021-07-06 20:51:20 +05:30
parent 68fd32d536
commit 0ed5309b97
10 changed files with 129 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
community/lms/doctype/lms_batch_membership/lms_batch_membership.json
View File

@@ -65,8 +65,7 @@
"fieldname": "course",
"fieldtype": "Data",
"in_list_view": 1,
"label": "Course",
"read_only": 1
"label": "Course"
},
{
"fieldname": "current_lesson",
@@ -84,7 +83,7 @@
],
"index_web_pages_for_search": 1,
"links": [],
"modified": "2021-06-21 12:10:28.808803",
"modified": "2021-07-06 20:50:46.885325",
"modified_by": "Administrator",
"module": "LMS",
"name": "LMS Batch Membership",

1
community/lms/widgets/BreadCrumb.html
View File

@@ -1,7 +1,6 @@
<div class="course-instructor breadcrumb">
<a class="dark-links" href="/courses">All Courses</a>
<img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">
{% if lesson %}
<a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
<img class="ml-1 mr-1" src="/assets/community/icons/side-arrow.svg">

24
community/lms/widgets/ChapterTeaser.html
View File

@@ -1,6 +1,6 @@
<div>
<div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse"
aria-expanded="false">
<div class="small-title chapter-title" data-target="#{{ chapter.get_slugified_chapter_title() }}"
data-toggle="collapse" aria-expanded="false">
<img class="chapter-icon" src="/assets/community/icons/side-arrow.svg">
{{ index }}. {{ chapter.title }}
</div>
@@ -12,7 +12,8 @@
{% for lesson in chapter.get_lessons() %}
<div class="lesson-info">
{% if show_link or lesson.include_in_preview %}
<a class="dark-links" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
<a class="dark-links"
href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
data-course="{{ course.name }}">
{{ lesson.title }}</a>
{% else %}
@@ -31,3 +32,20 @@
{% if index != course.get_chapters() | length %}
<div class="card-divider"></div>
{% endif %}
<script>
frappe.ready(() => {
expand_the_first_chapter();
})
var expand_the_first_chapter = () => {
var elements = $(".collapse");
elements.each((i, elem) => {
if (i <= 1) {
$(elem).addClass("show");
$(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
}
});
}
</script>

76
community/public/css/style.css
View File

@@ -399,11 +399,6 @@ input[type=checkbox] {
}
}
.is-primary {
background: var(--primary-color);
color: #FFFFFF;
}
.button-links:hover {
text-decoration: none;
}
@@ -548,14 +543,14 @@ div.custom-checkbox>label>input:checked+img {
@media (max-width: 768px) {
.course-home-page {
padding: 0px;
width: 688px;
padding: 0px;
width: 688px;
}
}
@media (max-width: 375px) {
.course-home-page {
width: 100%;
width: 100%;
}
}
@@ -598,7 +593,6 @@ div.custom-checkbox>label>input:checked+img {
margin-bottom: 16px;
}
@media (max-width: 768px) {
.course-card-wide-intro {
width: 632px;
@@ -614,14 +608,14 @@ div.custom-checkbox>label>input:checked+img {
.wide-button {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.13), 0px 0px 0.5px rgba(0, 0, 0, 0.5);
border-radius: 6px;
padding: 12px;
padding: 12px 24px 12px;
margin-right: 16px;
height: 48px;
cursor: pointer;
width: 190px;
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
}
@media (max-width: 375px) {
@@ -630,6 +624,26 @@ div.custom-checkbox>label>input:checked+img {
}
}
.is-secondary {
background: #FFFFFF;
}
.is-secondary:hover {
text-decoration: none;
color: inherit;
}
@media (max-width: 375px) {
.is-secondary {
margin-top: 16px;
}
}
.is-primary {
background: var(--primary-color);
color: #FFFFFF;
}
.is-primary:hover {
text-decoration: none;
color: #FFFFFF;
@@ -714,18 +728,6 @@ div.custom-checkbox>label>input:checked+img {
margin: 12px 0px 16px;
}
.video-preview {
background: #FFFFFF;
width: 234px;
}
@media (max-width: 375px) {
.video-preview {
width: 264px;
margin-top: 16px;
}
}
.course-buttons {
display: flex;
}
@@ -798,6 +800,10 @@ div.custom-checkbox>label>input:checked+img {
margin: 48px 0px 16px;
}
.course-detail-headings {
margin: 0px;
}
.modal-headings {
margin: 0;
}
@@ -906,3 +912,27 @@ div.custom-checkbox>label>input:checked+img {
.breadcrumb {
margin: 16px 10px 16px;
}
.course-details-outline {
width: 352px;
}
.lesson-content-card {
padding: 24px;
flex-direction: column;
}
.lesson-content {
width: 736px;
}
.course-content-parent {
display: flex;
justify-content: space-between;
}
.lesson-pagination {
display: flex;
justify-content: space-between;
margin: 24px 0px 0px;
}

4
community/public/css/style.less
View File

@@ -272,10 +272,6 @@ section.lightgray {
margin: 20px 0px;
}
.lesson-pagination {
clear: both;
}
.exercise-image svg {
width: 200px;
height: 200px;

3
community/public/icons/left-arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33331 6.66663L0.666646 3.99996L3.33331 1.33329" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 225 B

3
community/public/icons/side-arrow-white.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="4" height="8" viewBox="0 0 4 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.666626 6.66675L3.33329 4.00008L0.666626 1.33341" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B

71
community/www/batch/learn.html
View File

@@ -21,45 +21,60 @@
{% block content %}
<div class="common-page-style">
<div>
</div>
</div>
<div class="container">
{{ widgets.BatchTabs(course=course, membership=membership) }}
<div class="lesson-page">
<h2 class="title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}" data-lesson="{{ lesson.name }}"
data-course="{{ course.name }}" {% if membership%} data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</h2>
{% if membership or lesson.include_in_preview %}
{{ lesson.render_html() }}
{% else %}
<div class="no-preview-message">
<span>This lesson is not available for Preview. Please join the course to access this lesson.</span>
<a href="/courses/{{ course.name }}">Checkout Course Details.</a>
<div class="course-home-page">
{{ widgets.Breadcrumb(course=course, lesson=lesson) }}
<div class="course-content-parent">
<div class="course-details-outline">
{{ widgets.CourseOutline(course=course, show_link=membership) }}
</div>
<div class="lesson-pagination-parent">
{{ LessonContent(lesson) }}
{% if membership %}
{{ pagination(prev_chap, prev_url, next_chap, next_url) }}
{% endif %}
</div>
</div>
{% endif %}
{% if membership %}
{{ pagination(prev_chap, prev_url, next_chap, next_url) }}
{% endif %}
</div>
</div>
{% endblock %}
{% macro LessonContent(lesson) %}
<div class="lesson-content">
<div class="course-home-headings title {% if course.is_mentor(frappe.session.user) %} is_mentor {% endif %}"
data-lesson="{{ lesson.name }}" data-course="{{ course.name }}" {% if membership%}
data-membership="{{membership.name}}" {% endif %}>{{ lesson.title }}</div>
{% if membership or lesson.include_in_preview %}
<div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
{% else %}
<div class="no-preview-message">
<span>This lesson is not available for Preview. Please join the course to access this lesson.</span>
<a href="/courses/{{ course.name }}">Checkout Course Details.</a>
</div>
{% endif %}
</div>
{% endmacro %}
{% macro pagination(prev_chap, prev_url, next_chap, next_url) %}
<div class="lesson-pagination">
{% if prev_url %}
<span>
Prev: <a href="{{prev_url}}">{{prev_chap}}</a>
</span>
<a class="wide-button is-secondary dark-links" href="{{ prev_url }}">
<img class="mr-2" src="/assets/community/icons/left-arrow.svg">
Prev
</a>
{% endif %}
<div class="wide-button is-primary">
Mark as Complete
</div>
{% if next_url %}
<span class="pull-right">
Next: <a href="{{next_url}}">{{next_chap}}</a>
</span>
<a class="wide-button is-secondary dark-links" href="{{ next_url }}">
Next
<img class="ml-2" src="/assets/community/icons/side-arrow.svg">
</a>
{% endif %}
<div style="clear: both;"></div>
</div>
{% endmacro %}

6
community/www/courses/course.html
View File

@@ -55,7 +55,7 @@
</a>
{% endif %}
{% if course.video_link %}
<div class="wide-button video-preview">
<div class="wide-button is-secondary video-preview">
Watch Video Preview
<img class="ml-2" src="/assets/community/images/play.png" />
</div>
@@ -135,6 +135,8 @@
{{ frappe.utils.md_to_html(course.description) }}
</div>
</div>
{% set avg_rating = course.get_average_rating() %}
{% if course.get_students() | length or avg_rating %}
<div>
<div class="course-home-headings">
Overview
@@ -146,7 +148,6 @@
{{ course.get_students() | length }} Enrolled
</div>
{% endif %}
{% set avg_rating = course.get_average_rating() %}
{% if avg_rating %}
<div class="overtime-item">
<img class="icon-background mr-1" src="/assets/community/icons/rating.svg" />
@@ -155,6 +156,7 @@
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endmacro %}

12
community/www/courses/course.js
View File

@@ -3,8 +3,6 @@ frappe.ready(() => {
check_mentor_request();
}
expand_the_first_chapter();
hide_wrapped_mentor_cards();
$("#apply-now").click((e) => {
@@ -175,16 +173,6 @@ var rotate_chapter_icon = (e) => {
}
}
var expand_the_first_chapter = () => {
var elements = $(".collapse");
elements.each((i, elem) => {
if (i <= 1) {
$(elem).addClass("show");
$(elem).siblings(".chapter-title").children(".chapter-icon").css("transform", "rotate(90deg)");
}
});
}
var highlight_rating = (e) => {
var rating = $(e.currentTarget).attr("data-rating");
$(".icon-rating").removeClass("star-click");