feat: community page redesign

school/lms/widgets/MemberCard.html

@@ -1,8 +1,13 @@
 <div class="common-card-style member-card">
   {{ widgets.Avatar(member=member, avatar_class=avatar_class) }}
-  <div class=" member-card-title {% if show_course_count %} font-weight-bold {% endif %}">
+  <div class="bold-title mt-4">
     {{ member.full_name }}
   </div>
+
+  {% if member.headline %}
+  <div> {{ member.headline }} </div>
+  {% endif %}
+
   {% set course_count = get_authored_courses(member.name) | length %}
   {% if show_course_count and course_count > 0 %}
   {% set suffix = "Courses" if course_count > 1 else "Course" %}

school/overrides/user.py

@@ -246,12 +246,12 @@ def get_country_code():
 def search_users(start=0, text=""):
     or_filters = get_or_filters(text)
     count = len(get_users(or_filters, 0, 900000000, text))
-    users = get_users(or_filters, start, 30, text)
+    users = get_users(or_filters, start, 24, text)
     user_details = get_user_details(users)
 
     return {
         "user_details": user_details,
-        "start": cint(start) + 30,
+        "start": cint(start) + 24,
         "count": count
     }
 
@@ -282,7 +282,7 @@ def get_or_filters(text):
 def get_user_details(users):
     user_details = []
     for user in users:
-        details = frappe.get_doc("User", user)
+        details = frappe.db.get_value("User", user, ["name", "username", "full_name", "user_image", "headline"], as_dict=True)
         user_details.append(Widgets().MemberCard(member=details, avatar_class="avatar-large"))
 
     return user_details

school/public/css/style.css

@@ -579,7 +579,7 @@ input[type=checkbox] {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 1rem 0;
+  padding: 2rem 1rem;
 }
 
 .member-card .talk-title {
@@ -603,19 +603,6 @@ input[type=checkbox] {
   }
 }
 
-.member-card-title {
-  margin-top: 0.75rem;
-  text-align: center;
-}
-
-.member-card-large .member-card-title {
-  font-weight: bold;
-}
-
-.member-card-xl .member-card-title {
-  font-weight: bold;
-}
-
 .member-card-medium {
   width: 160px;
   height: 140px;
@@ -680,8 +667,8 @@ input[type=checkbox] {
 }
 
 .avatar-large {
-  width: 88px;
-  height: 88px;
+  width: 68px;
+  height: 68px;
 }
 
 .member-card .avatar-xl {
@@ -742,18 +729,18 @@ input[type=checkbox] {
 
 .member-parent {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  -moz-column-gap: 1rem;
-  column-gap: 1rem;
-  row-gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  -moz-column-gap: 1.25rem;
+  column-gap: 1.25rem;
+  row-gap: 1.25rem;
 }
 
 @media (max-width: 600px) {
   .member-parent {
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
-    -moz-column-gap: 24px;
-    column-gap: 24px;
-    row-gap: 24px;
+    -moz-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+    row-gap: 1.25rem;
   }
 }
 
@@ -769,25 +756,6 @@ input[type=checkbox] {
   flex: 1;
 }
 
-.preview-modal {
-  padding: 0 !important;
-}
-
-.preview-modal .modal-dialog {
-  width: 90%;
-  height: 100%;
-  max-width: none;
-}
-
-.preview-modal .modal-content {
-  height: 90%;
-}
-
-.video-iframe {
-  width: 100%;
-  height: 90%;
-}
-
 .review-modal .modal-dialog {
   width: 50%;
   height: 70%;
@@ -1079,7 +1047,7 @@ input[type=checkbox] {
 }
 
 .bold-title {
-  font-weight: bold;
+  font-weight: 500;
   color: var(--gray-800);
 }
 

school/www/community/index.html

@@ -7,7 +7,7 @@
 
     <input class="search" id="search-user" placeholder="{{ _('Try a Name, Company, or Industry') }}">
 
-    <div class="course-home-headings">Community</div>
+    <div class="course-home-headings">{{ _("Community") }} </div>
 
     <div class="alert alert-dismissible empty-state text-center hide" id="search-empty-state">
       <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
@@ -17,13 +17,13 @@
     </div>
 
     <div class="member-parent">
-      {% for user in user_details %}
+      {% for user in users %}
       {{ widgets.MemberCard(member=user, show_course_count=False, avatar_class="avatar-large") }}
       {% endfor %}
     </div>
     {% if user_count > user_details | length %}
     <div class="mt-10 d-flex justify-content-center">
-      <div class="button is-secondary" id="load-more" data-start="30" data-count="{{ user_count }}">Load More</div>
+      <div class="button is-secondary" id="load-more" data-start="30" data-count="{{ user_count }}">{{ _("Load More") }}</div>
     </div>
     {% endif %}
   </div>

school/www/community/index.py

@@ -2,16 +2,9 @@ import frappe
 
 def get_context(context):
     context.user_count = frappe.db.count("User", {"enabled": True})
-    users = frappe.get_all("User",
-        {"enabled": True},
-        pluck="name",
+    context.users = frappe.get_all("User",
+        filters={"enabled": True},
+        fields=["name", "username", "full_name", "user_image", "headline"],
         start=0,
-        page_length=30,
+        page_length=24,
         order_by="creation desc")
-
-    user_details = []
-    for user in users:
-        details = frappe.get_doc("User", user)
-        user_details.append(details)
-
-    context.user_details = user_details