fix: course home, course cards and course outline cleanup
This commit is contained in:
Jannat Patel
@@ -1,7 +1,7 @@
|
||||
import re
|
||||
import frappe
|
||||
from frappe.utils import flt, cint, cstr
|
||||
from school.lms.md import markdown_to_html
|
||||
from school.lms.md import markdown_to_html, find_macros
|
||||
import string
|
||||
from frappe import _
|
||||
|
||||
@@ -85,6 +85,13 @@ def get_lesson_details(chapter):
|
||||
lesson_details = frappe.db.get_value("Course Lesson", row.lesson,
|
||||
["name", "title", "include_in_preview", "body", "creation"], as_dict=True)
|
||||
lesson_details.number = flt("{}.{}".format(chapter.idx, row.idx))
|
||||
lesson_details.icon = "icon-list"
|
||||
macros = find_macros(lesson_details.body)
|
||||
for macro in macros:
|
||||
if macro[0] == "YouTubeVideo":
|
||||
lesson_details.icon = "icon-video"
|
||||
elif macro[0] == "Quiz":
|
||||
lesson_details.icon = "icon-quiz"
|
||||
lessons.append(lesson_details)
|
||||
return lessons
|
||||
|
||||
|
||||
@@ -17,10 +17,33 @@
|
||||
<div class="course-card-content">
|
||||
<div class="course-card-meta">
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<span>
|
||||
<div class="vertically-center">
|
||||
<svg class="icon icon-md">
|
||||
<use href="#icon-education"></use>
|
||||
</svg>
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% set student_count = get_students(course.name) | length %}
|
||||
{% if student_count %}
|
||||
<div class="vertically-center">
|
||||
<svg class="icon icon-md">
|
||||
<use class="" href="#icon-users">
|
||||
</svg>
|
||||
{{ student_count }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% set avg_rating = get_average_rating(course.name) %}
|
||||
{% if avg_rating %}
|
||||
<div class="vertically-center">
|
||||
<svg class="icon icon-md">
|
||||
<use href="#icon-star"></use>
|
||||
</svg>
|
||||
{{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="course-card-title">{{ course.title }}</div>
|
||||
|
||||
@@ -59,22 +82,6 @@
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
{% set student_count = get_students(course.name) | length %}
|
||||
<span class="course-student-count">
|
||||
{% if student_count %}
|
||||
<span class="vertically-center mr-3">
|
||||
<img class="icon-background" src="/assets/school/icons/user.svg" />
|
||||
{{ student_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% set avg_rating = get_average_rating(course.name) %}
|
||||
{% if avg_rating %}
|
||||
<span class="vertically-center">
|
||||
<img class="icon-background" src="/assets/school/icons/rating.svg" />
|
||||
{{ frappe.utils.flt(avg_rating, frappe.get_system_settings("float_precision") or 3) }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% if read_only %}
|
||||
|
||||
@@ -23,12 +23,15 @@
|
||||
<div class="lessons">
|
||||
|
||||
{% for lesson in get_lessons(course.name, chapter) %}
|
||||
|
||||
<div class="lesson-info {% if membership.current_lesson == lesson.name %} active-lesson {% endif %}">
|
||||
{% set active = membership.current_lesson == lesson.name %}
|
||||
<div class="lesson-info {% if active %} active-lesson {% endif %}">
|
||||
|
||||
{% if membership or lesson.include_in_preview %}
|
||||
<a class="lesson-links" href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
<svg class="icon icon-md">
|
||||
<use class="" href="#{{ lesson.icon }}{% if active %}-blue{% endif %}">
|
||||
</svg>
|
||||
{{ lesson.title }}
|
||||
|
||||
{% if membership %}
|
||||
@@ -43,14 +46,18 @@
|
||||
title="This lesson is not available for preview. As you are the Instructor of the course only you can see it."
|
||||
href="{{ get_lesson_url(course.name, lesson.number) }}{{course.query_parameter}}"
|
||||
data-course="{{ course.name }}">
|
||||
<img class="mr-3" src="/assets/school/icons/lock.svg">
|
||||
<svg class="icon icon-md">
|
||||
<use class="" href="#icon-lock">
|
||||
</svg>
|
||||
<div>{{ lesson.title }}</div>
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<div class="no-preview" title="This lesson is not available for preview" data-course="{{ course.name }}">
|
||||
<div class="lesson-links">
|
||||
<img class="mr-3" src="/assets/school/icons/lock.svg">
|
||||
<svg class="icon icon-md">
|
||||
<use class="" href="#icon-lock">
|
||||
</svg>
|
||||
<div>{{ lesson.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,7 +90,7 @@ frappe.ready(() => {
|
||||
});
|
||||
|
||||
const expand_the_first_chapter = () => {
|
||||
var elements = $(".course-outline .collapse");
|
||||
let elements = $(".course-outline .collapse");
|
||||
elements.each((i, element) => {
|
||||
if (i < 1) {
|
||||
show_section(element);
|
||||
@@ -95,13 +102,21 @@ const expand_the_first_chapter = () => {
|
||||
const expand_the_active_chapter = () => {
|
||||
|
||||
/* Find anchor matching the URL for course details page */
|
||||
var selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
let selector = $(`a[href="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
if (!selector.length) {
|
||||
selector = $(`a[href^="${decodeURIComponent(window.location.pathname)}"]`).parent();
|
||||
}
|
||||
if (selector.length && $(".course-details-page").length) {
|
||||
$(".lesson-info").removeClass("active-lesson")
|
||||
$(".lesson-info").removeClass("active-lesson");
|
||||
$(".lesson-info").each((i, elem) => {
|
||||
let href = $(elem).find("use").attr("href");
|
||||
href.endsWith("blue") && $(elem).find("use").attr("href", href.substring(0, href.length - 5));
|
||||
})
|
||||
|
||||
selector.addClass("active-lesson");
|
||||
let href = selector.find("use").attr("href");
|
||||
!href.endsWith("blue") && selector.find("use").attr("href", `${href}-blue`);
|
||||
|
||||
show_section(selector.parent().parent());
|
||||
}
|
||||
|
||||
@@ -124,7 +139,7 @@ const show_section = (element) => {
|
||||
};
|
||||
|
||||
const rotate_chapter_icon = (e) => {
|
||||
var icon = $(e.currentTarget).children(".chapter-icon");
|
||||
let icon = $(e.currentTarget).children(".chapter-icon");
|
||||
if (icon.css("transform") == "none") {
|
||||
icon.css("transform", "rotate(90deg)");
|
||||
} else {
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="avg-rating-stars">
|
||||
<div class="rating">
|
||||
{% for i in [1, 2, 3, 4, 5] %}
|
||||
<svg class="icon icon-md {% if i <= avg_rating %} star-click {% endif %}" data-rating="{{ i }}">
|
||||
<svg class="icon icon-md {% if i <= frappe.utils.ceil(avg_rating) %} star-click {% endif %}" data-rating="{{ i }}">
|
||||
<use href="#icon-star"></use>
|
||||
</svg>
|
||||
{% endfor %}
|
||||
@@ -49,14 +49,16 @@
|
||||
{% if reviews | length %}
|
||||
<div class="mt-12">
|
||||
{% for review in reviews %}
|
||||
<div class="">
|
||||
<div class="review-card-footer">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="mr-5">
|
||||
{{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
|
||||
</div>
|
||||
<div>
|
||||
<a class="button-links" href="{{get_profile_url(review.owner_details.username) }}">
|
||||
<div class="mb-4">
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<div class="mr-3">
|
||||
{{ widgets.Avatar(member=review.owner_details, avatar_class="avatar-medium") }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="button-links mr-2" href="{{get_profile_url(review.owner_details.username) }}">
|
||||
<span class="bold-heading">
|
||||
{{ review.owner_details.full_name }}
|
||||
</span>
|
||||
@@ -69,12 +71,12 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-16 mt-4">
|
||||
<div> {{ review.review }} </div>
|
||||
<div class="frappe-timestamp mt-2 mb-6 course-meta" data-timestamp="{{ review.creation }}"> frappe.utils.pretty_date(review.creation) </div>
|
||||
|
||||
<div class="frappe-timestamp course-meta" data-timestamp="{{ review.creation }}"> frappe.utils.pretty_date(review.creation) </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-content"> {{ review.review }} </div>
|
||||
</div>
|
||||
{% if loop.index != reviews | length %}
|
||||
<div class="card-divider"></div>
|
||||
|
||||
@@ -58,7 +58,7 @@ input[type=checkbox] {
|
||||
letter-spacing: 0.011em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
box-shadow: var(--popover-box-shadow);
|
||||
box-shadow: var(--shadow-sm);
|
||||
color: var(--gray-900);
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -99,47 +99,32 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-card-meta {
|
||||
margin: 0.75rem 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: var(--text-base);
|
||||
color: var(--gray-600);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.course-card-meta-2 {
|
||||
color: var(--gray-700);
|
||||
.course-card-meta .icon {
|
||||
margin: 0;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
padding: 0 1.25rem 1.25rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.course-card-content {
|
||||
padding: 0 0.5rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.course-card-content {
|
||||
padding: 0px 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--gray-800);
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.card-heading {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
border-top: 1px solid var(--gray-300);
|
||||
margin-bottom: 1rem;
|
||||
@@ -151,9 +136,8 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-instructor {
|
||||
margin-left: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--gray-700);
|
||||
margin-left: 0.5rem;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
@@ -164,9 +148,9 @@ input[type=checkbox] {
|
||||
|
||||
.course-student-count {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
font-size: var(--text-base);
|
||||
float: right;
|
||||
font-weight: 500;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.course-card-footer {
|
||||
@@ -222,12 +206,12 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.button-links {
|
||||
color: #4C5A67;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.button-links:hover {
|
||||
text-decoration: none;
|
||||
color: #4C5A67;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.icon-background {
|
||||
@@ -243,14 +227,9 @@ input[type=checkbox] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.review-card-footer {
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
padding: 24px;
|
||||
flex: 1;
|
||||
margin: 1rem 0 0 3.5rem;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.submit-review {
|
||||
@@ -290,8 +269,12 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-card-wide {
|
||||
margin-top: 1rem;
|
||||
width: 60%;
|
||||
background-color: white;
|
||||
padding: 0 1rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
width: 50%;
|
||||
box-shadow: var(--shadow-base);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -382,14 +365,14 @@ input[type=checkbox] {
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: 0.75rem 0;
|
||||
padding: 0.55rem 0;
|
||||
color: var(--gray-900);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chapter-description {
|
||||
margin: 0.75rem 3rem 1rem;
|
||||
margin: 0 2rem 0.5rem;
|
||||
}
|
||||
|
||||
.course-content-parent .chapter-description {
|
||||
@@ -397,11 +380,12 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.chapter-icon {
|
||||
margin-right: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.reviews-parent {
|
||||
margin: 5rem 0;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.course-description-section {
|
||||
@@ -410,12 +394,14 @@ input[type=checkbox] {
|
||||
|
||||
.lesson-info {
|
||||
font-size: 16px;
|
||||
color: var(--gray-900);
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
|
||||
.lesson-links {
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -431,9 +417,7 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.course-content-parent .lesson-links {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: var(--text-md);
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.course-outline {
|
||||
@@ -442,7 +426,7 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.lessons {
|
||||
margin-left: 2.5rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
@@ -583,6 +567,7 @@ input[type=checkbox] {
|
||||
font-size: var(--text-md);
|
||||
line-height: 20px;
|
||||
color: var(--gray-900);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.course-details-outline {
|
||||
@@ -817,8 +802,8 @@ input[type=checkbox] {
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
margin: 0.5rem 0 1.3rem;
|
||||
font-size: 0.8rem;
|
||||
margin: 0.5rem 0;
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -1206,16 +1191,15 @@ pre {
|
||||
.course-intructor-rating-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 3.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.course-intructor-rating-section .seperator::before {
|
||||
content: "\00B7";
|
||||
.seperator {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.course-head-container .progress {
|
||||
margin-top: 2.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.course-overlay-card {
|
||||
@@ -1225,7 +1209,7 @@ pre {
|
||||
overflow: auto;
|
||||
width: fit-content;
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
top: 50%;
|
||||
right: 7%;
|
||||
max-width: 400px;
|
||||
z-index: 4;
|
||||
@@ -1237,20 +1221,19 @@ pre {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.course-intructor-rating-section .seperator::before {
|
||||
content: "\00B7";
|
||||
.seperator {
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.video-in-overlay {
|
||||
top: 30%;
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.course-overlay-content {
|
||||
padding: 1.25rem;
|
||||
font-size: var(--text-base);
|
||||
color: var(--gray-700);
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.breadcrumb-destination {
|
||||
@@ -1301,7 +1284,6 @@ pre {
|
||||
|
||||
.course-meta {
|
||||
font-size: var(--text-base);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.avg-rating {
|
||||
@@ -1360,6 +1342,7 @@ pre {
|
||||
|
||||
.reviews-parent .progress {
|
||||
width: 200px;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
.reviews-parent .progress-bar {
|
||||
@@ -1426,3 +1409,14 @@ pre {
|
||||
.carousel-inner {
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
.course-card-wide .breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.lesson-links .icon {
|
||||
margin: 0;
|
||||
margin-right: 0.75rem;
|
||||
fill: none;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7114 3.0002H11.6325C10.4336 2.98895 9.27915 3.45397 8.42278 4.29322C7.5658 5.13306 7.07747 6.27888 7.06517 7.47871L7.06514 7.47871V7.48384V8.17399H5C3.89543 8.17399 3 9.06943 3 10.174V18.9996C3 20.1041 3.89543 20.9996 5 20.9996H18.2602C19.3647 20.9996 20.2602 20.1041 20.2602 18.9996V10.174C20.2602 9.06942 19.3647 8.17399 18.2602 8.17399H16.195V7.56755C16.2063 6.36863 15.7412 5.21421 14.902 4.35784C14.0622 3.50086 12.9163 3.01253 11.7165 3.00023V3.0002H11.7114ZM15.195 8.17399V7.56514V7.56016H15.195C15.2043 6.62548 14.842 5.72537 14.1878 5.05777C13.5341 4.39076 12.6425 4.01043 11.7087 4.0002H11.6301H11.6251V4.00017C10.6904 3.99087 9.79031 4.35318 9.12271 5.00743C8.4557 5.6611 8.07537 6.55271 8.06514 7.48649V8.17399H15.195ZM5 9.17399C4.44772 9.17399 4 9.62171 4 10.174V18.9996C4 19.5518 4.44772 19.9996 5 19.9996H18.2602C18.8124 19.9996 19.2602 19.5518 19.2602 18.9996V10.174C19.2602 9.62171 18.8124 9.17399 18.2602 9.17399H5ZM11.6303 15.804C12.3026 15.804 12.8476 15.259 12.8476 14.5867C12.8476 13.9145 12.3026 13.3694 11.6303 13.3694C10.958 13.3694 10.413 13.9145 10.413 14.5867C10.413 15.259 10.958 15.804 11.6303 15.804ZM13.8476 14.5867C13.8476 15.8113 12.8549 16.804 11.6303 16.804C10.4057 16.804 9.413 15.8113 9.413 14.5867C9.413 13.3622 10.4057 12.3694 11.6303 12.3694C12.8549 12.3694 13.8476 13.3622 13.8476 14.5867Z" fill="#4C5A67"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
27
school/public/icons/symbol-defs.svg
Normal file
27
school/public/icons/symbol-defs.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg id="frappe-symbols" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" class="d-block" xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="icon-video" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.17671 5.60232L7.17669 5.60233C6.79257 5.77084 6.51939 6.12992 6.47795 6.55457L6.47559 6.57879V6.60313V11.3969V11.4212L6.47795 11.4455C6.5194 11.8701 6.79261 12.2291 7.17661 12.3976L7.17678 12.3977C7.55766 12.5647 8.00205 12.5257 8.34708 12.2914L11.9637 9.90232C12.2763 9.71171 12.4756 9.37378 12.4756 9C12.4756 8.62622 12.2763 8.28829 11.9637 8.09768L8.34709 5.70857C8.00212 5.4743 7.5577 5.43521 7.17671 5.60232ZM2 9C2 5.134 5.134 2 9 2C10.8565 2 12.637 2.7375 13.9497 4.05025C15.2625 5.36301 16 7.14349 16 9C16 12.866 12.866 16 9 16C5.134 16 2 12.866 2 9Z" stroke="black"/>
|
||||
</symbol>
|
||||
<svg id="icon-video-blue" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C10.9891 1.5 12.8968 2.29018 14.3033 3.6967C15.7098 5.10322 16.5 7.01088 16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9ZM8.06846 11.8762L11.6968 9.47937C11.8701 9.37679 11.9756 9.19537 11.9756 9C11.9756 8.80463 11.8701 8.62321 11.6968 8.52063L8.06846 6.12375C7.86658 5.9855 7.60312 5.96127 7.37756 6.06021C7.152 6.15916 6.99871 6.36619 6.97559 6.60313V11.3969C6.99871 11.6338 7.152 11.8408 7.37756 11.9398C7.60312 12.0387 7.86658 12.0145 8.06846 11.8762Z" fill="#2D95F0"/>
|
||||
</svg>
|
||||
<symbol xmlns="http://www.w3.org/2000/svg" id="icon-quiz" viewBox="0 0 1024 1024" stroke="#1F272E">
|
||||
<path d="M512 0C229.232 0 0 229.232 0 512c0 282.784 229.232 512 512 512 282.784 0 512.017-229.216 512.017-512C1024.017 229.232 794.785 0 512 0zm0 961.008c-247.024 0-448-201.984-448-449.01 0-247.024 200.976-448 448-448s448.017 200.977 448.017 448S759.025 961.009 512 961.009zm-47.056-160.529h80.512v-81.248h-80.512zm46.112-576.944c-46.88 0-85.503 12.64-115.839 37.889-30.336 25.263-45.088 75.855-44.336 117.775l1.184 2.336h73.44c0-25.008 8.336-60.944 25.008-73.84 16.656-12.88 36.848-19.328 60.56-19.328 27.328 0 48.336 7.424 63.073 22.271 14.72 14.848 22.063 36.08 22.063 63.664 0 23.184-5.44 42.976-16.368 59.376-10.96 16.4-29.328 39.841-55.088 70.322-26.576 23.967-42.992 43.231-49.232 57.807-6.256 14.592-9.504 40.768-9.744 78.512h76.96c0-23.68 1.503-41.136 4.496-52.336 2.975-11.184 11.504-23.823 25.568-37.888 30.224-29.152 54.496-57.664 72.88-85.551 18.336-27.857 27.52-58.593 27.52-92.193 0-46.88-14.176-83.408-42.577-109.568-28.416-26.176-68.272-39.248-119.568-39.248z" fill="#1F272E"/>
|
||||
</symbol>
|
||||
<symbol id="icon-quiz-blue" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1511_749)">
|
||||
<path d="M512 0C229.232 0 0 229.232 0 512C0 794.784 229.232 1024 512 1024C794.784 1024 1024.02 794.784 1024.02 512C1024.02 229.232 794.785 0 512 0ZM512 961.008C264.976 961.008 64 759.024 64 511.998C64 264.974 264.976 63.998 512 63.998C759.024 63.998 960.017 264.975 960.017 511.998C960.017 759.021 759.025 961.009 512 961.009V961.008ZM464.944 800.479H545.456V719.231H464.944V800.479ZM511.056 223.535C464.176 223.535 425.553 236.175 395.217 261.424C364.881 286.687 350.129 337.279 350.881 379.199L352.065 381.535H425.505C425.505 356.527 433.841 320.591 450.513 307.695C467.169 294.815 487.361 288.367 511.073 288.367C538.401 288.367 559.409 295.791 574.146 310.638C588.866 325.486 596.209 346.718 596.209 374.302C596.209 397.486 590.769 417.278 579.841 433.678C568.881 450.078 550.513 473.519 524.753 504C498.177 527.967 481.761 547.231 475.521 561.807C469.265 576.399 466.017 602.575 465.777 640.319H542.737C542.737 616.639 544.24 599.183 547.233 587.983C550.208 576.799 558.737 564.16 572.801 550.095C603.025 520.943 627.297 492.431 645.681 464.544C664.017 436.687 673.201 405.951 673.201 372.351C673.201 325.471 659.025 288.943 630.624 262.783C602.208 236.607 562.352 223.535 511.056 223.535V223.535Z" fill="#2D95F0" stroke="#2D95F0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1511_749">
|
||||
<rect width="1024" height="1024" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</symbol>
|
||||
<symbol id="icon-list-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66699 3.25C2.46808 3.25 2.27731 3.32902 2.13666 3.46967C1.99601 3.61032 1.91699 3.80109 1.91699 4C1.91699 4.19891 1.99601 4.38968 2.13666 4.53033C2.27731 4.67098 2.46808 4.75 2.66699 4.75H2.67399C2.8729 4.75 3.06367 4.67098 3.20432 4.53033C3.34497 4.38968 3.42399 4.19891 3.42399 4C3.42399 3.80109 3.34497 3.61032 3.20432 3.46967C3.06367 3.32902 2.8729 3.25 2.67399 3.25H2.66699ZM5.33299 3.5C5.20038 3.5 5.07321 3.55268 4.97944 3.64645C4.88567 3.74021 4.83299 3.86739 4.83299 4C4.83299 4.13261 4.88567 4.25979 4.97944 4.35355C5.07321 4.44732 5.20038 4.5 5.33299 4.5H14C14.1326 4.5 14.2598 4.44732 14.3535 4.35355C14.4473 4.25979 14.5 4.13261 14.5 4C14.5 3.86739 14.4473 3.74021 14.3535 3.64645C14.2598 3.55268 14.1326 3.5 14 3.5H5.33299ZM5.33299 7.5C5.20038 7.5 5.07321 7.55268 4.97944 7.64645C4.88567 7.74021 4.83299 7.86739 4.83299 8C4.83299 8.13261 4.88567 8.25979 4.97944 8.35355C5.07321 8.44732 5.20038 8.5 5.33299 8.5H14C14.1326 8.5 14.2598 8.44732 14.3535 8.35355C14.4473 8.25979 14.5 8.13261 14.5 8C14.5 7.86739 14.4473 7.74021 14.3535 7.64645C14.2598 7.55268 14.1326 7.5 14 7.5H5.33299ZM4.83299 12C4.83299 11.8674 4.88567 11.7402 4.97944 11.6464C5.07321 11.5527 5.20038 11.5 5.33299 11.5H14C14.1326 11.5 14.2598 11.5527 14.3535 11.6464C14.4473 11.7402 14.5 11.8674 14.5 12C14.5 12.1326 14.4473 12.2598 14.3535 12.3536C14.2598 12.4473 14.1326 12.5 14 12.5H5.33299C5.20038 12.5 5.07321 12.4473 4.97944 12.3536C4.88567 12.2598 4.83299 12.1326 4.83299 12ZM1.91699 8C1.91699 7.80109 1.99601 7.61032 2.13666 7.46967C2.27731 7.32902 2.46808 7.25 2.66699 7.25H2.67399C2.8729 7.25 3.06367 7.32902 3.20432 7.46967C3.34497 7.61032 3.42399 7.80109 3.42399 8C3.42399 8.19891 3.34497 8.38968 3.20432 8.53033C3.06367 8.67098 2.8729 8.75 2.67399 8.75H2.66699C2.46808 8.75 2.27731 8.67098 2.13666 8.53033C1.99601 8.38968 1.91699 8.19891 1.91699 8V8ZM2.66699 11.25C2.46808 11.25 2.27731 11.329 2.13666 11.4697C1.99601 11.6103 1.91699 11.8011 1.91699 12C1.91699 12.1989 1.99601 12.3897 2.13666 12.5303C2.27731 12.671 2.46808 12.75 2.66699 12.75H2.67399C2.8729 12.75 3.06367 12.671 3.20432 12.5303C3.34497 12.3897 3.42399 12.1989 3.42399 12C3.42399 11.8011 3.34497 11.6103 3.20432 11.4697C3.06367 11.329 2.8729 11.25 2.67399 11.25H2.66699Z" fill="#2D95F0"/>
|
||||
</symbol>
|
||||
<symbol id="icon-lock-blue" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.077 1.45H8.022C7.13244 1.44174 6.27599 1.78701 5.64088 2.40993C5.00577 3.03285 4.64397 3.88244 4.635 4.772V5.122H3.75C3.21957 5.122 2.71086 5.33271 2.33579 5.70779C1.96071 6.08286 1.75 6.59157 1.75 7.122V12.513C1.75 13.0434 1.96071 13.5521 2.33579 13.9272C2.71086 14.3023 3.21957 14.513 3.75 14.513H12.289C12.8194 14.513 13.3281 14.3023 13.7032 13.9272C14.0783 13.5521 14.289 13.0434 14.289 12.513V7.122C14.289 6.59157 14.0783 6.08286 13.7032 5.70779C13.3281 5.33271 12.8194 5.122 12.289 5.122H11.404V4.837C11.4123 3.94744 11.067 3.09099 10.4441 2.45588C9.82115 1.82077 8.97156 1.45898 8.082 1.45H8.077ZM10.404 5.122V4.83C10.4104 4.20548 10.1686 3.60398 9.73166 3.15769C9.29475 2.71141 8.69851 2.45686 8.074 2.45H8.014C7.38948 2.4436 6.78798 2.68543 6.34169 3.12234C5.89541 3.55925 5.64086 4.15549 5.634 4.78V5.122H10.404ZM3.75 6.122C3.48478 6.122 3.23043 6.22736 3.04289 6.41489C2.85536 6.60243 2.75 6.85678 2.75 7.122V12.513C2.75 12.7782 2.85536 13.0326 3.04289 13.2201C3.23043 13.4076 3.48478 13.513 3.75 13.513H12.289C12.5542 13.513 12.8086 13.4076 12.9961 13.2201C13.1836 13.0326 13.289 12.7782 13.289 12.513V7.122C13.289 6.85678 13.1836 6.60243 12.9961 6.41489C12.8086 6.22736 12.5542 6.122 12.289 6.122H3.75ZM8.02 10.391C8.1721 10.391 8.31797 10.3306 8.42553 10.223C8.53308 10.1155 8.5935 9.9696 8.5935 9.8175C8.5935 9.6654 8.53308 9.51953 8.42553 9.41197C8.31797 9.30442 8.1721 9.244 8.02 9.244C7.8679 9.244 7.72203 9.30442 7.61447 9.41197C7.50692 9.51953 7.4465 9.6654 7.4465 9.8175C7.4465 9.9696 7.50692 10.1155 7.61447 10.223C7.72203 10.3306 7.8679 10.391 8.02 10.391V10.391ZM9.593 9.817C9.593 10.2343 9.42722 10.6345 9.13213 10.9296C8.83704 11.2247 8.43682 11.3905 8.0195 11.3905C7.60218 11.3905 7.20196 11.2247 6.90687 10.9296C6.61178 10.6345 6.446 10.2343 6.446 9.817C6.446 9.39968 6.61178 8.99946 6.90687 8.70437C7.20196 8.40928 7.60218 8.2435 8.0195 8.2435C8.43682 8.2435 8.83704 8.40928 9.13213 8.70437C9.42722 8.99946 9.593 9.39968 9.593 9.817V9.817Z" fill="#2D95F0"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
@@ -3,6 +3,7 @@
|
||||
{% block title %} {{ lesson.title }} - {{ course.title }} {% endblock %}
|
||||
|
||||
{% block head_include %}
|
||||
{% include "public/icons/symbol-defs.svg" %}
|
||||
<link rel="stylesheet" href="/assets/frappe/css/hljs-night-owl.css">
|
||||
|
||||
{% for ext in page_extensions %}
|
||||
@@ -11,7 +12,6 @@
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div class="common-page-style">
|
||||
<div class="container course-details-page">
|
||||
|
||||
@@ -2,15 +2,16 @@
|
||||
{% block title %}{{ course.title }}
|
||||
{% endblock %}
|
||||
{% block head_include %}
|
||||
{% include "public/icons/symbol-defs.svg" %}
|
||||
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="common-page-style pt-0">
|
||||
<div class="course-home-top-container">
|
||||
{{ CourseHomeHeader(course) }}
|
||||
{{ CourseHeaderOverlay(course) }}
|
||||
<div class="container course-home-page">
|
||||
<div class="course-body-container">
|
||||
{{ CourseHeaderOverlay(course) }}
|
||||
{{ Description(course) }}
|
||||
{{ widgets.CourseOutline(course=course, membership=membership) }}
|
||||
{{ widgets.Reviews(course=course, membership=membership) }}
|
||||
@@ -23,28 +24,32 @@
|
||||
|
||||
{% macro CourseHomeHeader(course) %}
|
||||
<div class="course-head-container"
|
||||
style=" {% if course.image %} background-position: center; background-size: cover; background-image: url({{ course.image }});
|
||||
style=" {% if course.image %}
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-image: url({{ course.image }});
|
||||
{% else %} background-color: var(--gray-200) {% endif %}">
|
||||
<div class="container pt-10 pb-10">
|
||||
{{ BreadCrumb(course) }}
|
||||
{{ CourseCardWide(course) }}
|
||||
<div class="container pt-5 pb-5">
|
||||
<div class="course-card-wide" style="">
|
||||
{{ BreadCrumb(course) }}
|
||||
{{ CourseCardWide(course) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endmacro %}
|
||||
<!-- BreadCrumb -->
|
||||
|
||||
{% macro BreadCrumb(course) %}
|
||||
<div class="breadcrumb">
|
||||
<a class="dark-links" href="/courses">{{ _("All Courses") }}</a>
|
||||
<img class="ml-2 mr-2" src="/assets/school/icons/chevron-right.svg">
|
||||
<img class="ml-1 mr-1" src="/assets/school/icons/chevron-right.svg">
|
||||
<span class="breadcrumb-destination">{{ course.title }}</span>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
<!-- Course Card -->
|
||||
|
||||
{% macro CourseCardWide(course) %}
|
||||
<div class="course-card-wide">
|
||||
<div class="">
|
||||
<div class="d-flex align-items-center">
|
||||
{% for tag in get_tags(course.name) %}
|
||||
<div class="course-card-pills">{{ tag }}</div>
|
||||
@@ -58,33 +63,27 @@
|
||||
</div>
|
||||
|
||||
<div class="course-intructor-rating-section">
|
||||
<div class="d-flex align-items-center">
|
||||
{% set instructors = get_instructors(course.name) %}
|
||||
{% set ins_len = instructors | length %}
|
||||
{% for instructor in instructors %}
|
||||
{% if ins_len > 1 and loop.index == 1 %}
|
||||
<div class="avatar-group overlap">
|
||||
{% endif %}
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
||||
|
||||
{% if ins_len > 1 and loop.index == ins_len %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a class="button-links" href="{{ get_profile_url(instructors[0].username) }}">
|
||||
<span class="course-instructor">
|
||||
{% if ins_len == 1 %}
|
||||
{{ instructors[0].full_name }}
|
||||
{% else %}
|
||||
{% set suffix = "other" if ins_len - 1 == 1 else "others" %}
|
||||
{{ instructors[0].full_name.split(" ")[0] }} and {{ ins_len - 1 }} {{ suffix }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
<div class="vertically-center">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use class="" href="#icon-users">
|
||||
</svg>
|
||||
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
|
||||
</div>
|
||||
|
||||
<span class="seperator"></span>
|
||||
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<div class="vertically-center">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-education"></use>
|
||||
</svg>
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<span class="seperator"></span>
|
||||
|
||||
{% set avg_rating = get_average_rating(course.name) %}
|
||||
{% if avg_rating %}
|
||||
<div class="rating mr-2">
|
||||
@@ -96,19 +95,30 @@
|
||||
</div>
|
||||
<span> {{ avg_rating }} {{ _(" Rating ") }} </span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% if membership %}
|
||||
{% set progress = frappe.utils.cint(membership.progress) %}
|
||||
<div class="progress">
|
||||
<div class="progress" title="{{ progress }}% Completed">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:{{ progress }}%">
|
||||
<span class="sr-only"> {{ progress }} Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-percent">{{ progress }}% Completed</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="bold-heading">Instructors:</div>
|
||||
{% for instructor in get_instructors(course.name) %}
|
||||
<div class="mt-1">
|
||||
{{ widgets.Avatar(member=instructor, avatar_class="avatar-small") }}
|
||||
<a class="button-links" href="{{ get_profile_url(instructor.username) }}">
|
||||
<span class="course-instructor"> {{ instructor.full_name }} </span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endmacro%}
|
||||
@@ -127,31 +137,25 @@
|
||||
You have opted to be notified for this course. You will receive an email when the course becomes available.
|
||||
</div>
|
||||
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<div class="mt-3 mb-4">
|
||||
<img class="mr-3" src="/assets/school/icons/book.svg">
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use class="" href="#icon-users">
|
||||
</svg>
|
||||
{{ get_students(course.name) | length }} {{ _("Enrolled") }}
|
||||
</div>
|
||||
|
||||
{% if get_students(course.name) | length %}
|
||||
{% set initial_members = get_initial_members(course.name) %}
|
||||
<div class="overlay-student-count">
|
||||
{% for member in initial_members %}
|
||||
{% if initial_members | length > 1 and loop.index == 1 %}
|
||||
<div class="avatar-group overlap">
|
||||
{% endif %}
|
||||
{{ widgets.Avatar(member=member, avatar_class="avatar-small") }}
|
||||
<span class="seperator"></span>
|
||||
|
||||
{% if initial_members | length > 1 and loop.index == initial_members | length %}
|
||||
{% if get_lessons(course.name) | length %}
|
||||
<div class="">
|
||||
<svg class="icon icon-md mr-1">
|
||||
<use href="#icon-education"></use>
|
||||
</svg>
|
||||
{{ get_lessons(course.name) | length }} {{ _("Lessons") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="course-meta ml-2">{{ get_students(course.name) | length }} {{ _("Enrolled") }} </div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if not course.disable_self_learning and not membership and not course.upcoming and not restriction.restrict %}
|
||||
<div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
|
||||
|
||||
Reference in New Issue
Block a user