From 00107134b431709a815eb2919153aafdbed1bc86 Mon Sep 17 00:00:00 2001 From: Anand Chitipothu Date: Thu, 22 Apr 2021 10:16:38 +0530 Subject: [PATCH] feat: add new design and improved the layout of the course page --- community/hooks.py | 1 + community/public/build.json | 3 + community/public/css/style.css | 195 ++++++++++++ community/www/courses/course.html | 496 ++++++++++-------------------- 4 files changed, 369 insertions(+), 326 deletions(-) create mode 100644 community/public/css/style.css diff --git a/community/hooks.py b/community/hooks.py index 1f06cd18..3617903a 100644 --- a/community/hooks.py +++ b/community/hooks.py @@ -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" diff --git a/community/public/build.json b/community/public/build.json index 14ac7230..2a3529de 100644 --- a/community/public/build.json +++ b/community/public/build.json @@ -1,5 +1,8 @@ { "css/lms.css": [ "public/css/lms.css" + ], + "css/community.css": [ + "public/css/style.css" ] } diff --git a/community/public/css/style.css b/community/public/css/style.css new file mode 100644 index 00000000..f874bbf3 --- /dev/null +++ b/community/public/css/style.css @@ -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; +} diff --git a/community/www/courses/course.html b/community/www/courses/course.html index 4a2a4c3e..4f1e2467 100644 --- a/community/www/courses/course.html +++ b/community/www/courses/course.html @@ -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 %} - {% endblock %} {% block content %} -
-
- -
Enrolled
-
-
- -

{{ course.title }}

- {% if course.short_introduction %} {{course.short_introduction}} {% endif %} -
- {% if course.video_link %} -
- -
- {% endif %} -
- {% if is_mentor %} -

Your Batches

- {% if mentor_batches %} -
-
- You are a mentor for this course. Manage your batches or create a new batch from here. -
-
- {% for batch in mentor_batches %} -
-
- {{batch.status}} -
Starting {{frappe.utils.format_date(batch.start_date, "medium")}}
-
Sessions every {{batch.sessions_on}}
-
{{frappe.utils.format_time(batch.start_time, "short")}} - - {{frappe.utils.format_time(batch.end_time, "short")}} -
-
- {% if batch.mentors %} -
-
Mentors
- {% for mentor in batch.mentors %} -
-
- {{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}} -
-
{{mentor.full_name}}
-
- {% endfor %} -
- {% endif %} -
-
- -
-
- {% endfor %} -
- Add a new batch -
- {% else %} -
-
-

You are a mentor for this course.

- Create your first batch -
-
- {% endif %} - {% endif %} - {% if not is_mentor and upcoming_batches %} -
-

Upcoming Batches

-
- {% for batch in upcoming_batches %} -
-
-
Starting {{frappe.utils.format_date(batch.start_date, "medium")}}
-
Sessions every {{batch.sessions_on}}
-
{{frappe.utils.format_time(batch.start_time, "short")}} - - {{frappe.utils.format_time(batch.end_time, "short")}} -
-
- {% if batch.mentors %} -
-
Mentors
- {% for mentor in batch.mentors %} -
-
- {{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}} -
-
{{mentor.full_name}}
-
- {% endfor %} -
- {% endif %} -
-
- -
-
- {% endfor %} -
-
- {% endif %} - {% if course.description %} -
-

About the Course

-
{{frappe.utils.md_to_html(course.description)}}
-
- {% endif %} -
-

Instructor

-
-
- {{ profile(instructor.photo, instructor.full_name, instructor.abbr, "small")}} -
-
-
{{instructor.full_name}}
-
{{instructor.course_count}} Courses
-
-
-
-
-

Mentors

-
- {% if not mentors %} - There are no active mentors for this course. - {% endif %} +
+
+
course
+

{{course.title}}

+
- {% for mentor in mentors %} -
-
- {{ profile(mentor.photo, mentor.full_name, mentor.abbr, "small")}} -
-
-
{{mentor.full_name}}
- {% if mentor.batch_count %} -
Mentored {{mentor.batch_count}} {% if mentor.batch_count == 1 %} Batch - {% else %} Batches {% endif %}
- {% else %} -
New Mentor
- {% endif %} -
-
- {% endfor %} -
-
- {% if not is_mentor %} -
- Interested to mentor this course? Apply now! -
-
- 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 Cancel your Application. -
- {% endif %} - {% if course.topics %} -
-

Topics

-
- {% for topic in course.topics %} -
- -
{{topic.title}}
- -
{{topic.preview | markdown }}
-
- {% endfor %} -
-
- {% endif %} - -
-{% endblock %} \ No newline at end of file +
+
+
+ {{ CourseDescription(course) }} + {{ BatchSection(course, is_mentor, upcoming_batches, mentor_batches) }} + {{ CourseOutline(course) }} +
+
+ +
+
+ {{ InstructorsSection(instructor) }} +
+ +
+ {{ MentorsSection(mentors) }} +
+
+
+ +{% endblock %} + + +{% macro CourseDescription(course) %} +

Course Description

+ +
+ {{ course.short_introduction }} +
+ + {% if course.video_link %} +
+ +
+ {% 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) %} +
+
+
Session every {{batch.sessions_on}}
+
{{frappe.utils.format_time(batch.start_time, "short")}} - + {{frappe.utils.format_time(batch.end_time, "short")}}
+
Starting {{frappe.utils.format_date(batch.start_date, "medium")}}
+
mentors
+ + {% for m in batch.mentors %} +
+ {% if m.photo_url %} + + {% endif %} + {{m.full_name}} +
+ {% endfor %} +
+
+
+ {% if can_manage %} + + {% else %} + + {% endif %} +
+
+
+{% endmacro %} + +{% macro BatchSectionForMentors(course, mentor_batches) %} +

Your Batches

+ + {% if mentor_batches %} +
+ You are a mentor for this course. Manage your batches or create a new batch from here. +
+ +
+ {% for batch in mentor_batches %} +
+ {{ RenderBatch(batch, can_manage=True) }} +
+ {% endfor %} +
+ + Add a new batch + {% else %} +
+

You are a mentor for this course.

+ Create your first batch +
+ {% endif %} +{% endmacro %} + +{% macro BatchSectionForStudents(course, upcoming_batches) %} +

Upcoming Batches

+ + {% for batch in upcoming_batches %} +
+ {{ RenderBatch(batch, can_manage=False) }} +
+ {% endfor %} +{% endmacro %} + +{% macro CourseOutline(course) %} +

Course Outline

+ +{% for chapter in course.topics %} +
+

{{loop.index}} {{chapter.title}}

+
+ {{chapter.preview | markdown}} +
+ + {# +
+ {% for lesson in chapter.lessons %} +
+ + {{lesson.title}} +
+ {% endfor %} +
+ #} +
+{% endfor %} +{% endmacro %} + +{% macro InstructorsSection(instructor) %} +

Instructor

+
+
{{instructor.full_name}}
+
Created {{instructor.course_count}} courses
+
+{% endmacro %} + +{% macro MentorsSection(instructor) %} +

Mentors

+ {% for m in mentors %} +
+
{{m.full_name}}
+
Mentored {{m.batch_count}} batches
+
+ {% endfor %} + +
+ Interested to become a mentor? + +
Apply Now!
+
+{% endmacro %}