feat: course header wide
This commit is contained in:
pateljannat
@@ -5,6 +5,7 @@
|
|||||||
from __future__ import unicode_literals
|
from __future__ import unicode_literals
|
||||||
import frappe
|
import frappe
|
||||||
from frappe.model.document import Document
|
from frappe.model.document import Document
|
||||||
|
from ...utils import slugify
|
||||||
|
|
||||||
class Chapter(Document):
|
class Chapter(Document):
|
||||||
def get_lessons(self):
|
def get_lessons(self):
|
||||||
@@ -13,3 +14,6 @@ class Chapter(Document):
|
|||||||
fields='name',
|
fields='name',
|
||||||
order_by="index_")
|
order_by="index_")
|
||||||
return [frappe.get_doc('Lesson', row['name']) for row in rows]
|
return [frappe.get_doc('Lesson', row['name']) for row in rows]
|
||||||
|
|
||||||
|
def get_slugified_chapter_title(self):
|
||||||
|
return slugify(self.title)
|
||||||
|
|||||||
@@ -1,28 +1,42 @@
|
|||||||
<div class="chapter-teaser">
|
<div>
|
||||||
<div class="teaser-body">
|
<a data-target="#{{ chapter.get_slugified_chapter_title() }}" data-toggle="collapse" aria-expanded="false">
|
||||||
<div class="chapter-title mb-5 font-weight-bold"><span class="mr-1">{{index}}.</span> {{ chapter.title }}</div>
|
<img class="" src="/assets/community/icons/side-arrow.svg"/>
|
||||||
<div class="chapter-description">
|
<span class="chapter-title">
|
||||||
{{ chapter.description or "" }}
|
{{ chapter.title }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div class="chapter-content collapse navbar-collapse" id="{{ chapter.get_slugified_chapter_title() }}">
|
||||||
|
<div class="course-card-meta">
|
||||||
|
{{ chapter.description }}
|
||||||
</div>
|
</div>
|
||||||
<div class="chapter-lessons">
|
<div class="lessons">
|
||||||
{% for lesson in chapter.get_lessons() %}
|
{% for lesson in chapter.get_lessons() %}
|
||||||
<div class="lesson-teaser">
|
<div class="lesson-info">
|
||||||
{% if show_link or lesson.include_in_preview %}
|
{% if show_link or lesson.include_in_preview %}
|
||||||
<a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}"
|
<a class="" href="{{ course.get_learn_url(course.get_lesson_index(lesson.name)) }}{{course.query_parameter}}" data-course="{{ course.name }}">
|
||||||
data-course="{{ course.name }}">{{ lesson.title }}</a>
|
{{ loop.index }}.
|
||||||
{% else %}
|
{{ lesson.title }}</a>
|
||||||
<div class="no-preview" title="This lesson is not available for preview">
|
{% else %}
|
||||||
<span style="color: #2490ef;">
|
<div title="This lesson is not available for preview">
|
||||||
{{ lesson.title }}
|
<span class="">
|
||||||
</span>
|
{{ loop.index }}.
|
||||||
<i class="fa fa-lock ml-2"></i>
|
{{ lesson.title }}
|
||||||
|
</span>
|
||||||
|
<i class="fa fa-lock ml-2"></i>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
|
||||||
{% if show_progress and not course.is_mentor(frappe.session.user) and lesson.get_progress() %}
|
|
||||||
<span class="ml-5 badge p-2 {{ lesson.get_slugified_class() }}"> {{ lesson.get_progress() }}</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script>
|
||||||
|
frappe.ready(() => {
|
||||||
|
var elements = $(".collapse")
|
||||||
|
elements.each((i, elem) => {
|
||||||
|
if (i <= 5) {
|
||||||
|
$(elem).addClass("show")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
<div class="mt-5">
|
<div class="">
|
||||||
<h3> Course Outline </h3>
|
<h3>
|
||||||
|
Course Outline
|
||||||
{% for chapter in course.get_chapters() %}
|
</h3>
|
||||||
{{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
|
<div class="coure-outline">
|
||||||
{% endfor %}
|
{% for chapter in course.get_chapters() %}
|
||||||
|
{{ widgets.ChapterTeaser(index=loop.index, chapter=chapter, course=course, batch=batch, show_link=show_link, show_progress=show_progress)}}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,461 +1,547 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--c1: #fefae0;
|
--c1: #fefae0;
|
||||||
--c2: #264653;
|
--c2: #264653;
|
||||||
--c3: #e9c46a;
|
--c3: #e9c46a;
|
||||||
--c4: #2a9d8f;
|
--c4: #2a9d8f;
|
||||||
--c5: #f4a261;
|
--c5: #f4a261;
|
||||||
--c6: #e76f51;
|
--c6: #e76f51;
|
||||||
--c7: #ccd5ae;
|
--c7: #ccd5ae;
|
||||||
--c8: #EEEEEE;
|
--c8: #EEEEEE;
|
||||||
|
--bg: var(--c1);
|
||||||
--bg: var(--c1);
|
--header-bg: var(--c2);
|
||||||
--header-bg: var(--c2);
|
--header-color: var(--c3);
|
||||||
--header-color: var(--c3);
|
--tag-color: var(--c7);
|
||||||
--tag-color: var(--c7);
|
--sidebar-bg: var(--c7);
|
||||||
--sidebar-bg: var(--c7);
|
--h-color: var(--c2);
|
||||||
|
--text-color: #192734;
|
||||||
--h-color: var(--c2);
|
--text-color-light: #ccc;
|
||||||
|
--cta-color: var(--c4);
|
||||||
--text-color: #192734;
|
--send-message: var(--c7);
|
||||||
--text-color-light: #ccc;
|
--received-message: var(--c8);
|
||||||
|
--checkbox-size: 14px;
|
||||||
--cta-color: var(--c4);
|
--control-bg: var(--gray-100);
|
||||||
--send-message: var(--c7);
|
--muted-text: #4C5A67;
|
||||||
--received-message: var(--c8);
|
--button-background: #EEF0F2;
|
||||||
--checkbox-size: 14px;
|
|
||||||
--control-bg: var(--gray-100);
|
|
||||||
--muted-text: #4C5A67;
|
|
||||||
--button-background: #EEF0F2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-plan {
|
.chapter-plan {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 20px 0px;
|
margin: 20px 0px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border: 1px solid #ddc;
|
border: 1px solid #ddc;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-plan h3 {
|
.chapter-plan h3 {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
|
||||||
|
|
||||||
.lessons {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
.lessons .lesson {
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch {
|
.batch {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin: 10px 0px;
|
margin: 10px 0px;
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
||||||
border: 1px solid #ddc;
|
border: 1px solid #ddc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-details {
|
.batch-details {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch .cta {
|
.batch .cta {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
border-top: 1px solid #ddc;
|
border-top: 1px solid #ddc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch .right {
|
.batch .right {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.profile-photo {
|
img.profile-photo {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lesson-type {
|
.lesson-type {
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-video {
|
.preview-video {
|
||||||
margin: 20px 0px;
|
margin: 20px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-video iframe {
|
.preview-video iframe {
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
border: 1px dashed var(--text-color);
|
border: 1px dashed var(--text-color);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msger-inputarea {
|
.msger-inputarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-top: 2px solid #ddd;
|
border-top: 2px solid #ddd;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msger-inputarea * {
|
.msger-inputarea * {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msger-input {
|
.msger-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-section {
|
.message-section {
|
||||||
margin-left: 3%;
|
margin-left: 3%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-4 {
|
.display-4 {
|
||||||
color: #2D005A;
|
color: #2D005A;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 51px;
|
line-height: 51px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
padding: 5rem 0 5rem 0;
|
padding: 5rem 0 5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages-container {
|
.messages-container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages {
|
.messages {
|
||||||
overflow: auto;
|
height: 450px;
|
||||||
height: 450px;
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
align-items: flex-start;
|
padding: 8px;
|
||||||
padding: 8px;
|
list-style-type: none;
|
||||||
list-style-type: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages li {
|
.messages li {
|
||||||
background: #F7F5F5;
|
background: #F7F5F5;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
margin: 2px 8px 2px 0;
|
margin: 2px 8px 2px 0;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages li.ours {
|
.messages li.ours {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
margin: 2px 0 2px 8px;
|
margin: 2px 0 2px 8px;
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: #fff
|
color: #fff
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-para {
|
.message-para {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.batch-header {
|
.batch-header {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
border: 2px solid #ddd;
|
border: 2px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.page-card {
|
.page-card {
|
||||||
max-width: 360px;
|
max-width: 360px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 70px auto;
|
margin: 70px auto;
|
||||||
border: 1px solid #d1d8dd;
|
border: 1px solid #d1d8dd;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-card .page-card-head {
|
.page-card .page-card-head {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
margin: -15px;
|
margin: -15px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
border-bottom: 1px solid #d1d8dd;
|
border-bottom: 1px solid #d1d8dd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-card .page-card-head .indicator {
|
.page-card .page-card-head .indicator {
|
||||||
color: #36414C;
|
color: #36414C;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-card .page-card-head .indicator::before {
|
.page-card .page-card-head .indicator::before {
|
||||||
margin: 0 6px 0.5px 0px;
|
margin: 0 6px 0.5px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-card .btn {
|
.page-card .btn {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
appearance: auto;
|
appearance: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.partiallycomplete {
|
.partiallycomplete {
|
||||||
background: #FEF4E2;
|
background: #FEF4E2;
|
||||||
color: #976417;
|
color: #976417;
|
||||||
}
|
}
|
||||||
|
|
||||||
.partiallycomplete img {
|
.partiallycomplete img {
|
||||||
background: #976417;
|
background: #976417;
|
||||||
}
|
}
|
||||||
|
|
||||||
.complete {
|
.complete {
|
||||||
background: #EAF5EE;
|
background: #EAF5EE;
|
||||||
color: #38A160;
|
color: #38A160;
|
||||||
}
|
}
|
||||||
|
|
||||||
.complete img {
|
.complete img {
|
||||||
background: #38A160;
|
background: #38A160;
|
||||||
}
|
}
|
||||||
|
|
||||||
.incomplete {
|
.incomplete {
|
||||||
background: #FEECEC;
|
background: #FEECEC;
|
||||||
color: #E24C4C;
|
color: #E24C4C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.incomplete img {
|
.incomplete img {
|
||||||
background: #E24C4C;
|
background: #E24C4C;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-image {
|
.progress-image {
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-image {
|
.course-image {
|
||||||
height: 168px;
|
height: 168px;
|
||||||
width: 352px;
|
width: 352px;
|
||||||
border-top-left-radius: 8px;
|
border-top-left-radius: 8px;
|
||||||
border-top-right-radius: 8px;
|
border-top-right-radius: 8px;
|
||||||
background-size: 352px 168px;
|
background-size: 352px 168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.course-image {
|
.course-image {
|
||||||
width: 336px;
|
width: 336px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
.course-image {
|
.course-image {
|
||||||
width: 312px;
|
width: 312px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-tags {
|
.course-tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card-pills {
|
.course-card-pills {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
margin: 0px 10px;
|
margin: 0px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 120%;
|
line-height: 120%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 0.011em;
|
letter-spacing: 0.011em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #2C5477;
|
color: #2C5477;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.common-page-style {
|
.common-page-style {
|
||||||
background: #F4F5F6;
|
background: #F4F5F6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.common-card-style {
|
.common-card-style {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
align-items: flex-start;
|
background: #FFFFFF;
|
||||||
background: #FFFFFF;
|
border-radius: 8px;
|
||||||
border-radius: 8px;
|
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
||||||
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
position: relative;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card {
|
.course-card {
|
||||||
width: 352px;
|
flex-direction: column;
|
||||||
height: 380px;
|
width: 352px;
|
||||||
margin: 0px 16px 32px;
|
height: 380px;
|
||||||
|
margin: 0px 16px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.common-card-style {
|
.common-card-style {
|
||||||
width: 336px;
|
width: 336px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
.common-card-style {
|
.common-card-style {
|
||||||
width: 312px;
|
width: 312px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card-meta {
|
.course-card-meta {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 135%;
|
line-height: 135%;
|
||||||
margin: 16px 0px 8px;
|
margin: 16px 0px 8px;
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
height: 15px;
|
height: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card-content {
|
.course-card-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px 24px 20px;
|
padding: 0px 24px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card-title {
|
.course-card-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 156%;
|
line-height: 156%;
|
||||||
letter-spacing: -0.014em;
|
letter-spacing: -0.014em;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-divider {
|
.card-divider {
|
||||||
border: 1px solid #E2E6E9;
|
border: 1px solid #E2E6E9;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-card-meta-2 {
|
.course-card-meta-2 {
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-instructor {
|
.course-instructor {
|
||||||
margin: 0px 8px;
|
margin: 0px 8px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 135%;
|
line-height: 135%;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-student-count {
|
.course-student-count {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 135%;
|
line-height: 135%;
|
||||||
color: var(--muted-text);
|
color: var(--muted-text);
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-course-link {
|
.view-course-link {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: var(--button-background);
|
background: var(--button-background);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 8px 0px 8px;
|
padding: 8px 0px 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 135%;
|
line-height: 135%;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-parent {
|
.cards-parent {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
.course-cards-parent {
|
.course-cards-parent {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.courses-header {
|
.courses-header {
|
||||||
padding: 50px 30px 20px;
|
padding: 50px 30px 20px;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 145%;
|
line-height: 145%;
|
||||||
letter-spacing: -0.0175em
|
letter-spacing: -0.0175em
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-top-section {
|
.course-top-section {
|
||||||
margin: 0px 140px 0px;
|
margin: 0px 140px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.course-top-section {
|
.course-top-section {
|
||||||
margin: 0px 40px 0px;
|
margin: 0px 40px 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 375px) {
|
@media (max-width: 375px) {
|
||||||
.course-top-section {
|
.course-top-section {
|
||||||
margin: 0px 24px 0px;
|
margin: 0px 24px 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-primary {
|
.is-primary {
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-links:hover {
|
.button-links:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-background {
|
.icon-background {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-margin {
|
.small-margin {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviews-heading {
|
.reviews-heading {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reviews-title {
|
.reviews-title {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
line-height: 145%;
|
line-height: 145%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-card {
|
.review-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
margin: 0px 16px 32px;
|
margin: 0px 16px 32px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-card-footer {
|
.review-card-footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-content {
|
.review-content {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 135%;
|
line-height: 135%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.custom-checkbox>label>input {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.custom-checkbox>label>img {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
border: 1px solid black;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.custom-checkbox>label>input:checked+img {
|
||||||
|
background: url(/assets/community/images/Vector.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-size: 15px 15px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-card-wide {
|
||||||
|
width: 1120px;
|
||||||
|
height: 248px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 24px;
|
||||||
|
background: #E2E6E9;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-image-wide {
|
||||||
|
width: 352px;
|
||||||
|
height: 200px;
|
||||||
|
background-size: 352px 200px;
|
||||||
|
margin-right: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-home-page {
|
||||||
|
padding: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-card-wide-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-card-wide-title {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 120%;
|
||||||
|
color: #192734;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-card-wide-intro {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 172%;
|
||||||
|
letter-spacing: -0.011em;
|
||||||
|
color: #4C5A67;
|
||||||
|
width: 688px;
|
||||||
|
height: 80px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 0px 12px 24px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-learning {
|
||||||
|
background: var(--primary-color);
|
||||||
|
width: 185px;
|
||||||
|
height: 48px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-preview {
|
||||||
|
background: #FFFFFF;
|
||||||
|
width: 234px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.course-buttons {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
outline: 1px solid #f00 !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
}
|
||||||
3
community/public/icons/down-arrow.svg
Normal file
3
community/public/icons/down-arrow.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1 1L5 5L9 1" stroke="#4C5A67" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 213 B |
3
community/public/icons/play.svg
Normal file
3
community/public/icons/play.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<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="M8 18L16 12L8 6" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 237 B |
@@ -1,3 +1,3 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="#192734" stroke-linecap="round" stroke-linejoin="round"/>
|
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="#192734" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 278 B |
3
community/public/icons/side-arrow.svg
Normal file
3
community/public/icons/side-arrow.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1 9L5 5L1 1" stroke="#4C5A67" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 190 B |
3
community/public/icons/tick.svg
Normal file
3
community/public/icons/tick.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg class="icon">
|
||||||
|
<use href="#icon-tick"></use>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 58 B |
Binary file not shown.
|
Before Width: | Height: | Size: 206 B After Width: | Height: | Size: 200 B |
@@ -14,9 +14,12 @@
|
|||||||
{% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
|
{% set options = [question.option_1, question.option_2, question.option_3, question.option_4] %}
|
||||||
{% for option in options %}
|
{% for option in options %}
|
||||||
{% if option %}
|
{% if option %}
|
||||||
<div class="checkbox mb-2">
|
<div class="custom-checkbox mb-2">
|
||||||
<input {% if question.multiple %} type="checkbox" {% else %} type="radio"
|
<label>
|
||||||
name="{{ question.question | urlencode }}" {% endif %} class="option" value="{{ option | urlencode }}">
|
<input {% if question.multiple %} type="checkbox" {% else %} type="radio"
|
||||||
|
name="{{ question.question | urlencode }}" {% endif %} class="option" value="{{ option | urlencode }}">
|
||||||
|
<img />
|
||||||
|
</label>
|
||||||
<span class="label-area">{{ option }}</span>
|
<span class="label-area">{{ option }}</span>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@@ -20,19 +20,16 @@
|
|||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
{% for member in members %}
|
{% for member in members %}
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
{{ widgets.Avatar(member=member, avatar_class="avatar-large") }}
|
{{ widgets.Avatar(member=member, avatar_class="avatar-medium") }}
|
||||||
<div class="d-flex flex-column ml-2">
|
<div class="d-flex flex-column ml-2">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<a class="anchor_style ml-2" href="/{{member.username}}">
|
<a class="anchor_style ml-2" href="/{{member.username}}">
|
||||||
<h3>{{ member.full_name }}</h3>
|
<div class="review-content">{{ member.full_name }}</div>
|
||||||
</a>
|
</a>
|
||||||
{% if course.is_mentor(member.name) %}
|
{% if course.is_mentor(member.name) %}
|
||||||
<div class="badge badge-success ml-2 align-self-start">Mentor</div>
|
<div class="badge badge-success ml-2 align-self-start">Mentor</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if member.bio %}
|
|
||||||
<i class="ml-2">{{member.bio}}</i>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if loop.index != member_count %}
|
{% if loop.index != member_count %}
|
||||||
|
|||||||
@@ -1,112 +1,109 @@
|
|||||||
{% extends "templates/base.html" %}
|
{% extends "templates/base.html" %}
|
||||||
{% from "www/macros/common_macro.html" import MentorsSection %}
|
{% from "www/macros/common_macro.html" import MentorsSection %}
|
||||||
{% block title %}{{ course.title }}{% endblock %}
|
{% block title %}{{ course.title }}
|
||||||
{% block head_include %}
|
{% endblock %}
|
||||||
<meta name="description" content="Courses" />
|
{% block head_include %}
|
||||||
<meta name="keywords" content="Courses {{course.title}}" />
|
<meta name="description" content="Courses"/>
|
||||||
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
<meta name="keywords" content="Courses {{course.title}}"/>
|
||||||
|
<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container">
|
<div class="common-page-style course-home-page">
|
||||||
<div class="course-header">
|
<div class="common-card-style course-card-wide">
|
||||||
<div class="mb-5">
|
<div class="course-image-wide" style="background-image: url({{ course.image }});">
|
||||||
<a class="anchor_style" href="/courses">Courses</a> / <span class="text-muted">{{ course.title }}</span>
|
<div class="course-tags">
|
||||||
</div>
|
{% for tag in course.get_tags() %}
|
||||||
<div class="d-flex justify-content-between align-items-end">
|
<div class="course-card-pills">{{ tag }}</div>
|
||||||
<h2 id="course-title" data-course="{{course.name}}">{{course.title}}</h2>
|
{% endfor %}
|
||||||
{% if not course.disable_self_learning and not membership %}
|
</div>
|
||||||
<div>
|
|
||||||
<button class="btn btn-primary join-batch" data-course="{{ course.name | urlencode }}"> Start Learning </button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="course-card-wide-content">
|
||||||
|
<div class="course-card-wide-title">
|
||||||
|
{{ course.title }}
|
||||||
|
</div>
|
||||||
|
<div class="course-card-wide-intro">
|
||||||
|
{{ course.short_introduction }}
|
||||||
|
</div>
|
||||||
|
<div class="course-buttons">
|
||||||
|
<div class="wide-button start-learning">
|
||||||
|
Start Learning
|
||||||
|
<img class="" src="/assets/community/icons/white-arrow.svg"/>
|
||||||
|
</div>
|
||||||
|
<div class="wide-button video-preview">
|
||||||
|
Watch Video Preview
|
||||||
|
<img class="" src="/assets/community/icons/play.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="course-home-outline">
|
||||||
|
{{ widgets.CourseOutline(course=course, show_link=membership) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
{% macro CourseVideo(course) %}
|
||||||
|
{% if course.video_link %}
|
||||||
|
<div class="preview-video">
|
||||||
|
<iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro CourseDescription(course) %}
|
||||||
|
<div class="mt-5">
|
||||||
|
<h3>Course Description</h3>
|
||||||
|
|
||||||
|
<div class="course-description text-justify">
|
||||||
|
{{ frappe.utils.md_to_html(course.description) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro BatchSection(course) %}
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-md-12">
|
||||||
|
{% if course.is_mentor(frappe.session.user) %}
|
||||||
|
{{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
|
||||||
|
{% else %}
|
||||||
|
{{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="course-short-intro">{{ course.short_introduction }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro BatchSectionForMentors(course, mentor_batches) %}
|
||||||
|
<h2>Your Batches</h2>
|
||||||
|
|
||||||
<div class="">
|
{% if mentor_batches %}
|
||||||
<div class="">
|
|
||||||
<div class="course-details">
|
<div class="row">
|
||||||
{{ CourseVideo(course) }}
|
{% for batch in mentor_batches %}
|
||||||
{{ CourseDescription(course) }}
|
<div class="col-lg-4 col-md-6">
|
||||||
{{ widgets.InstructorSection(instructor=course.get_instructor()) }}
|
{{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
|
||||||
{{ BatchSection(course) }}
|
</div>
|
||||||
{{ widgets.CourseOutline(course=course, show_link=membership) }}
|
{% endfor %}
|
||||||
{{ widgets.Reviews(course=course, membership=membership) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% macro CourseVideo(course) %}
|
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new batch</a>
|
||||||
{% if course.video_link %}
|
{% else %}
|
||||||
<div class="preview-video">
|
<div class="mentor_message">
|
||||||
<iframe width="560" height="315" src="{{course.video_link}}" title="YouTube video player" frameborder="0"
|
<p>
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
You are a mentor for this course.
|
||||||
allowfullscreen></iframe>
|
</p>
|
||||||
</div>
|
<a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
|
||||||
{% endif %}
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
{% macro BatchSectionForStudents(course, upcoming_batches) %}
|
||||||
{% macro CourseDescription(course) %}
|
{% if upcoming_batches %}
|
||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
<h3>Course Description</h3>
|
<h3 class="upcoming">Upcoming Batches</h3>
|
||||||
|
<div class="row">
|
||||||
<div class="course-description text-justify">
|
{% for batch in upcoming_batches %}
|
||||||
{{ frappe.utils.md_to_html(course.description) }}
|
<div class="col-lg-4 col-md-6">
|
||||||
</div>
|
{{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
|
||||||
</div>
|
</div>
|
||||||
{% endmacro %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
{% macro BatchSection(course) %}
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-8 col-md-12">
|
|
||||||
{% if course.is_mentor(frappe.session.user) %}
|
|
||||||
{{ BatchSectionForMentors(course, course.get_batches(mentor=frappe.session.user)) }}
|
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ BatchSectionForStudents(course, course.get_upcoming_batches()) }}
|
<div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro BatchSectionForMentors(course, mentor_batches) %}
|
|
||||||
<h2>Your Batches</h2>
|
|
||||||
|
|
||||||
{% if mentor_batches %}
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
{% for batch in mentor_batches %}
|
|
||||||
<div class="col-lg-4 col-md-6">
|
|
||||||
{{ widgets.RenderBatch(course=course, batch=batch, can_manage=True) }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a class="add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}">Add a new
|
|
||||||
batch</a>
|
|
||||||
{% else %}
|
|
||||||
<div class="mentor_message">
|
|
||||||
<p> You are a mentor for this course. </p>
|
|
||||||
<a class="" href="/add-a-new-batch?new=1&course={{course.name}}">Create your first batch</a>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro BatchSectionForStudents(course, upcoming_batches) %}
|
|
||||||
{% if upcoming_batches %}
|
|
||||||
<div class="mt-5">
|
|
||||||
<h3 class="upcoming">Upcoming Batches</h3>
|
|
||||||
<div class="row">
|
|
||||||
{% for batch in upcoming_batches %}
|
|
||||||
<div class="col-lg-4 col-md-6">
|
|
||||||
{{ widgets.RenderBatch(course=course, batch=batch, can_join=True) }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<div class="mt-5 upcoming">There are no Upcoming Batches for this course currently.</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|||||||
Reference in New Issue
Block a user