Merge pull request #306 from pateljannat/profile-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 {
@@ -675,6 +665,15 @@ input[type=checkbox] {
   margin: 0;
 }
 
+.avatar-square {
+  width: 130px;
+  height: 130px;
+}
+
+.avatar-square .avatar-frame {
+  border-radius: 20px;
+}
+
 .avatar-medium {
   width: 42px;
   height: 42px;
@@ -700,6 +699,11 @@ input[type=checkbox] {
     width: 88px;
     height: 88px;
   }
+
+  .avatar-square {
+    width: 75px;
+    height: 75px;
+  }
 }
 
 @media (max-width: 375px) {
@@ -714,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;
@@ -925,12 +916,12 @@ input[type=checkbox] {
 }
 
 .profile-page {
-  padding-top: 1rem;
+  padding-top: 0;
 }
 
 .profile-banner {
   height: 248px;
-  border-radius: 8px 8px 0px 0px;
+  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
   background-size: cover;
   background-position: center;
 }
@@ -949,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 {
@@ -976,48 +977,34 @@ input[type=checkbox] {
 }
 
 .profile-name {
-  color: var(--gray-800);
+  color: var(--gray-900);
   font-weight: 600;
-  font-size: 22px;
+  font-size: var(--text-3xl);
-  line-height: 156%;
-  letter-spacing: -0.0175em;
 }
 
 @media (max-width: 375px) {
   .profile-name {
-    font-size: 16px;
+    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 {
@@ -1043,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 {
@@ -1255,9 +1247,9 @@ pre {
   }
 }
 
-.thread-card {
+.profile-card {
   flex-direction: column;
-  padding: 1rem;
+  padding: 1rem 1.25rem;
 }
 
 .empty-state {
@@ -1293,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;
@@ -1753,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">
+<div class="common-page-style profile-page">
-  <div class="container profile-page">
+  {{ ProfileBanner(member) }}
-    {% set read_only = member.name != frappe.session.user %}
+  <div class="profile-page-body">
-    {{ ProfileBanner(member) }}
+    <div class="container">
-    {{ ProfileSections(member) }}
+      {% set read_only = member.name != frappe.session.user %}
+      {{ About(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) }}
@@ -20,96 +29,52 @@
 
 {% macro ProfileBanner(member) %}
 {% set cover_image = member.cover_image if member.cover_image else "/assets/school/images/profile-banner.png" %}
-<div class="">
+{% set enrollment = member.get_course_membership("Student") | length %}
+{% set enrollment_suffix = _("Courses") if enrollment > 1 else _("Course") %}
+<div class="container">
   <div class="profile-banner" style="background-image: url({{ cover_image }})">
     <div class="profile-avatar">
-      {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
+      {{ widgets.Avatar(member=member, avatar_class="avatar-square") }}
     </div>
   </div>
   <div class="profile-info">
     <div class="profile-name-section">
       <div class="profile-name"> {{ member.full_name }} </div>
+
       {% 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 %}
+
+      {% if frappe.session.user == member.email %}
+      <a class="dark-links profile-link" href="/edit-profile?name={{ member.email }}"> {{ _("Edit Profile") }} </a>
       {% endif %}
     </div>
 
-    {% if frappe.session.user == member.email %}
+    <div class="profile-meta">
-      <a class="dark-links profile-link" href="/edit-profile?name={{ member.email }}">Edit Profile</a>
+      {% if member.headline %}
-    {% endif %}
+      <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 enrollment = member.get_course_membership("Student") | length %}
-{% 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,
@@ -177,9 +142,9 @@
 {% macro About(member) %}
 {% if member.bio %}
   <div class="profile-about-section">
-    <div class="course-home-headings"> {{ _("About") }} </div>
+    <div class="common-card-style profile-card">
-    <div class="common-card-style description-card">
+      <div class="course-home-headings"> {{ _("About") }} </div>
-      {{ member.bio }}
+      <div class="description">{{ member.bio }}</div>
     </div>
   </div>
 {% endif %}
@@ -187,8 +152,8 @@
 
 {% macro WorkPreference(member) %}
 <div class="education-details">
-  <div class="course-home-headings"> {{ _("Work Preference") }} </div>
+  <div class="common-card-style profile-card">
-  <div class="common-card-style overview-card">
+    <div class="course-home-headings"> {{ _("Work Preference") }} </div>
     <div> {{ member.attire }} </div>
     <div> {{ member.collaboration }} </div>
     <div> {{ member.role }} </div>
@@ -202,38 +167,42 @@
 {% 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="course-home-headings"> {{ _("Career Preference") }} </div>
+  <div class="common-card-style profile-card">
-  <div class="common-card-style overview-card">
+    <div class="course-home-headings"> {{ _("Career Preference") }} </div>
-
+    <div class="profile-column-grid">
-    {% if member.preferred_functions | length %}
+      {% if member.preferred_functions | length %}
-    <div>
-      <b>Preferred Functions:</b>
       <div>
-      {% for function in member.preferred_functions %}
+        <b>{{ _("Preferred Functions:") }}</b>
-      <div>{{ function.function }}</div>
+        {% for function in member.preferred_functions %}
-      {% endfor %}
+        <div class="description">{{ function.function }}</div>
+        {% endfor %}
       </div>
-    </div>
+      {% endif %}
-    {% endif %}
 
-    {% if member.preferred_industries | length %}
+      {% if member.preferred_industries | length %}
-    <div>
-      <b>Preferred Industries:</b>
       <div>
-      {% for industry in member.preferred_industries %}
+        <b>{{ _("Preferred Industries:") }}</b>
-      <div>{{ industry.industry }}</div>
+        {% for industry in member.preferred_industries %}
-      {% endfor %}
+        <div class="description">{{ industry.industry }}</div>
+        {% endfor %}
       </div>
+      {% endif %}
+
+      {% if member.preferred_location %}
+      <div>
+        <b> {{ _("Preferred Locations:") }} </b>
+        <div class="description"> {{ member.preferred_location }} </div>
+      </div>
+      {% endif %}
+
+      {% if member.dream_companies %}
+      <div>
+        <b> {{ _("Dream Companies:") }} </b>
+        <div class="description"> {{ member.dream_companies }} </div>
+      </div>
+      {% endif %}
     </div>
-    {% endif %}
 
-    {% if member.preferred_location %}
-    <div> <b>Preferred Locations:</b> {{ member.preferred_location }} </div>
-    {% endif %}
-
-    {% if member.dream_companies %}
-    <div> <b>Dream Companies:</b> {{ member.dream_companies }} </div>
-    {% endif %}
   </div>
 </div>
 {% endif %}
@@ -242,35 +211,28 @@
 {% macro Contact(member) %}
 {% if show_contacts_section %}
 <div class="education-details">
-  <div class="course-home-headings"> {{ _("Contact") }} </div>
+  <div class="common-card-style profile-card">
-  <div class="common-card-style overview-card">
+    <div class="course-home-headings"> {{ _("Contact") }} </div>
-
+    <div class="profile-column-grid">
-    {% if not member.hide_private and not hide_primary_contact %}
+      {% if member.linkedin %}
-    <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 %}
@@ -279,11 +241,13 @@
 {% macro Skills(member) %}
 {% if member.skill | length %}
 <div class="education-details">
-  <div class="course-home-headings"> {{ _("Skills")}} </div>
+  <div class="common-card-style profile-card">
-  <div class="common-card-style overview-card">
+    <div class="course-home-headings"> {{ _("Skills")}} </div>
-    {% for skill in member.skill %}
+    <div class="profile-column-grid">
-    <div> {{ skill.skill_name }} </div>
+      {% for skill in member.skill %}
-    {% endfor %}
+      <div class="description"> {{ skill.skill_name }} </div>
+      {% endfor %}
+    </div>
   </div>
 </div>
 {% endif %}
@@ -292,25 +256,28 @@
 {% macro EducationDetails(member) %}
 {% if member.education %}
 <div class="education-details">
-  <div class="course-home-headings"> Education </div>
   <div class="common-card-style profile-card">
-    {% for edu in member.education %}
+    <div class="course-home-headings"> {{ _("Education") }} </div>
-    <div class="profile-card-row">
+    <div class="profile-grid-card">
-      <div class="bold-title"> {{ edu.institution_name }} </div>
+      {% for edu in member.education %}
-      <div class="profile-item"> {{ edu.degree_type }} <span></span> {{ edu.major }}
+      <div class="profile-card-row">
-        {% if not member.hide_private %}
+        <div class="bold-title"> {{ edu.institution_name }} </div>
-        <!-- {% if edu.grade_type %} {{ edu.grade_type }}  {% endif %} -->
+        <div class="profile-item"> {{ edu.degree_type }} <span></span> {{ edu.major }}
-        {% if edu.grade %} <span></span> {{ edu.grade }}  {% endif %}
+          {% if not member.hide_private %}
-        {% endif %}
+          <!-- {% if edu.grade_type %} {{ edu.grade_type }}  {% endif %} -->
+          {% if edu.grade %} <span></span> {{ edu.grade }}  {% endif %}
+          {% endif %}
+        </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 class="description"> {{ edu.location }} </div>
       </div>
-      <div>
+      {% endfor %}
-        {% 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>
-    {% endfor %}
+
   </div>
 </div>
 {% endif %}
@@ -320,18 +287,20 @@
 {% 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 %}
@@ -340,17 +309,20 @@
 {% macro Certification(member) %}
 {% if member.certification %}
 <div class="education-details">
-  <div class="course-home-headings"> Certification </div>
   <div class="common-card-style profile-card">
-    {% for cert in member.certification %}
+    <div class="course-home-headings"> {{ _("Certification") }} </div>
-    <div class="">
+    <div class="profile-grid-card">
-      <div class="bold-title"> {{ cert.certification_name }} </div>
+      {% for cert in member.certification %}
-      <div class="profile-item"> {{ cert.organization }} </div>
+      <div class="">
-      <div> {{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }}
+        <div class="bold-title"> {{ cert.certification_name }} </div>
-        {% if cert.expiration_date %} - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }} {% endif %} </div>
+        <div class="profile-item"> {{ cert.organization }} </div>
-        {% if cert.description %} <div class="profile-item"> {{ cert.description }} </div> {% endif %}
+        <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>
-    {% endfor %}
+
   </div>
 </div>
 {% endif %}