fix: profile page fixes and course completion tick

2021-07-15 11:16:01 +05:30
parent ec852fc255
commit 4891be1d8c
15 changed files with 598 additions and 50 deletions
--- a/community/fixtures/custom_field.json
+++ b/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
 }
 ]
--- a/community/hooks.py
+++ b/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.
--- a/community/lms/web_form/profile/profile.js
+++ b/community/lms/web_form/profile/profile.js
@@ -1,3 +1,7 @@
-frappe.ready(function() {
-	// bind events here
-})
+frappe.ready(function () {
+  frappe.web_form.after_load = () => {
+    if (!frappe.utils.get_url_arg("name")) {
+      window.location.href = `/edit-profile?name=${frappe.session.user}`;
+    }
+  }
+})
--- a/community/lms/web_form/profile/profile.json
+++ b/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
  }
 ]
 }
--- a/community/lms/widgets/ChapterTeaser.html
+++ b/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 %}

--- a/community/lms/widgets/CourseCard.html
+++ b/community/lms/widgets/CourseCard.html
@@ -70,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>
--- a/community/lms/widgets/MemberCard.html
+++ b/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 }}
--- a/community/overrides/user.py
+++ b/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"]
+                )
--- a/community/public/css/style.css
+++ b/community/public/css/style.css
@@ -303,6 +303,11 @@ input[type=checkbox] {
  height: 45px;
 }

+@media (max-width: 360px) {
+  .course-card-title {
+    font-size: 14px;
+  }
+}
 .card-divider {
  border: 1px solid #F4F5F6;
  margin-bottom: 16px;
@@ -862,11 +867,30 @@ div.custom-checkbox>label>input:checked+img {
  margin: 0;
 }

-.avatar-xl {
+.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;
  flex-direction: column;
@@ -1066,15 +1090,6 @@ div.custom-checkbox>label>input:checked+img {
  font-weight: bold;
 }

-.lesson-progress-tick {
-  width: 16px;
-  height: 16px;
-  background: #4C5A67;
-  border-radius: 2px;
-  padding: 2px;
-  margin: 0px 4px 4px;
-}
-
 .profile-page {
  max-width: 1150px;
  margin: 0 auto;
@@ -1082,16 +1097,141 @@ div.custom-checkbox>label>input:checked+img {
  padding-bottom: 1rem;
 }

+.profile-banner {
+  width: 100%;
+  height: 248px;
+  border-radius: 12px 12px 0px 0px;
+}
+
+@media (max-width: 500px) {
+  .profile-banner {
+    height: 150px;
+  }
+}
+
+.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) {
+@media (max-width: 500px) {
  .profile-courses {
    padding: 0px 24px 0px;
  }
 }

+@media (max-width: 360px) {
+  .profile-courses {
+    padding: 0px 10px 0px;
+  }
+}
+
 .progress-text {
  font-size: 12px;
  line-height: 165%;
@@ -1123,9 +1263,9 @@ div.custom-checkbox>label>input:checked+img {
  }
 }

-@media (max-width: 375px) {
+@media (max-width: 600px) {
  .progress-card {
-    width: 312px;
+    width: 100%;
  }
 }

--- a/community/public/icons/github.svg
+++ b/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>
--- a/community/public/icons/medium.svg
+++ b/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>
--- a/community/public/images/profile-banner.png
+++ b/community/public/images/profile-banner.png
--- a/community/public/images/profile-cover.png
+++ b/community/public/images/profile-cover.png
--- a/community/www/courses/index.html
+++ b/community/www/courses/index.html
@@ -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 %}
--- a/community/www/profiles/profile.html
+++ b/community/www/profiles/profile.html
@@ -7,7 +7,7 @@
 {% block content %}
 <div class="common-page-style">
  <div class="col profile-page">
-    {{ widgets.MemberCard(member=member, show_course_count=True, dimension_class="member-card-xl") }}
+    {{ ProfileBanner(member) }}
    {{ AboutOverviewSection(member) }}
    {{ CoursesCreated(member) }}
    {{ CoursesMentored(member) }}
@@ -17,6 +17,42 @@
 </div>
 {% endblock %}

+{% macro ProfileBanner(member) %}
+<div class="col">
+  <div class="profile-banner" style="background: 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/icons/linkedin.svg">
+      </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">
  {% if member.bio %}
@@ -75,14 +111,14 @@
 {% 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") %}
-    {% set course_details = frappe.get_doc("LMS Course", membership.course) %}
+    {% for mentorship in member.get_mentored_courses() %}
+    {% set course_details = frappe.get_doc("LMS Course", mentorship.course) %}
    {{ widgets.CourseCard(course=course_details) }}
    {% endfor %}
  </div>