From e805ae77577b179fe237c03ce8f67b303ad5b120 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Wed, 23 Feb 2022 09:36:50 +0530 Subject: [PATCH] feat: profile page redesign --- school/fixtures/custom_field.json | 4 +- school/lms/web_form/profile/profile.json | 25 ++- school/plugins.py | 1 - school/public/css/style.css | 115 +++++----- school/public/icons/book_plain.svg | 4 + school/www/profiles/profile.html | 274 ++++++++++------------- 6 files changed, 204 insertions(+), 219 deletions(-) create mode 100644 school/public/icons/book_plain.svg diff --git a/school/fixtures/custom_field.json b/school/fixtures/custom_field.json index 5a964181..b4ec5ef9 100644 --- a/school/fixtures/custom_field.json +++ b/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, diff --git a/school/lms/web_form/profile/profile.json b/school/lms/web_form/profile/profile.json index 343437fb..70dcf10d 100644 --- a/school/lms/web_form/profile/profile.json +++ b/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 }, { diff --git a/school/plugins.py b/school/plugins.py index 7a30eba2..6699f716 100644 --- a/school/plugins.py +++ b/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() diff --git a/school/public/css/style.css b/school/public/css/style.css index 0b86756f..1d0a1527 100644 --- a/school/public/css/style.css +++ b/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; - padding-left: 175px; + margin: 1rem 0 0.25rem; +} + +@media (max-width: 550px) { + .profile-name-section { + flex-direction: column; + align-items: flex-end; + margin: 0 0 0.5rem; + } } .profile-link { - display: flex; - 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; - } + margin-left: auto; } .creator-badge { @@ -1051,11 +1030,16 @@ input[type=checkbox] { } } -.profile-card { - flex-direction: column; - padding: 1.5rem; +@media (max-width: 550px) { + .creator-badge { + 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; +} diff --git a/school/public/icons/book_plain.svg b/school/public/icons/book_plain.svg new file mode 100644 index 00000000..8a5883b9 --- /dev/null +++ b/school/public/icons/book_plain.svg @@ -0,0 +1,4 @@ + + + + diff --git a/school/www/profiles/profile.html b/school/www/profiles/profile.html index 11066b0c..f0a40f68 100644 --- a/school/www/profiles/profile.html +++ b/school/www/profiles/profile.html @@ -1,15 +1,24 @@ {% extends "templates/base.html" %} {% block head_include %} - {% endblock %} {% block content %}
+ {{ ProfileBanner(member) }} +
+
+ {% set read_only = member.name != frappe.session.user %} + {{ About(member) }} + {{ EducationDetails(member) }} + {{ WorkDetails(member) }} + {{ Certification(member) }} + {{ Contact(member) }} + {{ Skills(member) }} + {{ CareerPreference(member) }} +
+
- {% set read_only = member.name != frappe.session.user %} - {{ ProfileBanner(member) }} - {{ ProfileSections(member) }} {{ 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") %} +
{{ widgets.Avatar(member=member, avatar_class="avatar-square") }} @@ -31,89 +40,41 @@
{{ member.full_name }}
- {% if enrollment %} -
{{ enrollment }}
- {% endif %} + {% if get_authored_courses(member.name) | length %} -
Creator
+
{{ _("Creator") }}
{% endif %} + {% if member.looking_for_job %} -
Open Network
+
{{ _("Open Network") }}
+ {% endif %} + + {% if frappe.session.user == member.email %} + {{ _("Edit Profile") }} {% endif %}
- {% if frappe.session.user == member.email %} - Edit Profile - {% endif %} +
+ {% if member.headline %} +
{{ member.headline }}
+ {% endif %} -
-
-{% endmacro %} - -{% macro ProfileSections(member) %} - -
- -
- {{ About(member) }} - {{ EducationDetails(member) }} - {{ WorkDetails(member) }} - {{ Certification(member) }} -
- -
- {{ Overview(member) }} - {{ Contact(member) }} - {{ Skills(member) }} - {{ CareerPreference(member) }} - -
- -
-{% 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 %} -
-
- Overview -
-
{% if enrollment %} -
- - {{ enrollment }} {% if enrollment > 1 %} Courses {% else %} Course {% endif %} Taken -
- {% endif %} - {% if reviews %} -
- - {{ reviews }} {% if reviews > 1 %} Courses {% else %} Course {% endif %} Reviewed -
- {% endif %} - {% if mentorship %} -
- - {{ mentorship }} {% if mentorship > 1 %} Courses {% else %} Course {% endif %} Mentored -
+
+ + {{ enrollment }} {{ enrollment_suffix }} {{ _("taken") }}
{% endif %}
-
-{% endif %} -{% endmacro %} +
+
+{% endmacro %} {% macro CoursesCreated(member, read_only) %} {% set authored_courses = get_authored_courses(member.name) %} {% if authored_courses | length %}
-
- Courses Created -
+
{{ _("Courses Created") }}
{% 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 %}
-
{{ _("About") }}
-
- {{ member.bio }} +
+
{{ _("About") }}
+
{{ member.bio }}
{% endif %} @@ -191,8 +152,8 @@ {% macro WorkPreference(member) %}
-
{{ _("Work Preference") }}
-
+
+
{{ _("Work Preference") }}
{{ member.attire }}
{{ member.collaboration }}
{{ member.role }}
@@ -206,38 +167,42 @@ {% macro CareerPreference(member) %} {% if member.preferred_functions or member.preferred_industries or member.preferred_location or member.dream_companies %}
-
{{ _("Career Preference") }}
-
- - {% if member.preferred_functions | length %} -
- Preferred Functions: +
+
{{ _("Career Preference") }}
+
+ {% if member.preferred_functions | length %}
- {% for function in member.preferred_functions %} -
{{ function.function }}
- {% endfor %} + {{ _("Preferred Functions:") }} + {% for function in member.preferred_functions %} +
{{ function.function }}
+ {% endfor %}
-
- {% endif %} + {% endif %} - {% if member.preferred_industries | length %} -
- Preferred Industries: + {% if member.preferred_industries | length %}
- {% for industry in member.preferred_industries %} -
{{ industry.industry }}
- {% endfor %} + {{ _("Preferred Industries:") }} + {% for industry in member.preferred_industries %} +
{{ industry.industry }}
+ {% endfor %}
+ {% endif %} + + {% if member.preferred_location %} +
+ {{ _("Preferred Locations:") }} +
{{ member.preferred_location }}
+
+ {% endif %} + + {% if member.dream_companies %} +
+ {{ _("Dream Companies:") }} +
{{ member.dream_companies }}
+
+ {% endif %}
- {% endif %} - {% if member.preferred_location %} -
Preferred Locations: {{ member.preferred_location }}
- {% endif %} - - {% if member.dream_companies %} -
Dream Companies: {{ member.dream_companies }}
- {% endif %}
{% endif %} @@ -246,35 +211,28 @@ {% macro Contact(member) %} {% if show_contacts_section %}
-
{{ _("Contact") }}
-
- - {% if not member.hide_private and not hide_primary_contact %} - {{ member.email }} - {% endif %} - - {% if member.mobile_no and not member.hide_private and not hide_primary_contact %} - - {{ member.mobile_no }} - - {% endif %} - - {% if member.linkedin %} +
+
{{ _("Contact") }}
+
+ {% if member.linkedin %} {% set linkedin = member.linkedin[:-1] if member.linkedin[-1] == "/" else member.linkedin %} - + {{ linkedin.split("/")[-1] }} {% endif %} + {% if member.medium %} - + {{ member.medium.split("/")[-1] }} {% endif %} + {% if member.github %} - + {{ member.github.split("/")[-1] }} {% endif %} +
{% endif %} @@ -283,11 +241,13 @@ {% macro Skills(member) %} {% if member.skill | length %}
-
{{ _("Skills")}}
-
- {% for skill in member.skill %} -
{{ skill.skill_name }}
- {% endfor %} +
+
{{ _("Skills")}}
+
+ {% for skill in member.skill %} +
{{ skill.skill_name }}
+ {% endfor %} +
{% endif %} @@ -296,25 +256,28 @@ {% macro EducationDetails(member) %} {% if member.education %}
-
Education
- {% for edu in member.education %} -
-
{{ edu.institution_name }}
-
{{ edu.degree_type }} {{ edu.major }} - {% if not member.hide_private %} - - {% if edu.grade %} {{ edu.grade }} {% endif %} - {% endif %} +
{{ _("Education") }}
+
+ {% for edu in member.education %} +
+
{{ edu.institution_name }}
+
{{ edu.degree_type }} {{ edu.major }} + {% if not member.hide_private %} + + {% if edu.grade %} {{ edu.grade }} {% endif %} + {% endif %} +
+
+ {% if edu.start_date %} + {{ frappe.utils.format_date(edu.start_date, "MMM YYYY") }} - + {% endif %} + {{ frappe.utils.format_date(edu.end_date, "MMM YYYY") }}
+
{{ edu.location }}
-
- {% if edu.start_date %} - {{ frappe.utils.format_date(edu.start_date, "MMM YYYY") }} - - {% endif %} - {{ frappe.utils.format_date(edu.end_date, "MMM YYYY") }}
-
{{ edu.location }}
+ {% endfor %}
- {% endfor %} +
{% endif %} @@ -324,18 +287,20 @@ {% set work_details = member.work_experience + member.internship %} {% if work_details | length %}
-
Work Experience
+
{{ _("Work Experience") }}
+
{% for work in work_details %}
{{ work.title }}
{{ work.company }}
-
{{ frappe.utils.format_date(work.from_date, "MMM YYYY") }} - +
{{ 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 %}
-
{{ work.location }}
+
{{ work.location }}
{% if work.description %}
{{ work.description }}
{% endif %}
{% endfor %} +
{% endif %} @@ -344,17 +309,20 @@ {% macro Certification(member) %} {% if member.certification %}
-
Certification
- {% for cert in member.certification %} -
-
{{ cert.certification_name }}
-
{{ cert.organization }}
-
{{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }} - {% if cert.expiration_date %} - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }} {% endif %}
- {% if cert.description %}
{{ cert.description }}
{% endif %} +
{{ _("Certification") }}
+
+ {% for cert in member.certification %} +
+
{{ cert.certification_name }}
+
{{ cert.organization }}
+
{{ frappe.utils.format_date(cert.issue_date, "MMM YYYY") }} + {% if cert.expiration_date %} - {{ frappe.utils.format_date(cert.expiration_date, "MMM YYYY") }} {% endif %}
+ {% if cert.description %}
{{ cert.description }}
{% endif %} +
+ {% endfor %}
- {% endfor %} +
{% endif %}