feat: profile page redesign

school/fixtures/custom_field.json

@@ -548,7 +548,7 @@
   "columns": 0,
   "default": null,
   "depends_on": null,
-  "description": "Private Information includes your Mobile Number, Email Address, Grade Type, Grade and Work Environment Preferences",
+  "description": "Private Information includes your Grade and Work Environment Preferences",
   "docstatus": 0,
   "doctype": "Custom Field",
   "dt": "User",
@@ -570,7 +570,7 @@
   "label": "Hide my Private Information from others",
   "length": 0,
   "mandatory_depends_on": null,
-  "modified": "2021-12-31 11:57:47.942967",
+  "modified": "2021-12-31 11:57:47.942968",
   "module": null,
   "name": "User-hide_my_private_information_from_others",
   "no_copy": 0,

school/lms/web_form/profile/profile.json

@@ -18,10 +18,11 @@
  "docstatus": 0,
  "doctype": "Web Form",
  "idx": 0,
+ "is_multi_step_form": 0,
  "is_standard": 1,
  "login_required": 1,
  "max_attachment_size": 0,
- "modified": "2021-12-28 16:09:47.675523",
+ "modified": "2022-02-23 09:32:37.352930",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "profile",
@@ -113,13 +114,12 @@
   },
   {
    "allow_read_on_all_link_options": 0,
-   "fieldname": "mobile_no",
+   "fieldname": "headline",
    "fieldtype": "Data",
    "hidden": 0,
-   "label": "Mobile No",
+   "label": "Headline",
    "max_length": 0,
    "max_value": 0,
-   "options": "Phone",
    "read_only": 0,
    "reqd": 0,
    "show_in_filter": 0
@@ -136,6 +136,19 @@
    "reqd": 0,
    "show_in_filter": 0
   },
+  {
+   "allow_read_on_all_link_options": 0,
+   "fieldname": "mobile_no",
+   "fieldtype": "Data",
+   "hidden": 0,
+   "label": "Mobile No",
+   "max_length": 0,
+   "max_value": 0,
+   "options": "Phone",
+   "read_only": 0,
+   "reqd": 0,
+   "show_in_filter": 0
+  },
   {
    "allow_read_on_all_link_options": 0,
    "fieldname": "linkedin",
@@ -322,7 +335,7 @@
    "max_value": 0,
    "options": "Preferred Function",
    "read_only": 0,
-   "reqd": 1,
+   "reqd": 0,
    "show_in_filter": 0
   },
   {
@@ -335,7 +348,7 @@
    "max_value": 0,
    "options": "Preferred Industry",
    "read_only": 0,
-   "reqd": 1,
+   "reqd": 0,
    "show_in_filter": 0
   },
   {

school/plugins.py

@@ -97,7 +97,6 @@ def set_mandatory_fields_for_profile():
     for field in profile_form.web_form_fields:
         field.reqd = 0
         if field.fieldname in profile_mandatory_fields:
-            print(field.fieldname)
             field.reqd = 1
 
     profile_form.save()

school/public/css/style.css

@@ -1,16 +1,6 @@
 :root {
-  --text-xs: 11px;
-  --text-sm: 12px;
-  --text-md: 13px;
-  --text-base: 14px;
-  --text-lg: 16px;
-  --text-xl: 18px;
-  --text-2xl: 20px;
-  --text-3xl: 22px;
   --text-3-5xl: 24px;
   --text-3-8xl: 34px;
-  --text-4xl: 44px;
-  --navbar-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
 }
 
 body {
@@ -709,6 +699,11 @@ input[type=checkbox] {
     width: 88px;
     height: 88px;
   }
+
+  .avatar-square {
+    width: 75px;
+    height: 75px;
+  }
 }
 
 @media (max-width: 375px) {
@@ -723,19 +718,6 @@ input[type=checkbox] {
   height: 48px;
 }
 
-.description-card {
-  padding: 1.5rem;
-  flex-direction: column;
-}
-
-.description-card p {
-  line-height: 1.72;
-}
-
-.description-card p:last-child {
-  margin-bottom: 0;
-}
-
 .overview-card {
   padding: 1.5rem;
   flex-direction: column;
@@ -958,9 +940,19 @@ input[type=checkbox] {
   height: 68px;
   background: #ffffff;
   border-radius: 0px 0px 8px 8px;
-  font-size: 12px;
+  font-size: var(--text-sm);
   display: flex;
   justify-content: space-between;
+  margin: 0 1rem 4rem 0;
+  flex-direction: column;
+  padding-left: 200px;
+}
+
+@media (max-width: 550px) {
+  .profile-info {
+    align-items: flex-end;
+    padding-left: 0;
+  }
 }
 
 .profile-avatar {
@@ -988,44 +980,31 @@ input[type=checkbox] {
   color: var(--gray-900);
   font-weight: 600;
   font-size: var(--text-3xl);
-  margin-left: 1.25rem;
 }
 
 @media (max-width: 375px) {
   .profile-name {
     font-size: var(--text-lg);
-    padding: 5px;
+    padding-top: 5px;
   }
 }
 
 .profile-name-section {
   display: flex;
   align-items: center;
-  margin-bottom: 0.25rem;
+  margin: 1rem 0 0.25rem;
-  padding-left: 175px;
+}
+
+@media (max-width: 550px) {
+  .profile-name-section {
+    flex-direction: column;
+    align-items: flex-end;
+    margin: 0 0 0.5rem;
+  }
 }
 
 .profile-link {
-  display: flex;
+  margin-left: auto;
-  align-items: center;
-  padding: 1rem;
-}
-
-@media (max-width: 500px) {
-  .profile-info {
-    flex-direction: column;
-    align-items: end;
-    justify-content: space-around;
-    padding-right: 1rem;
-  }
-
-  .profile-name-section {
-    padding-left: 0;
-  }
-
-  .profile-link {
-    padding: 0;
-  }
 }
 
 .creator-badge {
@@ -1051,11 +1030,16 @@ input[type=checkbox] {
   }
 }
 
-.profile-card {
+@media (max-width: 550px) {
-  flex-direction: column;
+  .creator-badge {
-  padding: 1.5rem;
+    margin-top: 0.25rem;
+    margin-left: 0;
+  }
+}
+
+.profile-grid-card {
   display: grid;
-  row-gap: 2rem;
+  row-gap: 1rem;
 }
 
 .profile-item {
@@ -1263,9 +1247,9 @@ pre {
   }
 }
 
-.thread-card {
+.profile-card {
   flex-direction: column;
-  padding: 1rem;
+  padding: 1rem 1.25rem;
 }
 
 .empty-state {
@@ -1301,9 +1285,6 @@ pre {
   align-items: center;
 }
 
-.navbar {
-  box-shadow: var(--navbar-shadow);
-}
 .search {
   background-image: url(/assets/frappe/icons/timeless/search.svg);
   border: none;
@@ -1761,3 +1742,23 @@ pre {
   flex-grow: 1;
   margin-left: 1rem;
 }
+
+.profile-page-body {
+  background-color: var(--gray-50);
+  padding: 2rem 0;
+}
+
+.profile-column-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+}
+
+.description {
+  font-size: var(--text-base);
+  color: var(--gray-800);
+}
+
+.profile-meta {
+  display: flex;
+  align-items: center;
+}

school/public/icons/book_plain.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 4.6875V11.6667" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M11.7702 2.91666C10.7918 2.91666 9.99935 3.70911 9.99935 4.6875C9.99935 3.70911 9.2069 2.91666 8.22852 2.91666H3.91602C3.36373 2.91666 2.91602 3.36438 2.91602 3.91666V13.3125C2.91602 14.4171 3.81145 15.3125 4.91602 15.3125H8.22852C9.2069 15.3125 9.99935 16.1049 9.99935 17.0833C9.99935 16.1049 10.7918 15.3125 11.7702 15.3125H15.0827C16.1873 15.3125 17.0827 14.4171 17.0827 13.3125V3.91666C17.0827 3.36438 16.635 2.91666 16.0827 2.91666H11.7702Z" stroke="#505A62" stroke-miterlimit="10" stroke-linecap="square"/>
+</svg>

school/www/profiles/profile.html

@@ -1,15 +1,24 @@
 {% extends "templates/base.html" %}
 {% block head_include %}
 <meta name="description" content="{{ member.full_name }}" />
-<meta name="keywords" content="An app that supports Communities." />
 {% endblock %}
 
 {% block content %}
 <div class="common-page-style profile-page">
+  {{ ProfileBanner(member) }}
+  <div class="profile-page-body">
     <div class="container">
       {% set read_only = member.name != frappe.session.user %}
-    {{ ProfileBanner(member) }}
+      {{ About(member) }}
-    {{ ProfileSections(member) }}
+      {{ EducationDetails(member) }}
+      {{ WorkDetails(member) }}
+      {{ Certification(member) }}
+      {{ Contact(member) }}
+      {{ Skills(member) }}
+      {{ CareerPreference(member) }}
+    </div>
+  </div>
+  <div class="container">
     {{ CoursesEnrolled(member, read_only) }}
     {{ CoursesCreated(member, read_only) }}
     {{ CoursesMentored(member, read_only) }}
@@ -21,8 +30,8 @@
 {% macro ProfileBanner(member) %}
 {% set cover_image = member.cover_image if member.cover_image else "/assets/school/images/profile-banner.png" %}
 {% set enrollment = member.get_course_membership("Student") | length %}
-{% set enrollment_suffix = "Courses" if enrollment > 1 "Course" %}
+{% set enrollment_suffix = _("Courses") if enrollment > 1 else _("Course") %}
-<div class="">
+<div class="container">
   <div class="profile-banner" style="background-image: url({{ cover_image }})">
     <div class="profile-avatar">
       {{ widgets.Avatar(member=member, avatar_class="avatar-square") }}
@@ -31,89 +40,41 @@
   <div class="profile-info">
     <div class="profile-name-section">
       <div class="profile-name"> {{ member.full_name }} </div>
-      {% if enrollment %}
+
-      <div>{{ enrollment }}</div>
-      {% endif %}
       {% if get_authored_courses(member.name) | length %}
-      <div class="creator-badge"> Creator </div>
+      <div class="creator-badge"> {{ _("Creator") }} </div>
       {% endif %}
+
       {% if member.looking_for_job %}
-      <div class="creator-badge"> Open Network </div>
+      <div class="creator-badge"> {{ _("Open Network") }} </div>
       {% endif %}
-    </div>
 
       {% if frappe.session.user == member.email %}
-      <a class="dark-links profile-link" href="/edit-profile?name={{ member.email }}">Edit Profile</a>
+      <a class="dark-links profile-link" href="/edit-profile?name={{ member.email }}"> {{ _("Edit Profile") }} </a>
+      {% endif %}
+    </div>
+
+    <div class="profile-meta">
+      {% if member.headline %}
+      <div class="course-meta mr-3"> {{ member.headline }} </div>
       {% endif %}
 
-  </div>
-</div>
-{% endmacro %}
-
-{% macro ProfileSections(member) %}
-
-<div class="profile-parent-section">
-
-  <div class="profile-column-one">
-    {{ About(member) }}
-    {{ EducationDetails(member) }}
-    {{ WorkDetails(member) }}
-    {{ Certification(member) }}
-  </div>
-
-  <div class="profile-column-two">
-    {{ Overview(member) }}
-    {{ Contact(member) }}
-    {{ Skills(member) }}
-    {{ CareerPreference(member) }}
-    <!-- {{ WorkPreference(member) }} -->
-  </div>
-
-</div>
-{% endmacro %}
-
-{% macro Overview(member) %}
-
-{% set mentorship = member.get_course_membership("Mentor") | length %}
-{% set reviews = member.get_user_reviews() | length %}
-
-{% if enrollment or reviews or mentorship %}
-  <div class="course-overview-section">
-    <div class="course-home-headings">
-      Overview
-    </div>
-    <div class="common-card-style overview-card ">
       {% if enrollment %}
-      <div class="overview-item">
+      <div class="course-meta">
-        <img class="mr-1" src="/assets/school/icons/course.svg" />
+        <img src="/assets/school/icons/book_plain.svg">
-        <span> {{ enrollment }} {% if enrollment > 1 %} Courses {% else %} Course {% endif %} Taken </span>
+        {{ enrollment }} {{ enrollment_suffix }} {{ _("taken") }} </div>
-      </div>
-      {% endif %}
-      {% if reviews %}
-      <div class="overview-item">
-        <img class="mr-1" src="/assets/school/icons/rating.svg" />
-        <span> {{ reviews }} {% if reviews > 1 %} Courses {% else %} Course {% endif %} Reviewed </span>
-      </div>
-      {% endif %}
-      {% if mentorship %}
-      <div class="overview-item">
-        <img class="mr-1" src="/assets/school/icons/calendar.svg" />
-        <span> {{ mentorship }} {% if mentorship > 1 %} Courses {% else %} Course {% endif %} Mentored </span>
-      </div>
       {% endif %}
     </div>
-  </div>
-{% endif %}
-{% endmacro %}
 
+  </div>
+</div>
+{% endmacro %}
 
 {% macro CoursesCreated(member, read_only) %}
 {% set authored_courses = get_authored_courses(member.name) %}
 {% if authored_courses | length %}
 <div class="profile-courses">
-  <div class="course-home-headings">
+  <div class="course-home-headings"> {{ _("Courses Created") }} </div>
-    Courses Created
-  </div>
   <div class="cards-parent">
     {% for course in authored_courses %}
     {% set course_details = frappe.db.get_value("LMS Course", course,
@@ -181,9 +142,9 @@
 {% macro About(member) %}
 {% if member.bio %}
   <div class="profile-about-section">
+    <div class="common-card-style profile-card">
       <div class="course-home-headings"> {{ _("About") }} </div>
-    <div class="common-card-style description-card">
+      <div class="description">{{ member.bio }}</div>
-      {{ member.bio }}
     </div>
   </div>
 {% endif %}
@@ -191,8 +152,8 @@
 
 {% macro WorkPreference(member) %}
 <div class="education-details">
+  <div class="common-card-style profile-card">
     <div class="course-home-headings"> {{ _("Work Preference") }} </div>
-  <div class="common-card-style overview-card">
     <div> {{ member.attire }} </div>
     <div> {{ member.collaboration }} </div>
     <div> {{ member.role }} </div>
@@ -206,39 +167,43 @@
 {% macro CareerPreference(member) %}
 {% if member.preferred_functions or member.preferred_industries or member.preferred_location or member.dream_companies %}
 <div class="education-details">
+  <div class="common-card-style profile-card">
     <div class="course-home-headings"> {{ _("Career Preference") }} </div>
-  <div class="common-card-style overview-card">
+    <div class="profile-column-grid">
-
       {% if member.preferred_functions | length %}
       <div>
-      <b>Preferred Functions:</b>
+        <b>{{ _("Preferred Functions:") }}</b>
-      <div>
         {% for function in member.preferred_functions %}
-      <div>{{ function.function }}</div>
+        <div class="description">{{ function.function }}</div>
         {% endfor %}
       </div>
-    </div>
       {% endif %}
 
       {% if member.preferred_industries | length %}
       <div>
-      <b>Preferred Industries:</b>
+        <b>{{ _("Preferred Industries:") }}</b>
-      <div>
         {% for industry in member.preferred_industries %}
-      <div>{{ industry.industry }}</div>
+        <div class="description">{{ industry.industry }}</div>
         {% endfor %}
       </div>
-    </div>
       {% endif %}
 
       {% if member.preferred_location %}
-    <div> <b>Preferred Locations:</b> {{ member.preferred_location }} </div>
+      <div>
+        <b> {{ _("Preferred Locations:") }} </b>
+        <div class="description"> {{ member.preferred_location }} </div>
+      </div>
       {% endif %}
 
       {% if member.dream_companies %}
-    <div> <b>Dream Companies:</b> {{ member.dream_companies }} </div>
+      <div>
+        <b> {{ _("Dream Companies:") }} </b>
+        <div class="description"> {{ member.dream_companies }} </div>
+      </div>
       {% endif %}
     </div>
+
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
@@ -246,36 +211,29 @@
 {% macro Contact(member) %}
 {% if show_contacts_section %}
 <div class="education-details">
+  <div class="common-card-style profile-card">
     <div class="course-home-headings"> {{ _("Contact") }} </div>
-  <div class="common-card-style overview-card">
+    <div class="profile-column-grid">
-
-    {% if not member.hide_private and not hide_primary_contact %}
-    <a class="button-links" href="mailto:{{ member.email }}"> <img src="/assets/school/icons/mail.svg"> {{ member.email }} </a>
-    {% endif %}
-
-    {% if member.mobile_no and not member.hide_private and not hide_primary_contact %}
-    <a class="button-links" href="tel:{{ member.mobile_no }}" >
-      <img src="/assets/school/icons/call.svg"> {{ member.mobile_no }}
-    </a>
-    {% endif %}
-
       {% if member.linkedin %}
       {% set linkedin = member.linkedin[:-1] if member.linkedin[-1] == "/" else member.linkedin %}
-      <a class="button-links" href="{{ member.linkedin }}">
+      <a class="button-links description" href="{{ member.linkedin }}">
         <img src="/assets/school/icons/linkedin.svg"> {{ linkedin.split("/")[-1] }}
       </a>
     {% endif %}
+
     {% if member.medium %}
-    <a class="button-links" href="{{ member.medium}}">
+    <a class="button-links description" href="{{ member.medium}}">
       <img src="/assets/school/icons/medium.svg"> {{ member.medium.split("/")[-1] }}
     </a>
     {% endif %}
+
     {% if member.github %}
-    <a class="button-links" href="{{ member.github }}">
+    <a class="button-links description" href="{{ member.github }}">
       <img src="/assets/school/icons/github.svg"> {{ member.github.split("/")[-1] }}
     </a>
     {% endif %}
     </div>
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
@@ -283,12 +241,14 @@
 {% macro Skills(member) %}
 {% if member.skill | length %}
 <div class="education-details">
+  <div class="common-card-style profile-card">
     <div class="course-home-headings"> {{ _("Skills")}} </div>
-  <div class="common-card-style overview-card">
+    <div class="profile-column-grid">
       {% for skill in member.skill %}
-    <div> {{ skill.skill_name }} </div>
+      <div class="description"> {{ skill.skill_name }} </div>
       {% endfor %}
     </div>
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
@@ -296,8 +256,9 @@
 {% macro EducationDetails(member) %}
 {% if member.education %}
 <div class="education-details">
-  <div class="course-home-headings"> Education </div>
   <div class="common-card-style profile-card">
+    <div class="course-home-headings"> {{ _("Education") }} </div>
+    <div class="profile-grid-card">
       {% for edu in member.education %}
       <div class="profile-card-row">
         <div class="bold-title"> {{ edu.institution_name }} </div>
@@ -307,15 +268,17 @@
           {% if edu.grade %} <span></span> {{ edu.grade }}  {% endif %}
           {% endif %}
         </div>
-      <div>
+        <div class="description">
           {% if edu.start_date %}
           {{ frappe.utils.format_date(edu.start_date, "MMM YYYY") }} -
           {% endif %}
           {{ frappe.utils.format_date(edu.end_date, "MMM YYYY") }} </div>
-      <div> {{ edu.location }} </div>
+        <div class="description"> {{ edu.location }} </div>
       </div>
       {% endfor %}
     </div>
+
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
@@ -324,19 +287,21 @@
 {% set work_details = member.work_experience + member.internship %}
 {% if work_details | length %}
 <div class="education-details">
-  <div class="course-home-headings"> Work Experience </div>
   <div class="common-card-style profile-card">
+   <div class="course-home-headings"> {{ _("Work Experience") }} </div>
+   <div class="profile-grid-card">
     {% for work in work_details %}
     <div class="">
       <div class="bold-title"> {{ work.title }} </div>
       <div class="profile-item"> {{ work.company }} </div>
-      <div> {{ frappe.utils.format_date(work.from_date, "MMM YYYY") }} -
+      <div class="description"> {{ frappe.utils.format_date(work.from_date, "MMM YYYY") }} -
         {% if work.to_date %} {{ frappe.utils.format_date(work.to_date, "MMM YYYY") }} {% else %} Present {% endif %} </div>
-        <div> {{ work.location }} </div>
+        <div class="description"> {{ work.location }} </div>
         {% if work.description %} <div class="profile-item"> {{ work.description }} </div> {% endif %}
     </div>
     {% endfor %}
    </div>
+  </div>
 </div>
 {% endif %}
 {% endmacro %}
@@ -344,18 +309,21 @@
 {% macro Certification(member) %}
 {% if member.certification %}
 <div class="education-details">
-  <div class="course-home-headings"> Certification </div>
   <div class="common-card-style profile-card">
+    <div class="course-home-headings"> {{ _("Certification") }} </div>
+    <div class="profile-grid-card">
       {% for cert in member.certification %}
       <div class="">
         <div class="bold-title"> {{ cert.certification_name }} </div>
         <div class="profile-item"> {{ cert.organization }} </div>
-      <div> {{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }}
+        <div class="description"> {{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }}
           {% if cert.expiration_date %} - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }} {% endif %} </div>
           {% if cert.description %} <div class="profile-item"> {{ cert.description }} </div> {% endif %}
       </div>
       {% endfor %}
     </div>
+
+  </div>
 </div>
 {% endif %}
 {% endmacro %}