feat: add new design and improved the layout of the course page
This commit is contained in:
Anand Chitipothu
@@ -18,6 +18,7 @@ app_include_css = "/assets/community/css/community.css"
|
||||
app_include_js = "/assets/community/js/community.js"
|
||||
|
||||
# include js, css files in header of web template
|
||||
web_include_css = "/assets/css/community.css"
|
||||
# web_include_css = "/assets/community/css/community.css"
|
||||
# web_include_js = "/assets/community/js/community.js"
|
||||
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"css/lms.css": [
|
||||
"public/css/lms.css"
|
||||
],
|
||||
"css/community.css": [
|
||||
"public/css/style.css"
|
||||
]
|
||||
}
|
||||
|
||||
195
community/public/css/style.css
Normal file
195
community/public/css/style.css
Normal file
@@ -0,0 +1,195 @@
|
||||
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");
|
||||
|
||||
:root {
|
||||
--c1: #fefae0;
|
||||
--c2: #264653;
|
||||
--c3: #e9c46a;
|
||||
--c4: #2a9d8f;
|
||||
--c5: #f4a261;
|
||||
--c6: #e76f51;
|
||||
|
||||
--c7: #ccd5ae;
|
||||
|
||||
--bg: var(--c1);
|
||||
--header-bg: var(--c2);
|
||||
--header-color: var(--c3);
|
||||
--tag-color: var(--c7);
|
||||
--sidebar-bg: var(--c7);
|
||||
|
||||
--h-color: var(--c2);
|
||||
|
||||
--text-color: #333;
|
||||
--text-color-light: #ccc;
|
||||
|
||||
--cta-color: var(--c4);
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.course-header {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
background: var(--header-bg);
|
||||
color: var(--header-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.course-header h1 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.course-type {
|
||||
text-transform: uppercase;
|
||||
font-size: 1.0em;
|
||||
color: var(--tag-color);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: var(--sidebar-bg);
|
||||
margin: 20px 0px;
|
||||
border-radius: 10px;
|
||||
padding: 1px 20px 20px 20px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar h3 {
|
||||
margin-top: 20px;
|
||||
color: var(--c2);
|
||||
}
|
||||
|
||||
.instructor {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.instructor-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.instructor-subtitle {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar .notice {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px dashed var(--text-color);
|
||||
}
|
||||
|
||||
.sidebar .notice a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.course-details {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.course-details h2 {
|
||||
color: var(--h-color);
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
margin: 20px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.chapter-plan {
|
||||
border-radius: 10px;
|
||||
margin: 20px 0px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddc;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.chapter-plan h3 {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chapter-number {
|
||||
background: var(--text-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
align-items: center;
|
||||
padding: 2px 8px 2px 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chapter-description {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.lessons {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.lesson {
|
||||
margin: 5px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.batch {
|
||||
border-radius: 10px;
|
||||
margin: 10px 0px;
|
||||
background: white;
|
||||
border: 1px solid #ddc;
|
||||
}
|
||||
|
||||
.batch-details {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.batch .cta {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
min-height: 28px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #ddc;
|
||||
}
|
||||
|
||||
.batch .cta button {
|
||||
background: var(--cta-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.batch .right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.profile-photo {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.lesson-type {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.preview-video {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.preview-video iframe {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
|
||||
/* override style of base */
|
||||
|
||||
nav.navbar {
|
||||
background: var(--c1) !important;
|
||||
}
|
||||
|
||||
.message {
|
||||
border: 1px dashed var(--text-color);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1,334 +1,178 @@
|
||||
{% extends "templates/base.html" %}
|
||||
{% from "www/macros/profile.html" import profile %}
|
||||
{% block title %}{{ "Courses" }}{% endblock %}
|
||||
{% block title %}{{ course.title }}{% endblock %}
|
||||
{% block head_include %}
|
||||
<meta name="description" content="Courses" />
|
||||
<meta name="keywords" content="Courses {{course.title}}" />
|
||||
<style>
|
||||
section {
|
||||
padding: 2rem;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.dashboard__profile {
|
||||
width: 150px;
|
||||
height: 155px;
|
||||
border-radius: 50%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dashboard__profileSmall {
|
||||
width: 59px;
|
||||
height: 57px;
|
||||
border-radius: 50%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dashboard__abbr {
|
||||
font-size: 50px;
|
||||
width: 155px;
|
||||
height: 155px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dashboard__abbrSmall {
|
||||
font-size: 20px;
|
||||
width: 59px;
|
||||
height: 57px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.dimensions {
|
||||
max-width: 25%;
|
||||
min-width: 25%;
|
||||
}
|
||||
|
||||
.mentor_message {
|
||||
background: #FFFFDD;
|
||||
border: 1px solid #DDDDAA;
|
||||
box-sizing: border-box;
|
||||
width: 75%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.batch_style {
|
||||
padding: 3px;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.green_badge {
|
||||
background: #DDFFDD;
|
||||
border: 1px solid #CCDDCC;
|
||||
color: #448844;
|
||||
}
|
||||
|
||||
.yellow_badge {
|
||||
background: #FFFFDD;
|
||||
border: 1px solid #DDDDAA;
|
||||
color: #888844;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="top-section container" style="padding: 1rem 0rem;">
|
||||
<div class="container pb-5">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" aria-current="page"><a href="/courses">Courses</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="badge badge-info enrollment-badge hide">Enrolled</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="mr-3">
|
||||
<!-- {% if not course_enrolled and frappe.session.user != "Guest" %}
|
||||
<button class="btn btn-dark btn-enroll float-right" data-course="{{ course.name }}">Enroll</button>
|
||||
{% endif %} -->
|
||||
<h2 class="course-title" data-course={{ course.name | urlencode }}>{{ course.title }}</h2>
|
||||
{% if course.short_introduction %} {{course.short_introduction}} {% endif %}
|
||||
</div>
|
||||
{% if course.video_link %}
|
||||
<div>
|
||||
<iframe width="417" height="274" src="{{course.video_link}}" title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if is_mentor %}
|
||||
<h4 class="margin-bottom">Your Batches</h4>
|
||||
{% if mentor_batches %}
|
||||
<div>
|
||||
<div class="mentor_message">
|
||||
You are a mentor for this course. Manage your batches or create a new batch from here.
|
||||
</div>
|
||||
<div class="d-flex flex-wrap">
|
||||
{% for batch in mentor_batches %}
|
||||
<div class="border m-3 dimensions w-50">
|
||||
<div class="p-5">
|
||||
<small class="batch_style {{batch.badge_class}} float-right">{{batch.status}}</small>
|
||||
<div class="mb-3">Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
|
||||
<div>Sessions every {{batch.sessions_on}}</div>
|
||||
<div>{{frappe.utils.format_time(batch.start_time, "short")}} -
|
||||
{{frappe.utils.format_time(batch.end_time, "short")}}
|
||||
</div>
|
||||
</div>
|
||||
{% if batch.mentors %}
|
||||
<div class="mb-3 p-5">
|
||||
<h6>Mentors</h6>
|
||||
{% for mentor in batch.mentors %}
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div class="ml-5">{{mentor.full_name}}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div class="text-right mb-5" style="max-height: 10%;">
|
||||
<button class="btn btn-primary btn-sm mb-2 mr-2 manage-batch" data-batch="{{ batch.name | urlencode }}">Manage</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="btn btn-primary add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}" data-course="{{course.name | urlencode}}">Add a new batch</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="margin-bottom">
|
||||
<div class="mentor_message">
|
||||
<p> You are a mentor for this course. </p>
|
||||
<a class="btn btn-primary" href="/add-a-new-batch?new=1&course={{course.name}}" > Create your first batch </a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if not is_mentor and upcoming_batches %}
|
||||
<div class="upcoming-batches">
|
||||
<h4>Upcoming Batches</h4>
|
||||
<div class="d-flex flex-wrap">
|
||||
{% for batch in upcoming_batches %}
|
||||
<div class="border m-3 dimensions">
|
||||
<div class="p-5">
|
||||
<div class="mb-3">Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
|
||||
<div>Sessions every {{batch.sessions_on}}</div>
|
||||
<div>{{frappe.utils.format_time(batch.start_time, "short")}} -
|
||||
{{frappe.utils.format_time(batch.end_time, "short")}}
|
||||
</div>
|
||||
</div>
|
||||
{% if batch.mentors %}
|
||||
<div class="mb-3 p-5" style="">
|
||||
<h6>Mentors</h6>
|
||||
{% for mentor in batch.mentors %}
|
||||
<div class="d-flex align-items-center border p-2">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div class="ml-5">{{mentor.full_name}}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div class="text-right mb-5" style="max-height: 10%;">
|
||||
<button class="btn btn-primary btn-sm mb-2 mr-2 join-batch" data-batch="{{ batch.name | urlencode }}">Join
|
||||
now</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.description %}
|
||||
<div>
|
||||
<h4 class="margin-bottom mt-5">About the Course</h4>
|
||||
<div class="p-5"> {{frappe.utils.md_to_html(course.description)}} </div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="margin-bottom">
|
||||
<h4 class="margin-bottom">Instructor</h4>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
{{ profile(instructor.photo, instructor.full_name, instructor.abbr, "small")}}
|
||||
</div>
|
||||
<div>
|
||||
<div>{{instructor.full_name}}</div>
|
||||
<div class="text-muted">{{instructor.course_count}} Courses</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="margin-bottom">
|
||||
<h4 class="margin-bottom">Mentors</h4>
|
||||
<div class="d-flex">
|
||||
{% if not mentors %}
|
||||
<em>There are no active mentors for this course.</em>
|
||||
{% endif %}
|
||||
<div class="container">
|
||||
<div class="course-header">
|
||||
<div class="course-type">course</div>
|
||||
<h1>{{course.title}}</h1>
|
||||
</div>
|
||||
|
||||
{% for mentor in mentors %}
|
||||
<div class="d-flex align-items-center mr-5">
|
||||
<div>
|
||||
{{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}}
|
||||
</div>
|
||||
<div>
|
||||
<div>{{mentor.full_name}}</div>
|
||||
{% if mentor.batch_count %}
|
||||
<div class="text-muted">Mentored {{mentor.batch_count}} {% if mentor.batch_count == 1 %} Batch
|
||||
{% else %} Batches {% endif %}</div>
|
||||
{% else %}
|
||||
<div class="text-muted">New Mentor</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% if not is_mentor %}
|
||||
<div class="pt-5 mentor-request">
|
||||
Interested to mentor this course? <span class="apply-now" data-course={{course.name | urlencode}}
|
||||
style="color: #2490EF; cursor: pointer;">Apply now!</span>
|
||||
</div>
|
||||
<div class="pt-5 already-applied hide">
|
||||
You've applied to become a mentor for this course. Your request is currently under review. If you are not
|
||||
any more interested to mentor this course, you can <span class="cancel-request" data-course={{course.name |
|
||||
urlencode}} style="color: #2490EF; cursor: pointer;">Cancel your Application</span>.
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.topics %}
|
||||
<div class="mt-5">
|
||||
<h4 class="margin-bottom">Topics</h4>
|
||||
<div class="">
|
||||
{% for topic in course.topics %}
|
||||
<div class="">
|
||||
<a class="text-decoration-none" href="/courses/{{course.slug}}/{{topic.slug}}">
|
||||
<h5>{{topic.title}}</h5>
|
||||
</a>
|
||||
<div>{{topic.preview | markdown }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
|
||||
aria-selected="true">Course Details</a>
|
||||
</li>
|
||||
{% if current_batch %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="discussions-tab" data-toggle="tab" href="#discussions" role="tab"
|
||||
aria-controls="discussions" aria-selected="false">Discussions</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade py-4 show active" role="tabpanel" id="home">
|
||||
<div class="container">
|
||||
<div>{{ frappe.utils.md_to_html(course.description) }}</div>
|
||||
<div class="list-group">
|
||||
{% for topic in course.topics %}
|
||||
<div class="list-group-item">
|
||||
<h5><a href="/courses/{{course.slug}}/{{topic.slug}}">{{topic.title}}</a></h5>
|
||||
<div>{{topic.preview | markdown }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade py-4" role="tabpanel" id="discussions">
|
||||
<div>
|
||||
{% if batches %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-default dropdown-toggle margin-botton" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="current-batch">{{ batches[0] }}</span>
|
||||
<b class="caret"></b>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
{% for batch in batches %}
|
||||
<li>
|
||||
<a class="grey-link dropdown-item list-batch" href="#" onclick="return false;"
|
||||
data-label="{{ batch | urlencode}}">
|
||||
<span class="alt-underline"> {{ batch }} </span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="border p-5">
|
||||
<div class="form-group">
|
||||
<textarea class="form-control message-text" rows="3"
|
||||
placeholder="Enter your message here."></textarea>
|
||||
<button class="btn btn-primary mt-5 send-message" data-author="{{ author | urlencode}}"
|
||||
data-batch="{{ current_batch | urlencode }}">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if discussions %}
|
||||
<div class="discussions">
|
||||
{% for message in discussions %}
|
||||
<div class="list-group-item">
|
||||
<h6>{{ message.author_name }}</h6>
|
||||
{{ message.message }}
|
||||
<div class="small text-muted text-right">{{ message.creation }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</section>
|
||||
{% endblock %}
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-md-12">
|
||||
<div class="course-details">
|
||||
{{ CourseDescription(course) }}
|
||||
{{ BatchSection(course, is_mentor, upcoming_batches, mentor_batches) }}
|
||||
{{ CourseOutline(course) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-12">
|
||||
<div class="sidebar">
|
||||
{{ InstructorsSection(instructor) }}
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
{{ MentorsSection(mentors) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% macro CourseDescription(course) %}
|
||||
<h2>Course Description</h2>
|
||||
|
||||
<div class="course-description">
|
||||
{{ course.short_introduction }}
|
||||
</div>
|
||||
|
||||
{% 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></iframe>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro BatchSection(course, is_mentor, upcoming_batches, mentor_batches) %}
|
||||
{% if is_mentor %}
|
||||
{{ BatchSectionForMentors(course, mentor_batches) }}
|
||||
{% else %}
|
||||
{{ BatchSectionForStudents(course, upcoming_batches) }}
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro RenderBatch(batch, can_manage=False) %}
|
||||
<div class="batch">
|
||||
<div class="batch-details">
|
||||
<div>Session every {{batch.sessions_on}}</div>
|
||||
<div>{{frappe.utils.format_time(batch.start_time, "short")}} -
|
||||
{{frappe.utils.format_time(batch.end_time, "short")}}</div>
|
||||
<div>Starting {{frappe.utils.format_date(batch.start_date, "medium")}}</div>
|
||||
<div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
|
||||
|
||||
{% for m in batch.mentors %}
|
||||
<div>
|
||||
{% if m.photo_url %}
|
||||
<img class="profile-photo" src="{{m.photo_url}}">
|
||||
{% endif %}
|
||||
<span class="instructor-title">{{m.full_name}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="cta">
|
||||
<div class="">
|
||||
{% if can_manage %}
|
||||
<button type="button">Manage</button>
|
||||
{% else %}
|
||||
<button type="button">Join this Batch</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro BatchSectionForMentors(course, mentor_batches) %}
|
||||
<h2>Your Batches</h2>
|
||||
|
||||
{% if mentor_batches %}
|
||||
<div class="message">
|
||||
You are a mentor for this course. Manage your batches or create a new batch from here.
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
{% for batch in mentor_batches %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
{{ RenderBatch(batch, can_manage=True) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<a class="btn btn-primary add-batch margin-bottom" href="/add-a-new-batch?new=1&course={{course.name}}" data-course="{{course.name | urlencode}}">Add a new batch</a>
|
||||
{% else %}
|
||||
<div class="mentor_message">
|
||||
<p> You are a mentor for this course. </p>
|
||||
<a class="btn btn-primary" href="/add-a-new-batch?new=1&course={{course.name}}" >Create your first batch</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro BatchSectionForStudents(course, upcoming_batches) %}
|
||||
<h2>Upcoming Batches</h2>
|
||||
|
||||
{% for batch in upcoming_batches %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
{{ RenderBatch(batch, can_manage=False) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro CourseOutline(course) %}
|
||||
<h2>Course Outline</h2>
|
||||
|
||||
{% for chapter in course.topics %}
|
||||
<div class="chapter-plan">
|
||||
<h3><span class="chapter-number">{{loop.index}}</span> {{chapter.title}}</h3>
|
||||
<div class="chapter-description">
|
||||
{{chapter.preview | markdown}}
|
||||
</div>
|
||||
|
||||
{#
|
||||
<div class="lessons">
|
||||
{% for lesson in chapter.lessons %}
|
||||
<div class="lesson">
|
||||
<span class="lesson-type"><i class="{{lesson.icon}}"></i></span>
|
||||
<span class="lesson-title">{{lesson.title}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
#}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro InstructorsSection(instructor) %}
|
||||
<h3>Instructor</h3>
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{instructor.full_name}}</div>
|
||||
<div class="instructor-subtitle">Created {{instructor.course_count}} courses</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro MentorsSection(instructor) %}
|
||||
<h3>Mentors</h3>
|
||||
{% for m in mentors %}
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{m.full_name}}</div>
|
||||
<div class="instructor-subtitle">Mentored {{m.batch_count}} batches</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="notice">
|
||||
Interested to become a mentor?
|
||||
|
||||
<div><a href="#">Apply Now!</a></div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
Reference in New Issue
Block a user