fix: removed unused styles and folders

fix: Profile page, course card ratings, lesson completion tick

community/fixtures/custom_field.json

@@ -104,5 +104,270 @@
   "translatable": 1,
   "unique": 0,
   "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "medium",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "github",
+  "label": "Medium ID",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-medium",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "city",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "mute_sounds",
+  "label": "City",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-city",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "college",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "city",
+  "label": "College Name",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-college",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "branch",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "college",
+  "label": "Branch",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-branch",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
+ },
+ {
+  "allow_in_quick_entry": 0,
+  "allow_on_submit": 0,
+  "bold": 0,
+  "collapsible": 0,
+  "collapsible_depends_on": null,
+  "columns": 0,
+  "default": null,
+  "depends_on": null,
+  "description": null,
+  "docstatus": 0,
+  "doctype": "Custom Field",
+  "dt": "User",
+  "fetch_from": null,
+  "fetch_if_empty": 0,
+  "fieldname": "profession",
+  "fieldtype": "Data",
+  "hidden": 0,
+  "hide_border": 0,
+  "hide_days": 0,
+  "hide_seconds": 0,
+  "ignore_user_permissions": 0,
+  "ignore_xss_filter": 0,
+  "in_global_search": 0,
+  "in_list_view": 0,
+  "in_preview": 0,
+  "in_standard_filter": 0,
+  "insert_after": "medium",
+  "label": "Profession",
+  "length": 0,
+  "mandatory_depends_on": null,
+  "modified": "2021-06-30 14:46:55.834145",
+  "name": "User-profession",
+  "no_copy": 0,
+  "non_negative": 0,
+  "options": null,
+  "parent": null,
+  "parentfield": null,
+  "parenttype": null,
+  "permlevel": 0,
+  "precision": "",
+  "print_hide": 0,
+  "print_hide_if_no_value": 0,
+  "print_width": null,
+  "read_only": 0,
+  "read_only_depends_on": null,
+  "report_hide": 0,
+  "reqd": 0,
+  "search_index": 0,
+  "translatable": 1,
+  "unique": 0,
+  "width": null
  }
 ]

community/hooks.py

@@ -167,7 +167,8 @@ whitelist = [
     "/add-a-new-batch",
     "/new-sign-up",
     "/message",
-    "/about"
+    "/about",
+    "/edit-profile"
 ]
 whitelist_rules = [{"from_route": p, "to_route": p[1:]} for p in whitelist]
 
@@ -178,6 +179,10 @@ profile_rules = [
 
 website_route_rules = primary_rules + whitelist_rules + profile_rules
 
+website_redirects = [
+    {"source": "/update-profile", "target": "/edit-profile"},
+]
+
 update_website_context = 'community.widgets.update_website_context'
 
 ## Specify the additional tabs to be included in the user profile page.

community/lms/web_form/profile/profile.js

@@ -1,3 +1,7 @@
 frappe.ready(function () {
-	// bind events here
+  frappe.web_form.after_load = () => {
+    if (!frappe.utils.get_url_arg("name")) {
+      window.location.href = `/edit-profile?name=${frappe.session.user}`;
+    }
+  }
 })

community/lms/web_form/profile/profile.json

@@ -12,6 +12,7 @@
  "breadcrumbs": "",
  "button_label": "Save",
  "creation": "2021-06-30 13:48:13.682851",
+ "custom_css": "[data-doctype=\"Web Form\"] {\n    max-width: 720px;\n    margin: 6rem auto;\n}",
  "doc_type": "User",
  "docstatus": 0,
  "doctype": "Web Form",
@@ -19,14 +20,14 @@
  "is_standard": 1,
  "login_required": 1,
  "max_attachment_size": 0,
- "modified": "2021-06-30 15:53:20.967466",
+ "modified": "2021-07-14 17:15:15.424855",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "profile",
  "owner": "Administrator",
  "payment_button_label": "Buy Now",
  "published": 1,
- "route": "profile",
+ "route": "edit-profile",
  "route_to_success_link": 0,
  "show_attachments": 0,
  "show_in_grid": 0,
@@ -84,18 +85,6 @@
    "reqd": 0,
    "show_in_filter": 0
   },
-  {
-   "allow_read_on_all_link_options": 0,
-   "fieldname": "username",
-   "fieldtype": "Data",
-   "hidden": 0,
-   "label": "Username",
-   "max_length": 0,
-   "max_value": 0,
-   "read_only": 0,
-   "reqd": 0,
-   "show_in_filter": 0
-  },
   {
    "allow_read_on_all_link_options": 0,
    "fieldname": "mobile_no",
@@ -120,6 +109,91 @@
    "read_only": 0,
    "reqd": 0,
    "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "linkedin",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "LinkedIn ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "github",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Github ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "medium",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Medium ID",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "city",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "City",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "college",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "College Name",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "depends_on": "college",
+   "fieldname": "branch",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Branch",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "profession",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Profession",
+   "max_length": 0,
+   "max_value": 0,
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
   }
  ]
 }

community/lms/widgets/BreadCrumb.html

@@ -1,4 +1,4 @@
-<div class="course-instructor breadcrumb">
+<div class="breadcrumb">
   <a class="dark-links" href="/courses">All Courses</a>
   <img class="ml-1 mr-1" src="/assets/community/icons/chevron-right.svg">
 

community/lms/widgets/ChapterTeaser.html

@@ -25,7 +25,7 @@
           {{ lesson.title }}
 
           {% if membership %}
-          <img class="{{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
+          <img class="lesson-progress-tick {{ course.get_progress(lesson.name) != 'Complete' and 'hide' }}"
             src="/assets/community/icons/check.svg">
           {% endif %}
 

community/lms/widgets/CourseCard.html

@@ -29,12 +29,21 @@
       <span class="course-instructor">
         {{ course.get_instructor().full_name }}
       </span>
-      {% if course.get_students() | length %}
       <span class="course-student-count">
-        <img class="icon-background mr-1" src="/assets/community/icons/user.svg" />
+        {% if course.get_students() | length %}
+        <span class="mr-4">
+          <img class="icon-background" src="/assets/community/icons/user.svg" />
           {{ course.get_students() | length }}
         </span>
         {% endif %}
+        {% set avg_rating = course.get_average_rating() %}
+        {% if avg_rating %}
+        <span>
+          <img class="icon-background" src="/assets/community/icons/rating.svg" />
+          {{ avg_rating }}
+        </span>
+        {% endif %}
+      </span>
     </div>
     {% set membership = course.get_membership(frappe.session.user) %}
 
@@ -61,3 +70,13 @@
     {% endif %}
   </div>
 </div>
+<script>
+  frappe.ready(() => {
+    $(".course-card-title").each((i, element) => {
+      var title = $(element).text();
+      var length = $(window).width() <= 375 ? 60 : 65;
+      var suffix = title.length > length ? "..." : "";
+      $(element).text(title.substring(0, length) + suffix);
+    })
+  })
+</script>

community/lms/widgets/MemberCard.html

@@ -1,5 +1,5 @@
 <div class="common-card-style member-card {{dimension_class}} ">
-  {% set avatar_class = "avatar-large" if not dimension_class else "avatar-xl"%}
+  {% set avatar_class = "avatar-large" if not dimension_class else "avatar-large"%}
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
   <div class="small-title member-card-title">
     {{ member.full_name }}

community/lms/widgets/Reviews.html

@@ -1,5 +1,5 @@
 {% if course.get_reviews() | length %}
-<div class="reviews-parent col">
+<div class="reviews-parent">
   <div class="reviews-heading">
     <div class="course-home-headings">Student Review</div>
     {% if course.is_eligible_to_review(membership) %}

community/overrides/user.py

@@ -59,3 +59,12 @@ class CustomUser(User):
             filters["member_type"] = member_type
 
         return frappe.get_all("LMS Batch Membership", filters, ["name", "course"])
+
+    def get_mentored_courses(self):
+        """ Returns all courses mentored by this user """
+        return frappe.get_all("LMS Course Mentor Mapping",
+                    {
+                        "mentor": self.name
+                    },
+                    ["name", "course"]
+                )

community/public/css/style.css

@@ -259,11 +259,11 @@ input[type=checkbox] {
 
 .common-page-style {
   background: #F4F5F6;
+  padding-bottom: 2rem;
 }
 
 .common-card-style {
   display: flex;
-  align-items: flex-start;
   background: #FFFFFF;
   border-radius: 8px;
   position: relative;
@@ -292,6 +292,12 @@ input[type=checkbox] {
   padding: 0px 24px 20px;
 }
 
+@media (max-width: 350px) {
+  .course-card-content {
+    padding: 0px 10px 20px;
+  }
+}
+
 .course-card-title {
   font-weight: 600;
   font-size: 18px;
@@ -303,6 +309,12 @@ input[type=checkbox] {
   height: 45px;
 }
 
+@media (max-width: 360px) {
+  .course-card-title {
+    font-size: 14px;
+  }
+}
+
 .card-divider {
   border: 1px solid #F4F5F6;
   margin-bottom: 16px;
@@ -353,7 +365,7 @@ input[type=checkbox] {
 
 @media (max-width: 767px) {
   .cards-parent {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 336px));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     -moz-column-gap: 16px;
     column-gap: 16px;
     row-gap: 16px;
@@ -362,7 +374,7 @@ input[type=checkbox] {
 
 @media (max-width: 375px) {
   .cards-parent {
-    grid-template-columns: repeat(auto-fill, minmax(100%, 312px));
+    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
     -moz-column-gap: 24px;
     column-gap: 24px;
     row-gap: 24px;
@@ -370,7 +382,7 @@ input[type=checkbox] {
 }
 
 .courses-header {
-  padding: 50px 30px 20px;
+  padding: 50px 20px 20px;
   color: var(--text-color);
   font-weight: 600;
   font-size: 22px;
@@ -378,22 +390,10 @@ input[type=checkbox] {
   letter-spacing: -0.0175em
 }
 
-.course-top-section {
+@media (min-width: 576px) {
-  float: none;
+  .container {
-  margin: 0 auto;
+    padding-left: 1rem;
-  max-width: 1150px;
+    padding-right: 1rem;
-  padding-bottom: 2rem;
-}
-
-@media (max-width: 768px) {
-  .course-top-section {
-    max-width: 720px;
-  }
-}
-
-@media (max-width: 600px) {
-  .course-top-section {
-    max-width: 342px;
   }
 }
 
@@ -491,7 +491,6 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .course-card-wide {
-  height: fit-content;
   display: flex;
   flex-direction: row;
   padding: 24px;
@@ -523,6 +522,7 @@ div.custom-checkbox>label>input:checked+img {
   margin-right: 32px;
   border-radius: 5px;
   flex: 1;
+  align-self: center;
 }
 
 @media (max-width: 768px) {
@@ -541,23 +541,10 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
+@media (max-width: 500px) {
   .course-home-page {
-  max-width: 1150px;
+    padding-right: 0;
-  margin: 0 auto;
+    padding-left: 0;
-  padding-bottom: 2rem;
-}
-
-@media (max-width: 768px) {
-  .course-home-page {
-    max-width: 688px;
-  }
-}
-
-@media (max-width: 600px) {
-  .course-home-page {
-    width: 100%;
-    padding-left: 0px;
-    padding-right: 0px;
   }
 }
 
@@ -565,6 +552,7 @@ div.custom-checkbox>label>input:checked+img {
   display: flex;
   flex-direction: column;
   flex: 2;
+  justify-content: space-between;
 }
 
 @media (max-width: 768px) {
@@ -667,6 +655,7 @@ div.custom-checkbox>label>input:checked+img {
 
 .course-home-outline {
   margin-top: 3rem;
+  flex: 1;
 }
 
 .small-title {
@@ -698,7 +687,19 @@ div.custom-checkbox>label>input:checked+img {
 @media (max-width: 600px) {
   .course-outline-instructor-parent {
     flex-direction: column;
-    padding: 0px 9px 0px;
+    padding: 0px 24px 0px;
+  }
+}
+
+
+.profile-parent-section {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media (max-width: 600px) {
+  .profile-parent-section {
+    flex-direction: column;
   }
 }
 
@@ -730,6 +731,18 @@ div.custom-checkbox>label>input:checked+img {
   margin-top: 3rem;
 }
 
+@media (min-width: 1024px) {
+  .course-overview-section {
+    margin-left: 2rem;
+  }
+}
+
+@media (min-width: 600px) {
+  .course-overview-section {
+    margin-left: 1rem;
+  }
+}
+
 .lesson-info {
   font-size: 16px;
   line-height: 250%;
@@ -862,10 +875,29 @@ div.custom-checkbox>label>input:checked+img {
   margin: 0;
 }
 
+.avatar-large {
+  width: 88px;
+  height: 88px;
+}
+
+.avatar-xl {
+  width: 112px;
+  height: 112px;
+}
+
+@media (max-width: 500px) {
   .avatar-xl {
     width: 88px;
     height: 88px;
   }
+}
+
+@media (max-width: 375px) {
+  .avatar-xl {
+    width: 50px;
+    height: 50px;
+  }
+}
 
 .description-card {
   padding: 24px;
@@ -873,7 +905,7 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .overview-card {
-  padding: 8px 24px 8px;
+  padding: 24px 26px 24px;
   width: 256px;
   flex-direction: column;
 }
@@ -886,7 +918,7 @@ div.custom-checkbox>label>input:checked+img {
 
 @media (max-width: 600px) {
   .overview-card {
-    padding: 8px 9px 8px;
+    padding: 24px 26px 24px;
     width: 100%;
   }
 }
@@ -971,20 +1003,17 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .breadcrumb {
-  padding: 1rem 0.5rem 0;
+  padding: 1rem 0 0;
   display: flex;
   align-items: center;
+  font-size: 12px;
+  line-height: 135%;
+  color: var(--text-color);
 }
 
 .course-details-outline {
-  width: 352px;
   margin-top: 16px;
-}
+  flex: 1;
-
-@media (max-width: 1025px) {
-  .course-details-outline {
-    width: 100%;
-  }
 }
 
 .lesson-content-card {
@@ -995,11 +1024,11 @@ div.custom-checkbox>label>input:checked+img {
 .course-content-parent {
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap-reverse;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 768px) {
   .course-content-parent {
+    flex-direction: column-reverse;
     justify-content: center;
   }
 }
@@ -1015,13 +1044,13 @@ div.custom-checkbox>label>input:checked+img {
 }
 
 .lesson-pagination-parent {
-  width: 736px;
+  margin: 1rem 0px 0px 2rem;
-  margin-top: 16px;
+  flex: 3;
 }
 
-@media (max-width: 1025px) {
+@media (max-width: 768px) {
   .lesson-pagination-parent {
-    width: 100%;
+    margin-left: 0px;
   }
 }
 
@@ -1029,28 +1058,6 @@ div.custom-checkbox>label>input:checked+img {
   width: 100%;
 }
 
-.course-details-page {
-  padding: 0px 0px 80px;
-  display: flex;
-  flex-direction: column;
-  max-width: 1120px;
-  margin: 0 auto;
-}
-
-@media (max-width: 1025px) {
-  .course-details-page {
-    padding: 24px 0px 24px;
-    width: 80%;
-  }
-}
-
-@media (max-width: 768px) {
-  .course-details-page {
-    padding: 24px 0px 24px;
-    width: 90%;
-  }
-}
-
 .active-lesson {
   background-color: #EBF5FF;
   border-radius: 4px;
@@ -1066,25 +1073,139 @@ div.custom-checkbox>label>input:checked+img {
   font-weight: bold;
 }
 
-.lesson-progress-tick {
+.profile-page {
-  width: 16px;
+  padding-top: 1rem;
-  height: 16px;
+}
-  background: #4C5A67;
+
-  border-radius: 2px;
+.profile-banner {
-  padding: 2px;
+  height: 248px;
-  margin: 0px 4px 4px;
+  border-radius: 12px 12px 0px 0px;
+  background-size: cover;
+  background-position: center;
+}
+
+@media (max-width: 500px) {
+  .profile-banner {
+    height: 150px;
+  }
+}
+
+.profile-about-section {
+  flex: 1;
+  margin-top: 3rem;
+}
+
+.profile-info {
+  height: 68px;
+  background: #ffffff;
+  border-radius: 0px 0px 12px 12px;
+}
+
+.profile-avatar {
+  position: relative;
+  top: 188px;
+  left: 40px;
+  display: flex;
+}
+
+@media (max-width: 500px) {
+  .profile-avatar {
+    top: 95px;
+    left: 10px;
+  }
+}
+
+@media (max-width: 375px) {
+  .profile-avatar {
+    top: 120px;
+    left: 10px;
+  }
+}
+
+.profile-name {
+  color: #FFFFFF;
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 156%;
+  letter-spacing: -0.0175em;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.64);
+  padding: 20px;
+}
+
+@media (max-width: 375px) {
+  .profile-name {
+    font-size: 16px;
+    padding: 5px;
+  }
+}
+
+.creator-badge {
+  background: #48BB74;
+  padding: 4px 6px;
+  color: #ffffff;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 10px;
+  line-height: 120%;
+  text-align: center;
+  letter-spacing: 0.011em;
+  text-transform: uppercase;
+  height: fit-content;
+  box-shadow: 0px 1px 1px rgb(0 0 0 / 16%);
+  border-radius: 4px;
+  margin-top: 25px;
+}
+
+@media (max-width: 375px) {
+  .creator-badge {
+    font-size: 8px;
+    margin: 8px 0px 0px;
+  }
+}
+
+.profile-profession {
+  position: relative;
+  top: 16px;
+  left: 174px;
+  font-size: 12px;
+  line-height: 165%;
+}
+
+@media (max-width: 500px) {
+  .profile-profession {
+    top: 10px;
+    left: 120px;
+  }
+}
+
+@media (max-width: 375px) {
+  .profile-profession {
+    top: 5px;
+    left: 70px;
+  }
+}
+
+.social-icons {
+  float: right;
+  margin: 16px;
+}
+
+@media (max-width: 500px) {
+  .social-icons {
+    margin: 10px;
+  }
+}
+
+@media (max-width: 375px) {
+  .social-icons {
+    margin: 5px;
+  }
 }
 
 .profile-courses {
   margin-top: 3rem;
 }
 
-@media (max-width: 375px) {
-  .profile-courses {
-    padding: 0px 24px 0px;
-  }
-}
-
 .progress-text {
   font-size: 12px;
   line-height: 165%;
@@ -1095,6 +1216,12 @@ div.custom-checkbox>label>input:checked+img {
   flex-direction: column;
 }
 
+@media (min-width: 600px) {
+  .course-creator-progress-parent {
+    margin-left: 2rem;
+  }
+}
+
 .course-creator-section {
   margin-top: 3rem;
 }
@@ -1116,9 +1243,9 @@ div.custom-checkbox>label>input:checked+img {
   }
 }
 
-@media (max-width: 375px) {
+@media (max-width: 600px) {
   .progress-card {
-    width: 312px;
+    width: 100%;
   }
 }
 

community/public/icons/github.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="2" width="20" height="20" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.05)"/>
+</pattern>
+<image id="image0" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABiUlEQVQ4EZWU4VUCMQzHOwIjMAIb6AhuIBvgArb9QkLDh3MD3EA3wA10A9wAN0D/PdLLld5DeI+XuzT95Z9cU+cavxi7maf0GCi9BU6HwHI6//eBUhd5e9/Y1nZFSk+B5GggCqvtPq5l0aY456AqsOz+ARrAJMdI6aEJ9ZReb4INbThdtCCXOQrgeWRZepJvTeI5/ZjniHKLCCiN3SwrzaVWPdMSsFYCz07bN88p2iQ9kGWpTrU1RBPUtihEdSTHvO5Z3hUE6zl91Run3q1C7M0fyPapOKcIDX/dW2fVZaA2t7G55fIkH8qA4kvgLVPgnLMVZiB6phlgPctLS0nLh/Nn9+L4OQCsM0M3smoBrK+Hjeb8lI9UnWWAp4PnbXgmuVNQZJ77jaz6S6NcGHkUR6fDNHZ3MTXVBWBih5nWI1Myr2WhyqAY5wkNxvhpjFqUpbFqkUTXi8XmHEDyeW1SFASLUifjoc4c1Mn7ToFQNglTqQjAlwcYCdRvbVY1dQ/awPr5avZ6w9/7L3HVAW99VdWzAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

community/public/icons/medium.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="2" y="3" width="20.7" height="18" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.0434783 0.05)"/>
+</pattern>
+<image id="image0" width="23" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAUCAYAAABmvqYOAAABtUlEQVRIDa2UTU7CQBSAOYJH4CgcxSNwAIPoAgSEqAmIbohR/iQIgiK0nU75q4BiKz0ALnStxoULTMZMzWvGoUBrbPLy5jUz3zd5M61nKxJ7iR0kjz0uH1HEPhErH93+7eK1m+EoobEd3Z25kbSQrAtIJjQkrMxsJQCH7EQiIuQHMJvnJADlM5UkUukNvls3GHsFJL+yUH5MJe2eGvbwULaOp9KfmXzeywpaklzlYXb1cDTWl8ITqSOSyRYqAKeHaAfi33V6KtEmhuIETjKneR/GeK2F5CkP4mtJxkTTH13As4VpQ5B2eJBdPRiNiD4xXMFJ+bJuXjs7ILxTOl0T7BqeyRZIQxCXCu4ftL/Dc+cXC+H9wcACO9p5PHn4TnfMRvXqek6AFMU8RAqFWHlbQnv72bNi6Y2Fn+SKpCmiX4Lh3diCOoYHwpEgveOlcs3PSkqVmgVvd3tzYEdtATh8RKyk3mgSQUJfY03/HzgrKZarz11VfYI28NnseTAc8wVCUYX9p8CY3znAIWuG4aMQHmy1BSbaSVbBYa2dxNw5TIDMSpzCYS0rsYXDRCqhAbWb/COZrH8Ddw70agzSigAAAAAASUVORK5CYII="/>
+</defs>
+</svg>

community/www/batch/about.html

@@ -1,40 +0,0 @@
-{% extends "templates/base.html" %}
-{% block title %}About{% endblock %}
-{% block head_include %}
-<meta name="description" content="Courses" />
-<meta name="keywords" content="" />
-
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
-{% endblock %}
-
-{% block content %}
-<div class="container">
-  {{ widgets.BatchTabs(course=course, batch=batch) }}
-  <div class="tab-content" id="about">
-    {{ CourseBasicDetail(course)}}
-    <div class="d-flex align-items-center">
-      <div class="col-lg-4 col-md-12">
-        <div class="sidebar">
-          {{ widgets.InstructorSection(instructor=course.get_instructor()) }}
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% macro CourseBasicDetail(course) %}
-<h2>{{course.title}}</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 %}
-<h2>About the Course</h2>
-<div>{{frappe.utils.md_to_html(course.description)}}</div>
-{% endmacro %}

community/www/batch/about.py

@@ -1,5 +0,0 @@
-import frappe
-from . import utils
-
-def get_context(context):
-    utils.get_common_context(context)

community/www/batch/home.html

@@ -1,61 +0,0 @@
-{% extends "templates/base.html" %}
-{% block title %} Batch {% endblock %}
-
-{% block head_include %}
-<meta name="description" content="Courses" />
-<meta name="keywords" content="" />
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
-{% endblock %}
-
-{% block content %}
-<div class="container mt-5">
-  {{ widgets.BatchTabs(course=course, membership=membership) }}
-  <div class="course-details mt-5">
-    {{ widgets.CourseOutline(course=course, batch=batch, show_link=membership, show_progress=True) }}
-  </div>
-
-  {% if batch %}
-  <div class="w-25">
-    <h3>Batch Schedule</h3>
-    {{ widgets.RenderBatch(course=course, batch=batch) }}
-  </div>
-
-  {% if batch.description %}
-  <div class="mt-5">
-    <h3>Batch Details</h3>
-    {{ frappe.utils.md_to_html(batch.description) }}
-  </div>
-  {% endif %}
-  {% endif %}
-  {% if course.is_mentor(frappe.session.user) %}
-  {% set invite_link = frappe.utils.get_url() + "/courses/" + course.name + "/join?batch=" + batch.name %}
-  <div class="">
-    <h3> Invite Members </h3>
-    <a href="" class="" id="invite-link" data-link="{{ invite_link }}">Get Batch Invitation
-      Link</a>
-    <small id="copy-message" class="text-muted" style="display: none;">Copied to Clipboard.</small>
-  </div>
-  {% endif %}
-
-</div>
-
-<script>
-  frappe.ready(() => {
-    $("#invite-link").click((e) => {
-      e.preventDefault();
-      var link_element = $("#invite-link");
-      var input_element = document.createElement("input");
-      input_element.value = link_element.attr("data-link")
-      document.body.appendChild(input_element);
-      input_element.select();
-      document.execCommand("copy");
-      input_element.remove();
-      $("#copy-message").slideDown(function () {
-        setTimeout(function () {
-          $("#copy-message").slideUp();
-        }, 2000);
-      });
-    })
-  })
-</script>
-{% endblock %}

community/www/batch/home.py

@@ -1,5 +0,0 @@
-import frappe
-from . import utils
-
-def get_context(context):
-    utils.get_common_context(context)

community/www/batch/learn.html

@@ -21,7 +21,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-details-page">
+  <div class="container course-details-page">
     {{ widgets.BreadCrumb(course=course, lesson=lesson) }}
     <div class="course-content-parent">
       <div class="course-details-outline">
@@ -47,7 +47,7 @@
   </div>
 
   {% if membership or lesson.include_in_preview %}
-  <div class="common-card-style lesson-content-card">{{ lesson.render_html() }}</div>
+  <div class="common-card-style lesson-content-card from-markdown">{{ lesson.render_html() }}</div>
   {% else %}
   <div class="no-preview-message">
     <span>This lesson is not available for Preview. Please join the course to access this lesson.</span>

community/www/batch/members.html

@@ -1,40 +0,0 @@
-{% extends "templates/base.html" %}
-
-{% block title %}Members{% endblock %}
-{% block head_include %}
-<meta name="description" content="Courses" />
-<meta name="keywords" content="" />
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
-{% endblock %}
-
-{% block content %}
-
-<div class="container">
-  {{ widgets.BatchTabs(course=course, membership=membership) }}
-  {{ MembersList(members)}}
-</div>
-{% endblock %}
-
-
-{% macro MembersList(members) %}
-<div class="mt-5">
-  {% for member in members %}
-  <div class="d-flex align-items-center">
-    {{ widgets.Avatar(member=member, avatar_class="avatar-medium") }}
-    <div class="d-flex flex-column ml-2">
-      <div class="d-flex">
-        <a class="anchor_style ml-2" href="/{{member.username}}">
-          <div class="review-content">{{ member.full_name }}</div>
-        </a>
-        {% if course.is_mentor(member.name) %}
-        <div class="badge badge-success ml-2 align-self-start">Mentor</div>
-        {% endif %}
-      </div>
-    </div>
-  </div>
-  {% if loop.index != member_count %}
-  <hr>
-  {% endif %}
-  {% endfor %}
-</div>
-{% endmacro %}

community/www/batch/members.py

@@ -1,7 +0,0 @@
-import frappe
-from . import utils
-
-def get_context(context):
-    utils.get_common_context(context)
-    if not context.membership:
-        utils.redirect_to_lesson(context.course)

community/www/batch/progress.html

@@ -1,51 +0,0 @@
-{% extends "templates/base.html" %}
-{% from "www/macros/livecode.html" import LiveCodeEditorJS, LiveCodeEditor with context %}
-{% block title %}{{ course.title }} - Batch Dashboard{% endblock %}
-
-{% block head_include %}
-<meta name="description" content="{{course.title}} - Batch Dashboard" />
-<meta name="keywords" content="{{course.title}} - Batch Dashboard" />
-<style>
-</style>
-
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
-<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
-<link rel="stylesheet" href="/assets/css/lms.css">
-
-<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
-<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
-<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
-
-<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
-<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>
-{% endblock %}
-
-
-{% block content %}
-
-<div class="container">
-  {{ widgets.BatchTabs(course=course, membership=membership) }}
-  <div class="mentor-dashboard">
-    <h3>Batch Progress</h3>
-    {% for exercise in report.exercises %}
-    <div class="exercise-submissions">
-      <h2>Exercise {{exercise.index_label}}: {{exercise.title}}</h2>
-      {% for s in report.get_submissions_of_exercise(exercise.name) %}
-      <div class="submission">
-        <h4><a href="/{{s.owner.username}}">{{s.owner.full_name}}</a></h4>
-        <div class="livecode-editor-small">
-          {{ LiveCodeEditor(name=s.name, code=s.solution, reset_code=s.solution) }}
-        </div>
-      </div>
-      {% endfor %}
-    </div>
-    {% endfor %}
-  </div>
-</div>
-{% endblock %}
-
-
-{%- block script %}
-{{ super() }}
-{{ LiveCodeEditorJS() }}
-{% endblock %}

community/www/batch/progress.py

@@ -1,62 +0,0 @@
-import frappe
-from community.lms.models import Course
-from collections import defaultdict
-from . import utils
-
-def get_context(context):
-    utils.get_common_context(context)
-
-    exercise_name = frappe.form_dict.get("exercise")
-    if exercise_name:
-        exercise = frappe.get_doc("Exercise", exercise_name)
-    else:
-        exercise = None
-
-    context.exercise = exercise
-    context.report = BatchReport(context.course, context.batch)
-
-class BatchReport:
-    def __init__(self, course, batch):
-        self.submissions = get_submissions(course, batch)
-        self.exercises = self.get_exercises(course.name)
-        self.submissions_by_exercise = defaultdict(list)
-        for s in self.submissions:
-            self.submissions_by_exercise[s.exercise].append(s)
-
-    def get_exercises(self, course_name):
-        return frappe.get_all("Exercise", {"course": course_name, "lesson": ["!=", ""]}, ["name", "title", "index_label"], order_by="index_label")
-
-    def get_submissions_of_exercise(self, exercise_name):
-        return self.submissions_by_exercise[exercise_name]
-
-def get_submissions(course, batch):
-    students = course.get_students(batch.name)
-    if not len(students):
-        return []
-    students_map = {s.email: s for s in students}
-    names, values = nparams("s", students_map.keys())
-    sql = """
-    select owner, exercise, name, solution, creation, image
-    from (
-        select owner, exercise, name, solution, creation, image,
-            row_number() over (partition by owner, exercise order by creation desc) as ix
-        from `tabExercise Submission`) as t
-    where t.ix=1 and owner IN {}
-    """.format(names)
-
-    data = frappe.db.sql(sql, values=values, as_dict=True)
-    for row in data:
-        row['owner'] = students_map[row['owner']]
-    return data
-
-def nparams(name, values):
-    """Creates n paramters from a list of values for a db query.
-
-    >>> nparams("name", ["a", "b])
-    ("(%(name_1)s, %(name_2)s)", {"name_1": "a", "name_2": "b"})
-    """
-    keys = [f"{name}_{i}" for i, _ in enumerate(values, start=1)]
-    param_names = [f"%({k})s" for k in keys]
-    param_values = dict(zip(keys, values))
-    joined_names = "(" + ", ".join(param_names) + ")"
-    return joined_names, param_values

community/www/batch/schedule.html

@@ -1,17 +0,0 @@
-{% extends "templates/base.html" %}
-{% block title %}Schedule{% endblock %}
-
-{% block head_include %}
-<meta name="description" content="Courses" />
-<meta name="keywords" content="" />
-<link rel="stylesheet" href="/assets/frappe/css/font-awesome.css">
-{% endblock %}
-
-{% block content %}
-<div class="container">
-  {{ widgets.BatchTabs(course=course, batch=batch) }}
-  <h3>
-    Schedule
-  </h3>
-</div>
-{% endblock %}

community/www/batch/schedule.py

@@ -1,20 +0,0 @@
-import frappe
-from community.lms.models import Course
-
-def get_context(context):
-    context.no_cache = 1
-    course_name = frappe.form_dict["course"]
-    batch_name = frappe.form_dict["batch"]
-
-    course = Course.find(course_name)
-    if not course:
-        context.template = "www/404.html"
-        return
-
-    batch = course.get_batch(batch_name)
-    if not batch:
-        frappe.local.flags.redirect_location = "/courses/" + course_name
-        raise frappe.Redirect
-
-    context.course = course
-    context.batch = batch

community/www/courses/course.html

@@ -9,7 +9,7 @@
 {% endblock %}
 {% block content %}
 <div class="common-page-style">
-  <div class="col course-home-page">
+  <div class="container course-home-page">
     {{ widgets.BreadCrumb(course=course) }}
     {{ CourseCardWide(course) }}
     {{ CourseOutlineAndCreator(course) }}
@@ -32,12 +32,14 @@
     </div>
   </div>
   <div class="course-card-wide-content">
+    <div class="course-info">
       <div class="course-card-wide-title">
         {{ course.title }}
       </div>
       <div class="course-card-wide-intro">
         {{ course.short_introduction }}
       </div>
+    </div>
     <div class="course-buttons">
       {% if not course.disable_self_learning and not membership %}
       <div class="button wide-button start-learning is-primary join-batch" data-course="{{ course.name | urlencode }}">
@@ -88,10 +90,10 @@
 
 {% macro CourseOutlineAndCreator(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-home-outline col">
+  <div class="course-home-outline">
     {{ widgets.CourseOutline(course=course, membership=membership) }}
   </div>
-  <div class="course-creator-progress-parent col-sm-auto">
+  <div class="course-creator-progress-parent">
     <div class="course-creator-section">
       <div class="course-home-headings">
         Creator
@@ -151,7 +153,7 @@
 
 {% macro CourseDescriptionAndOverview(course) %}
 <div class="course-outline-instructor-parent">
-  <div class="course-description-section col">
+  <div class="course-description-section">
     <div class="course-home-headings">
       Course Description
     </div>
@@ -161,7 +163,7 @@
   </div>
   {% set avg_rating = course.get_average_rating() %}
   {% if course.get_students() | length or avg_rating %}
-  <div class="course-overview-section col-sm-auto">
+  <div class="course-overview-section">
     <div class="course-home-headings">
       Overview
     </div>

community/www/courses/index.html

@@ -10,7 +10,7 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="col course-top-section">
+  <div class="container">
     <div class="courses-header">
       {{ 'All Courses' }}
     </div>
@@ -22,16 +22,3 @@
   </div>
 </div>
 {% endblock %}
-
-{% block script %}
-<script>
-  frappe.ready(() => {
-    $(".course-card-title").each((i, element) => {
-      var title = $(element).text();
-      var length = $(window).width() <= 375 ? 60 : 65;
-      var suffix = title.length > length ? "..." : "";
-      $(element).text(title.substring(0, length) + suffix);
-    })
-  })
-</script>
-{% endblock %}

community/www/my-courses/index.html

@@ -1,82 +0,0 @@
-{% extends "templates/base.html" %}
-{% from "www/hackathons/macros/card.html" import null_card %}
-
-{% block title %}{{ 'My Courses' }}{% endblock %}
-{% block head_include %}
-<meta name="description" content="My Courses" />
-<meta name="keywords" content="" />
-<style>
-	div.card-hero-img {
-		height: 220px;
-		background-size: cover;
-		background-repeat: no-repeat;
-		background-position: center;
-		background-color: rgb(250, 251, 252);
-	}
-
-	.card-image-wrapper {
-		display: flex;
-		overflow: hidden;
-		height: 220px;
-		background-color: rgb(250, 251, 252);
-		justify-content: center;
-	}
-
-	.image-body {
-		align-self: center;
-		color: #d1d8dd;
-		font-size: 24px;
-		font-weight: 600;
-		line-height: 1;
-		padding: 20px;
-	}
-
-	.no-courses {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-	}
-
-	section {
-		padding: 5rem 0 5rem 0;
-	}
-</style>
-{% endblock %}
-
-{% macro card(course) %}
-<div class="col-sm-4 mb-4 text-left">
-	<a href="//courses/course?course={{course.name}}" class="no-decoration no-underline">
-		<div class="card h-100">
-			<div class='card-body'>
-				<h5 class='card-title'>{{ course.title }}</h5>
-			</div>
-		</div>
-	</a>
-</div>
-{% endmacro %}
-
-{% block content %}
-<section class="section">
-	<div class='container'>
-		{% if frappe.session.user != "Guest" %}
-		{% for course in my_courses %}
-		{{ card(course) }}
-		{% endfor %}
-		{% if my_courses %}
-		{% for n in range( (3 - (my_courses|length)) %3) %}
-		{{ null_card() }}
-		{% endfor %}
-		{% else %}
-		<div class="no-courses">You haven't enrolled in any Course yet. <a href="/courses">Check out the availabe
-				courses.</a></div>
-		{% endif %}
-		{% else %}
-		<div class="no-courses">
-			<p>Please sign up to access this page.</p>
-			<a id="signup" class="btn btn-primary btn-lg" href="/login#signup">{{_('Sign Up')}}</a>
-		</div>
-		{% endif %}
-	</div>
-</section>
-{% endblock %}

community/www/my-courses/index.py

@@ -1,15 +0,0 @@
-import frappe
-
-def get_context(context):
-	context.no_cache = 1
-	context.my_courses = get_my_courses()
-
-def get_my_courses():
-	my_courses = []
-	courses = frappe.get_all("LMS Course Enrollment", {"owner": frappe.session.user}, ["course"])
-	for course in courses:
-		my_courses.append({
-			"name": course.course,
-			"title": frappe.db.get_value("LMS Course", course.course, ["title"])
-		})
-	return my_courses

community/www/profiles/profile.html

@@ -6,23 +6,57 @@
 
 {% block content %}
 <div class="common-page-style">
-  <div class="course-home-page">
+  <div class="container profile-page">
-    {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
+    {{ ProfileBanner(member) }}
     {{ AboutOverviewSection(member) }}
-    <div class="profile-courses">
     {{ CoursesCreated(member) }}
     {{ CoursesMentored(member) }}
     {{ CoursesEnrolled(member) }}
-    </div>
     {{ ProfileTabs(profile_tabs) }}
   </div>
 </div>
 {% endblock %}
 
+{% macro ProfileBanner(member) %}
+<div class="">
+  <div class="profile-banner" style="background-image: url(/assets/community/images/profile-banner.png)">
+  <div class="profile-avatar">
+    {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
+    <div class="profile-name"> {{ member.full_name }} </div>
+    {% if member.get_authored_courses() | length %}
+    <div class="creator-badge"> Creator </div>
+    {% endif %}
+   </div>
+  </div>
+  <div class="profile-info">
+    {% if member.profession %}
+    <span class="profile-profession"> {{ member.profession }} </span>
+    {% endif %}
+    <div class="social-icons">
+      {% if member.linkedin %}
+      <a class="linkedin" href="{{ member.linkedin }}">
+        <img src="/assets/community/images/linkedin.png">
+      </a>
+      {% endif %}
+      {% if member.medium %}
+      <a class="medium" href="{{ member.medium}}">
+        <img src="/assets/community/icons/medium.svg">
+      </a>
+      {% endif %}
+      {% if member.github %}
+      <a class="github" href="{{ member.github }}">
+        <img src="/assets/community/icons/github.svg">
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</div>
+{% endmacro %}
+
 {% macro AboutOverviewSection(member) %}
-<div class="course-outline-instructor-parent">
+<div class="profile-parent-section">
   {% if member.bio %}
-  <div class="course-overview-section">
+  <div class="profile-about-section">
     <div class="course-home-headings">
       About
     </div>
@@ -62,6 +96,7 @@
 
 {% macro CoursesCreated(member) %}
 {% if member.get_authored_courses() | length %}
+<div class="profile-courses">
   <div class="course-home-headings">
     Courses Created
   </div>
@@ -71,25 +106,29 @@
     {{ widgets.CourseCard(course=course_details) }}
     {% endfor %}
   </div>
+</div>
 {% endif %}
 {% endmacro %}
 
 {% macro CoursesMentored(member) %}
-{% if member.get_course_membership("Mentor") | length %}
+{% if member.get_mentored_courses() | length %}
+<div class="profile-courses">
   <div class="course-home-headings">
     Courses Mentored
   </div>
   <div class="cards-parent">
-  {% for membership in member.get_course_membership("Mentor") %}
+    {% for mentorship in member.get_mentored_courses() %}
-  {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+    {% set course_details = frappe.get_doc("LMS Course", mentorship.course) %}
     {{ widgets.CourseCard(course=course_details) }}
     {% endfor %}
   </div>
+</div>
 {% endif %}
 {% endmacro %}
 
 {% macro CoursesEnrolled(member) %}
 {% if member.get_course_membership("Student") | length %}
+<div class="profile-courses">
   <div class="course-home-headings">
     Courses Enrolled
   </div>
@@ -99,6 +138,7 @@
     {{ widgets.CourseCard(course=course_details) }}
     {% endfor %}
   </div>
+</div>
 {% endif %}
 {% endmacro %}