fix: progress pill and certificate secondary cta

community/lms/web_template/course_cards/course_cards.html

@@ -3,7 +3,7 @@
   <div class="cards-parent mt-10">
     {% for course_row in courses %}
     {% set course = frappe.get_doc("LMS Course", course_row.course) %}
-    {{ widgets.CourseCard(course=course, show_progress_indicators=True) }}
+    {{ widgets.CourseCard(course=course, read_only=False) }}
     {% endfor %}
   </div>
 </div>

community/lms/widgets/CourseCard.html

@@ -7,6 +7,10 @@
       {% for tag in course.get_tags() %}
       <div class="course-card-pills">{{ tag }}</div>
       {% endfor %}
+      {% set progress = course.get_course_progress() %}
+      {% if membership and not read_only %}
+      <div class="course-card-pills ml-auto">{{ frappe.utils.rounded(progress) }}% </div>
+      {% endif %}
     </div>
     {% if not course.image %}
     <div class="default-image-text">{{ course.title[0] }}</div>
@@ -29,25 +33,11 @@
         {{ course.get_upcoming_batches() | length }} Open Batches
       </span>
       {% endif %}
-      {% set certificate = course.is_certified() %}
-      {% if certificate and show_progress_indicators %}
-      <a class="muted-text dark-links pull-right zindex" href="/courses/{{ course.name }}/{{ certificate }}">Get
-        Certificate</a>
-      {% endif %}
     </div>
 
     <div class="course-card-title">{{ course.title }}</div>
-    {% if membership and show_progress_indicators %}
-    {% set progress = course.get_course_progress() %}
-    <div class="progress mb-5 zindex" title="{{ frappe.utils.rounded(progress) }}%">
-      <div class="progress-bar" role="progressbar" style="width: {{ progress }}%" aria-valuenow="{{ progress }}"
-        aria-valuemin="0" aria-valuemax="100"></div>
-    </div>
-    {% else %}
-    <div class="card-divider"></div>
-    {% endif %}
 
-    <div class="course-card-meta-2">
+    <div {% if not read_only %} class="mb-4" {% endif %}>
       <span class="zindex">
         {{ widgets.Avatar(member=course.get_instructor(), avatar_class="avatar-small") }}
         <a class="button-links" href="/users/{{ course.get_instructor().username}}">
@@ -73,13 +63,22 @@
       </span>
     </div>
 
+    {% if not read_only %}
+
     {% set lesson_index = course.get_lesson_index(membership.current_lesson) if membership and
     membership.current_lesson
     else '1.1' %}
 
     {% set query_parameter = "?batch=" + membership.batch if membership and membership.batch else "" %}
 
-    {% if course.upcoming %}
+    {% set certificate = course.is_certified() %}
+    {% if certificate and not read_only %}
+    <div class="view-course-link is-secondary border">
+      Get Certificate <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
+    </div>
+    <a class="stretched-link" href="/courses/{{ course.name }}/{{ certificate }}"></a>
+
+    {% elif course.upcoming %}
     <div class="view-course-link is-secondary border">
       Upcoming Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
     </div>
@@ -96,8 +95,10 @@
       View Course <img class="ml-3" src="/assets/community/icons/black-arrow.svg" />
     </div>
     <a class="stretched-link" href="/courses/{{ course.name }}"></a>
+    {% endif %}
 
     {% endif %}
+
   </div>
 </div>
 <script>

community/public/css/style.css

@@ -67,6 +67,7 @@ input[type=checkbox] {
   position: relative;
   top: 1rem;
   left: 1rem;
+  width: 95%;
 }
 
 .course-card-pills {
@@ -103,7 +104,6 @@ input[type=checkbox] {
 
 .course-card {
   flex-direction: column;
-  height: 380px;
 }
 
 .muted-text {
@@ -135,8 +135,8 @@ input[type=checkbox] {
   letter-spacing: -0.014em;
   color: var(--text-color);
   align-self: stretch;
-  margin-bottom: 16px;
-  height: 45px;
+  margin-bottom: 1.5rem;
+  height: 56px;
 }
 
 @media (max-width: 360px) {
@@ -155,10 +155,6 @@ input[type=checkbox] {
   margin-bottom: 16px;
 }
 
-.course-card-meta-2 {
-  margin-bottom: 16px;
-}
-
 .course-instructor {
   margin: 0px 8px;
   font-size: 12px;

community/www/courses/index.html

@@ -14,7 +14,7 @@
     </div>
     <div class="cards-parent">
       {% for course in courses %}
-      {{ widgets.CourseCard(course=course, show_progress_indicators=True) }}
+      {{ widgets.CourseCard(course=course, read_only=False) }}
       {% endfor %}
     </div>
   </div>

community/www/profiles/profile.html

@@ -7,11 +7,12 @@
 {% block content %}
 <div class="common-page-style">
   <div class="container profile-page">
+    {% set read_only = member.name != frappe.session.user %}
     {{ ProfileBanner(member) }}
     {{ AboutOverviewSection(member) }}
-    {{ CoursesCreated(member) }}
-    {{ CoursesMentored(member) }}
-    {{ CoursesEnrolled(member) }}
+    {{ CoursesEnrolled(member, read_only) }}
+    {{ CoursesCreated(member, read_only) }}
+    {{ CoursesMentored(member, read_only) }}
     {{ ProfileTabs(profile_tabs) }}
   </div>
 </div>
@@ -106,7 +107,7 @@
 {% endmacro %}
 
 
-{% macro CoursesCreated(member) %}
+{% macro CoursesCreated(member, read_only) %}
 {% if member.get_authored_courses() | length %}
 <div class="profile-courses">
   <div class="course-home-headings">
@@ -115,14 +116,14 @@
   <div class="cards-parent">
     {% for course in member.get_authored_courses() %}
     {% set course_details = frappe.get_doc("LMS Course", course) %}
-    {{ widgets.CourseCard(course=course_details) }}
+    {{ widgets.CourseCard(course=course_details, read_only=read_only) }}
     {% endfor %}
   </div>
 </div>
 {% endif %}
 {% endmacro %}
 
-{% macro CoursesMentored(member) %}
+{% macro CoursesMentored(member, read_only) %}
 {% if member.get_mentored_courses() | length %}
 <div class="profile-courses">
   <div class="course-home-headings">
@@ -131,28 +132,15 @@
   <div class="cards-parent">
     {% for mentorship in member.get_mentored_courses() %}
     {% set course_details = frappe.get_doc("LMS Course", mentorship.course) %}
-    {{ widgets.CourseCard(course=course_details) }}
+    {{ widgets.CourseCard(course=course_details, read_only=read_only) }}
     {% endfor %}
   </div>
 </div>
 {% endif %}
 {% endmacro %}
 
-{% macro CoursesEnrolled(member) %}
+{% macro CoursesEnrolled(member, read_only) %}
 {% set enrolled = member.get_enrolled_courses() %}
-{% set show_progress = member.name == frappe.session.user %}
-{% if enrolled.in_progress | length %}
-<div class="profile-courses">
-  <div class="course-home-headings">
-    Courses In Progress
-  </div>
-  <div class="cards-parent">
-    {% for course in enrolled.in_progress %}
-    {{ widgets.CourseCard(course=course, show_progress_indicators=show_progress) }}
-    {% endfor %}
-  </div>
-</div>
-{% endif %}
 
 {% if enrolled.completed | length %}
 <div class="profile-courses">
@@ -161,7 +149,20 @@
   </div>
   <div class="cards-parent">
     {% for course in enrolled.completed %}
-    {{ widgets.CourseCard(course=course, show_progress_indicators=show_progress) }}
+    {{ widgets.CourseCard(course=course, read_only=read_only) }}
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
+{% if enrolled.in_progress | length %}
+<div class="profile-courses">
+  <div class="course-home-headings">
+    Courses In Progress
+  </div>
+  <div class="cards-parent">
+    {% for course in enrolled.in_progress %}
+    {{ widgets.CourseCard(course=course, read_only=read_only) }}
     {% endfor %}
   </div>
 </div>