fix: ui and removed mockup
This commit is contained in:
pateljannat
@@ -18,7 +18,8 @@
|
|||||||
"fieldname": "title",
|
"fieldname": "title",
|
||||||
"fieldtype": "Data",
|
"fieldtype": "Data",
|
||||||
"in_list_view": 1,
|
"in_list_view": 1,
|
||||||
"label": "Title"
|
"label": "Title",
|
||||||
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "description",
|
"fieldname": "description",
|
||||||
@@ -30,7 +31,8 @@
|
|||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"in_list_view": 1,
|
"in_list_view": 1,
|
||||||
"label": "Course",
|
"label": "Course",
|
||||||
"options": "LMS Course"
|
"options": "LMS Course",
|
||||||
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "lessons",
|
"fieldname": "lessons",
|
||||||
@@ -55,7 +57,7 @@
|
|||||||
"link_fieldname": "chapter"
|
"link_fieldname": "chapter"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"modified": "2021-08-19 13:43:51.025072",
|
"modified": "2021-08-31 10:43:45.866864",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "LMS",
|
"module": "LMS",
|
||||||
"name": "Chapter",
|
"name": "Chapter",
|
||||||
|
|||||||
@@ -22,18 +22,21 @@
|
|||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"in_list_view": 1,
|
"in_list_view": 1,
|
||||||
"label": "Chapter",
|
"label": "Chapter",
|
||||||
"options": "Chapter"
|
"options": "Chapter",
|
||||||
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "title",
|
"fieldname": "title",
|
||||||
"fieldtype": "Data",
|
"fieldtype": "Data",
|
||||||
"in_list_view": 1,
|
"in_list_view": 1,
|
||||||
"label": "Title"
|
"label": "Title",
|
||||||
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "body",
|
"fieldname": "body",
|
||||||
"fieldtype": "Markdown Editor",
|
"fieldtype": "Markdown Editor",
|
||||||
"label": "Body"
|
"label": "Body",
|
||||||
|
"reqd": 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"fieldname": "index_label",
|
"fieldname": "index_label",
|
||||||
@@ -67,7 +70,7 @@
|
|||||||
],
|
],
|
||||||
"index_web_pages_for_search": 1,
|
"index_web_pages_for_search": 1,
|
||||||
"links": [],
|
"links": [],
|
||||||
"modified": "2021-07-27 16:28:29.203624",
|
"modified": "2021-08-31 10:44:14.168257",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "LMS",
|
"module": "LMS",
|
||||||
"name": "Lesson",
|
"name": "Lesson",
|
||||||
|
|||||||
@@ -13,13 +13,14 @@
|
|||||||
"fieldtype": "Link",
|
"fieldtype": "Link",
|
||||||
"in_list_view": 1,
|
"in_list_view": 1,
|
||||||
"label": "Lesson",
|
"label": "Lesson",
|
||||||
"options": "Lesson"
|
"options": "Lesson",
|
||||||
|
"reqd": 1
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"index_web_pages_for_search": 1,
|
"index_web_pages_for_search": 1,
|
||||||
"istable": 1,
|
"istable": 1,
|
||||||
"links": [],
|
"links": [],
|
||||||
"modified": "2021-07-27 16:53:52.732191",
|
"modified": "2021-08-31 10:44:42.048232",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "LMS",
|
"module": "LMS",
|
||||||
"name": "Lessons",
|
"name": "Lessons",
|
||||||
|
|||||||
@@ -70,7 +70,7 @@
|
|||||||
<a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
|
<a class="stretched-link" href="{{ course.get_learn_url(lesson_index) }}{{ query_parameter }}"></a>
|
||||||
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="view-course-link">
|
<div class="view-course-link is-default">
|
||||||
View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
|
View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
|
||||||
</div>
|
</div>
|
||||||
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
|
<a class="stretched-link" href="/courses/{{ course.name }}"></a>
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
{% if not course.upcoming %}
|
||||||
<div class="reviews-parent">
|
<div class="reviews-parent">
|
||||||
{% set reviews = course.get_reviews() %}
|
{% set reviews = course.get_reviews() %}
|
||||||
{% if reviews | length or course.is_eligible_to_review(membership) %}
|
{% if reviews | length or course.is_eligible_to_review(membership) %}
|
||||||
@@ -35,6 +36,10 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="common-card-style thread-card">
|
||||||
|
<span class="text-center"> No Reviews <img src="/assets/community/icons/slash.svg"></span>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -89,3 +94,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|||||||
@@ -49,6 +49,15 @@
|
|||||||
"onboard": 0,
|
"onboard": 0,
|
||||||
"type": "Link"
|
"type": "Link"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"hidden": 0,
|
||||||
|
"is_query_report": 0,
|
||||||
|
"label": "LMS Course Interest",
|
||||||
|
"link_to": "LMS Course Interest",
|
||||||
|
"link_type": "DocType",
|
||||||
|
"onboard": 0,
|
||||||
|
"type": "Link"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"hidden": 0,
|
"hidden": 0,
|
||||||
"is_query_report": 0,
|
"is_query_report": 0,
|
||||||
@@ -121,7 +130,7 @@
|
|||||||
"type": "Link"
|
"type": "Link"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"modified": "2021-06-29 15:11:07.324651",
|
"modified": "2021-08-31 10:33:39.838535",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "LMS",
|
"module": "LMS",
|
||||||
"name": "LMS",
|
"name": "LMS",
|
||||||
|
|||||||
@@ -32,107 +32,10 @@
|
|||||||
--text-3xl: 22px;
|
--text-3xl: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch {
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 10px 0px;
|
|
||||||
background: white;
|
|
||||||
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
|
|
||||||
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 .right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.profile-photo {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lesson-type {
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
padding: 5rem 0 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-header {
|
|
||||||
background: #eee;
|
|
||||||
border: 2px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-card {
|
|
||||||
max-width: 360px;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 70px auto;
|
|
||||||
border: 1px solid #d1d8dd;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-card .page-card-head {
|
|
||||||
padding: 10px 15px;
|
|
||||||
margin: -15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-bottom: 1px solid #d1d8dd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-card .page-card-head .indicator {
|
|
||||||
color: #36414C;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-card .page-card-head .indicator::before {
|
|
||||||
margin: 0 6px 0.5px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-card .btn {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
appearance: auto;
|
appearance: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-image {
|
|
||||||
margin-right: 3px;
|
|
||||||
border-radius: 50px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-image {
|
.course-image {
|
||||||
height: 168px;
|
height: 168px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -272,13 +175,11 @@ input[type=checkbox] {
|
|||||||
|
|
||||||
.view-course-link {
|
.view-course-link {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-parent {
|
.cards-parent {
|
||||||
@@ -578,8 +479,8 @@ input[type=checkbox] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.is-default {
|
.is-default {
|
||||||
background: #98A1A9;
|
background: #F4F5F6;
|
||||||
color: #ffffff;
|
color: #1F272E;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|||||||
4
community/public/icons/slash.svg
Normal file
4
community/public/icons/slash.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 22C17.5228 22 22 17.5229 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="#4C5A67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M5 4.93005L19.14 19.0701" stroke="#4C5A67" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 428 B |
@@ -22,8 +22,8 @@
|
|||||||
|
|
||||||
{% macro CourseCardWide(course) %}
|
{% macro CourseCardWide(course) %}
|
||||||
<div class="common-card-style course-card-wide">
|
<div class="common-card-style course-card-wide">
|
||||||
<div class="course-image-wide {% if not course.image %} default-image {% endif %}"
|
<div class="course-image-wide {% if not course.image %} default-image {% endif %}" {% if course.image
|
||||||
{% if course.image %}style="background-image: url({{ course.image }});"{% endif %}>
|
%}style="background-image: url({{ course.image }});" {% endif %}>
|
||||||
<div class="course-tags">
|
<div class="course-tags">
|
||||||
{% for tag in course.get_tags() %}
|
{% for tag in course.get_tags() %}
|
||||||
<div class="course-card-pills">{{ tag }}</div>
|
<div class="course-card-pills">{{ tag }}</div>
|
||||||
@@ -59,8 +59,8 @@
|
|||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if course.upcoming %}
|
{% if course.upcoming %}
|
||||||
<button class="button wide-button is-default" id="notify-me" data-course="{{course.name | urlencode}}"
|
<button class="button wide-button is-default" id="notify-me" data-course="{{course.name | urlencode}}" {% if
|
||||||
{% if is_user_interested %} disabled="disabled" title="Your interest has already been noted." {% endif %} >
|
is_user_interested %} disabled="disabled" title="Your interest has already been noted." {% endif %}>
|
||||||
Notify me when available
|
Notify me when available
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@@ -70,10 +70,6 @@
|
|||||||
<img class="ml-2" src="/assets/community/images/play.png" />
|
<img class="ml-2" src="/assets/community/images/play.png" />
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% set certificate = course.is_certified() %}
|
|
||||||
{% if certificate %}
|
|
||||||
<a class="button wide-button is-secondary dark-links" href="/courses/{{ course.name }}/{{ certificate }}">Get Certificate</a>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -101,6 +97,7 @@
|
|||||||
<!-- Course Outline and Creator -->
|
<!-- Course Outline and Creator -->
|
||||||
|
|
||||||
{% macro CourseOutlineAndCreator(course) %}
|
{% macro CourseOutlineAndCreator(course) %}
|
||||||
|
{% set certificate = course.is_certified() %}
|
||||||
<div class="course-outline-instructor-parent">
|
<div class="course-outline-instructor-parent">
|
||||||
<div class="course-home-outline">
|
<div class="course-home-outline">
|
||||||
{{ widgets.CourseOutline(course=course, membership=membership) }}
|
{{ widgets.CourseOutline(course=course, membership=membership) }}
|
||||||
@@ -137,9 +134,13 @@
|
|||||||
{{ frappe.utils.rounded(progress) }}%
|
{{ frappe.utils.rounded(progress) }}%
|
||||||
</div>
|
</div>
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<div class="progress-bar" role="progressbar" style="width: {{ progress }}%"
|
<div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
|
||||||
aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100"></div>
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
|
{% if certificate %}
|
||||||
|
<a class="muted-text dark-links mt-5 text-center" href="/courses/{{ course.name }}/{{ certificate }}">Get
|
||||||
|
Certificate</a>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|||||||
@@ -1,39 +0,0 @@
|
|||||||
# Mockups
|
|
||||||
|
|
||||||
HTML Mockups using [Mockdown][].
|
|
||||||
|
|
||||||
[Mockdown]: https://github.com/anandology/mockdown
|
|
||||||
|
|
||||||
## How to use
|
|
||||||
|
|
||||||
**Step 1:** Get into `mockups` directory
|
|
||||||
|
|
||||||
```
|
|
||||||
$ cd mockups
|
|
||||||
```
|
|
||||||
|
|
||||||
**Step 2:** Instal `mockdown`
|
|
||||||
|
|
||||||
```
|
|
||||||
$ pip install mockdown
|
|
||||||
```
|
|
||||||
|
|
||||||
**Step 3:** Start mockdown server
|
|
||||||
|
|
||||||
```
|
|
||||||
$ mockdown
|
|
||||||
...
|
|
||||||
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
**Step 4:** See the mockups at <http://localhost:5000/>.
|
|
||||||
|
|
||||||
## How does it work?
|
|
||||||
|
|
||||||
Mockdown uses [Jinja][] templates for writing HTML.
|
|
||||||
|
|
||||||
[Jinja]: https://jinja.palletsprojects.com/
|
|
||||||
|
|
||||||
To make is easy to provide test data, Mockdown looks for YAML file with the same name as the template. For example, `home.html` template uses the data from `home.yml`.
|
|
||||||
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<!-- Required meta tags -->
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<!-- Bootstrap CSS -->
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
|
|
||||||
<link href="/static/style.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<title>{% block title %}FOSS United{% endblock %}</title>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<nav class="navbar navbar-light navbar-expand-lg">
|
|
||||||
<div class="container">
|
|
||||||
<a class="navbar-brand" href="/"><span>Home</span></a>
|
|
||||||
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="mr-auto navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="/sketches.html">
|
|
||||||
Sketches
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="ml-auto navbar-nav">
|
|
||||||
<!-- post login tools -->
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link btn-login-area" href="/login.html">Login</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
{% block content %}
|
|
||||||
<h1>Lorem ipsum...</h1>
|
|
||||||
{% endblock %}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,114 +0,0 @@
|
|||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="container">
|
|
||||||
<div class="course-header">
|
|
||||||
<div class="course-type">course</div>
|
|
||||||
<h1>{{title}}</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-lg-9 col-md-12">
|
|
||||||
<div class="course-details">
|
|
||||||
|
|
||||||
<h2>Course Description</h2>
|
|
||||||
|
|
||||||
<div class="course-description">
|
|
||||||
{{ description }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="preview-video">
|
|
||||||
<iframe
|
|
||||||
width="560"
|
|
||||||
height="315"
|
|
||||||
src="{{youtube_embed_url}}"
|
|
||||||
title="YouTube video player"
|
|
||||||
frameborder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowfullscreen></iframe>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Upcoming Batches</h2>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
{% for batch in batches %}
|
|
||||||
<div class="col-lg-4 col-md-6">
|
|
||||||
<div class="batch">
|
|
||||||
<div class="batch-details">
|
|
||||||
<div>Session every {{batch.weekdays}}</div>
|
|
||||||
<div>{{batch.timeslot}}</div>
|
|
||||||
<div>Starting from {{batch.start_date}}</div>
|
|
||||||
|
|
||||||
<div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
|
|
||||||
|
|
||||||
{% for m in batch.mentors %}
|
|
||||||
<div>
|
|
||||||
<img class="profile-photo" src="{{m.photo_url}}">
|
|
||||||
<span class="instructor-title">{{m.name}}</span>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
<div class="cta">
|
|
||||||
<div class="">
|
|
||||||
<button type="button">Join this Batch</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h2>Course Outline</h2>
|
|
||||||
|
|
||||||
{% for chapter in chapters %}
|
|
||||||
<div class="chapter-plan">
|
|
||||||
<h3><span class="chapter-number">{{loop.index}}</span> {{chapter.title}}</h3>
|
|
||||||
<div class="chapter-description">
|
|
||||||
{{chapter.description}}
|
|
||||||
</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 %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-lg-3 col-md-12">
|
|
||||||
<div class="sidebar">
|
|
||||||
<h3>Instructor</h3>
|
|
||||||
<div class="instructor">
|
|
||||||
<div class="instructor-title">{{instructor.name}}</div>
|
|
||||||
<div class="instructor-subtitle">Created {{instructor.num_courses}} courses</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar">
|
|
||||||
<h3>Mentors</h3>
|
|
||||||
{% for m in mentors %}
|
|
||||||
<div class="instructor">
|
|
||||||
<div class="instructor-title">{{m.name}}</div>
|
|
||||||
<div class="instructor-subtitle">Mentored {{m.num_courses}} batches</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
<div class="notice">
|
|
||||||
Interested to become a mentor?
|
|
||||||
|
|
||||||
<div><a href="#">Apply Now!</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
title: The Joy of Programming
|
|
||||||
description: |
|
|
||||||
Learn the joy of programming by turning the computer into a canvas.
|
|
||||||
youtube_embed_url: "https://www.youtube.com/embed/IFWAYnUeHR8?start=149"
|
|
||||||
stats:
|
|
||||||
chapters: 4
|
|
||||||
lessons: 25
|
|
||||||
videos: 6
|
|
||||||
completed: 287
|
|
||||||
|
|
||||||
instructor:
|
|
||||||
name: Anand Chitipothu
|
|
||||||
num_courses: 4
|
|
||||||
|
|
||||||
mentors:
|
|
||||||
- name: Anand Chitipothu
|
|
||||||
num_courses: 4
|
|
||||||
- name: Rushabh Mehta
|
|
||||||
num_courses: 3
|
|
||||||
- name: Jannat Patel
|
|
||||||
num_courses: 3
|
|
||||||
|
|
||||||
batches:
|
|
||||||
- id: jp01
|
|
||||||
status: scheduled
|
|
||||||
mentors:
|
|
||||||
- name: Anand Chitipothu
|
|
||||||
photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg
|
|
||||||
num_batches: 4
|
|
||||||
start_date: May 3, 2021
|
|
||||||
weekdays: Mon, Thu
|
|
||||||
timeslot: 5:00-6:00 PM
|
|
||||||
|
|
||||||
- id: jp02
|
|
||||||
status: scheduled
|
|
||||||
mentors:
|
|
||||||
- name: Anand Chitipothu
|
|
||||||
photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg
|
|
||||||
num_batches: 4
|
|
||||||
start_date: May 4, 2021
|
|
||||||
weekdays: Tue, Fri
|
|
||||||
timeslot: 5:00-6:00 PM
|
|
||||||
|
|
||||||
- id: jp03
|
|
||||||
status: scheduled
|
|
||||||
mentors:
|
|
||||||
- name: Rusbhabh Mehta
|
|
||||||
photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg
|
|
||||||
num_batches: 4
|
|
||||||
start_date: May 15, 2021
|
|
||||||
weekdays: Sat
|
|
||||||
timeslot: 5:00-6:00 PM
|
|
||||||
|
|
||||||
|
|
||||||
chapters:
|
|
||||||
- title: Getting Started
|
|
||||||
description: |
|
|
||||||
Getting started with programming by turning the computer into a canvas.
|
|
||||||
lessons:
|
|
||||||
- index: 1
|
|
||||||
type: video
|
|
||||||
icon: bi bi-play-circle
|
|
||||||
title: Introduction to Programming
|
|
||||||
- index: 2
|
|
||||||
type: practice
|
|
||||||
icon: bi bi-code-square
|
|
||||||
title: Drawing Shapes
|
|
||||||
|
|
||||||
- title: Repeating Things
|
|
||||||
description: |
|
|
||||||
Isn't it very boring to do the same thing again and again?
|
|
||||||
Well, that is for humans. Computers love to do the same thing again and again.
|
|
||||||
Learn how to tell the computer to repeat multiple times the same task, or
|
|
||||||
with slight change every time.
|
|
||||||
|
|
||||||
lessons:
|
|
||||||
- index: 1
|
|
||||||
type: video
|
|
||||||
icon: bi bi-play-circle
|
|
||||||
title: Rinse and Repeat
|
|
||||||
- index: 2
|
|
||||||
type: practice
|
|
||||||
title: many circles
|
|
||||||
icon: bi bi-check2-circle
|
|
||||||
- index: 3
|
|
||||||
type: practice
|
|
||||||
icon: bi bi-code-square
|
|
||||||
title: print, print, print!
|
|
||||||
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
{% extends "base.html" %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
<div class="container">
|
|
||||||
<div class="course-header">
|
|
||||||
<h1>Sketches</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row sketches-gallery">
|
|
||||||
{% for s in sketches %}
|
|
||||||
<div class="col-md-3">
|
|
||||||
<div class="sketch-card">
|
|
||||||
<div class="sketch-image">
|
|
||||||
<a href="#">
|
|
||||||
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="150" cy="150" r="150.0"></circle>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="sketch-footer">
|
|
||||||
<div class="sketch-title">
|
|
||||||
<a href="#">{{s.title}}</a>
|
|
||||||
</div>
|
|
||||||
<div class="sketch-author">
|
|
||||||
by {{s.author}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
sketches:
|
|
||||||
- id: 20
|
|
||||||
title: Big Circle
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 19
|
|
||||||
title: Small Circle
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 18
|
|
||||||
title: Circles in Queue
|
|
||||||
author: Chaitanya
|
|
||||||
- id: 17
|
|
||||||
title: Random Bottom Circles
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 16
|
|
||||||
title: Pipes
|
|
||||||
author: Vishal
|
|
||||||
- id: 15
|
|
||||||
title: New Sketch
|
|
||||||
author: Malleshwari
|
|
||||||
|
|
||||||
- id: 20
|
|
||||||
title: Big Circle
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 19
|
|
||||||
title: Small Circle
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 18
|
|
||||||
title: Circles in Queue
|
|
||||||
author: Chaitanya
|
|
||||||
- id: 17
|
|
||||||
title: Random Bottom Circles
|
|
||||||
author: Anand Chitipothu
|
|
||||||
- id: 16
|
|
||||||
title: Pipes
|
|
||||||
author: Vishal
|
|
||||||
- id: 15
|
|
||||||
title: New Sketch
|
|
||||||
author: Malleshwari
|
|
||||||
@@ -1,221 +0,0 @@
|
|||||||
@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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-light {
|
|
||||||
border-bottom: 1px solid #E2E6E9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header .page-header{
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
text-align: center;
|
|
||||||
margin: 20px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-video iframe {
|
|
||||||
max-width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketches-gallery svg {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketch-card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketch-card .sketch-image {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sketch-footer {
|
|
||||||
padding: 10px;
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user